VS Code에 ESLint와 Prettier 적용하기
난 주로 PHP 로 개발을 진행하기 때문에 ESLint와 Prettier는 거의 사용을 하지 않지만 간혹 React Native App을 개발하거나 할 때는 사용할 때가 있다. 그리고 자바스크립트 역시 개발을 해야할 경우가 있어서 이번에 제대로 세팅을 진행하게 됐다. 포맷팅은 Prettier가 담당하고 문법오류는 ESLint에서 체크한다.
우선 아래 2개의 Extension을 VS Code에 설치한다.
![](https://chicpro.dev/wp-content/uploads/2022/05/vscode-eslint.png)
특히 ESLint의 경우는 Extension만 설치했다고 사용할 수 있는 것은 아니다. 아래 내용처럼 npm install eslint
와 같이 별도로 eslint 패키지를 설치해줘야 한다.
The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn’t provide one the extension looks for a global install version. If you haven’t installed ESLint either locally or globally do so by running npm install eslint in the workspace folder for a local install or npm install -g eslint for a global install.
![](https://chicpro.dev/wp-content/uploads/2022/05/vscode-prettier.png)
이제 VS Code settings.json 파일에 설정을 추가해준다.
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
"editor.formatOnSave": true
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
"editor.formatOnSave": true
},
"prettier.configPath": ".prettierrc.js",
"eslint.useESLintClass": true,
"eslint.options": { "useEslintrc": false, "overrideConfigFile": ".eslintrc.json" }
}
위 설정은 javascript 와 typescript 파일을 저장할 때 기본 포맷터를 prettier 로 설정하고 문법 오류 등은 eslint로 체크한다는 내용이다. 팀 단위로 협업을 진행하게 되면 prettier 와 eslint 설정이 따로 관리되고 있을 터이기 때문에 공통된 설정을 적용하기 위해 각각의 설정 파일을 별도로 지정해줬다. 다만 "useEslintrc": false
설정은 꼭 필요한 내용인지는 모르겠다. 만약 Parsing error: The keyword 'import' is reservedeslint
오류가 발생한다면 위 설정 중 "eslint.useESLintClass": true
부분이 해당 오류를 해결 할 수 있다.
각 설정 파일 .prettierrc.js
, .eslintrc.json
의 설정은 아래와 같은 형식으로 지정하면 된다.
module.exports = {
bracketSpacing: false,
bracketSameLine: true,
singleQuote: true,
printWidth: 80,
useTabs: false
};
{
"rules": {
"no-console": 2
}
}
참고로 VS Code 가 아닌 다른 에디터를 사용하거나 직접 eslint 명령어로 문법 오류를 체크하는 경우라면 eslint-config-prettier
를 추가로 설치해서 eslint 설정과 prettier 설정이 서로 충동하는 것을 막을 수 있다. 그리고 아래 내용을 .eslintrc
파일에 추가해 준다.
{
"extends": [
"prettier"
]
}