이 포스팅에서는 CRA(Create React App)을 이용하여 생성한 리액트 프로젝트를 기준으로 기본적인 ESLint와 Prettier 설정 방법을 다룹니다.
CRA로 생성된 프로젝트는 안에 ESLint가 따로 탑재되어 있기 때문에 따로 설치할 필요가 없다.
Prettier 설치
$ yarn add -D prettierPrettier와 ESLint를 같이 사용하려면 아래 모듈을 추가로 설치해야 한다.
$ yarn add -D eslint-config-prettier- eslint-config-prettier
ESLint의 formatting 관련 설정 중 Prettier와 충돌하는 부분을 비활성화 한다.
그리고 프로젝트의 루트 경로에 .eslintrc.json파일을 만들고 아래 내용을 추가한다.
{
// ...
"extends": ["react-app", "prettier"]
// ...
}ESLint, Prettier 익스텐션 설치
Node 모듈을 설치했으니, 이제 VSCode와 같이 사용할 때 필요한 익스텐션을 설치하고 설정을 바꿔줘야한다.
VSCode의 Extensions: Marketplace로 들어가서 ESLint와 Prettier를 검색하여 설치한다.
VSCode 설정
VSCode에서 파일을 저장할 때마다 자동으로 코드가 수정되도록 설정해보자.
VSCode 설정(윈도우, 리눅스에서는 Ctrl + , 맥에서는 Cmd + ,)으로 들어간다.
설정으로 들어가면 Search settings 입력창 아래에 User와 Workspace 항목이 있다.
User는 VSCode 자체 설정으로 모든 프로젝트에 적용이 되고, Workspace는 현재 프로젝트에서만 설정이 적용되며, .vscode/settings.json에 설정 항목이 저장된다.
ESLint와 Prettier의 경우 프로젝트별로 설정이 다른경우가 많이 때문에 작업공간마다 설정파일을 따로 관리하는 것을 선호한다.
설정은 json파일에 직접 입력이 가능하며, 우측 상단에 종이 모양의 Open Setting(JSON)아이콘을 클릭하면 settings.json파일이 열리며 아래의 코드를 추가한다.
{
// Set the default
"editor.formatOnSave": false,
"editor.defaultFormatter": "esbenp.prettier-vscode",
// Enable per-language
// 사용하고자 하는 언어의 Vscode 설정 방법을 구글링하여 추가합니다.
// js
"[javascript]": {
"editor.formatOnSave": true
},
// jsx, ts 등등
// ts
"[typescript]": {
"editor.formatOnSave": true
},
// jsx
"[javascriptreact]": {
"editor.formatOnSave": true
},
"editor.codeActionsOnSave": {
// For ESLint
"source.fixAll.eslint": true
}
}Prettier 설정
ESLint 설정 파일과 마찬가지로 루트 경로에 .prettierrc을 만들어 준다. Prettier의 옵션 문서에서 필요한 옵션을 골라 설정해 주면 된다.
{
"trailingComma": "all",
"tabWidth": 2,
"semi": false,
"singleQuote": true
}참고자료
