[JavaScript] ESLint와 Prettier 설치 및 설정
자바는 정적 컴파일을 하지 않은 인터프리터 언어이다.
따라서 에러 찾기가 힘들고, 에러를 해결하지 않은 채 배포할 가능성이 있다고 한다.
자바 스크립트를 사용하는 첫 협업 프로젝트라
이를 해결하기 위해 eslint와 prettier를 사용해보았다.
EsLint는 자바스크립트 문법에서 에러를 표시해준다 (flutter의 linter와 같은 개념인 듯 하다.)
Prettier는 코드스타일을 자동으로 formatting 해준다.
** CRA(create-react-app)에는 이미 세팅이 되어있다고 한다 **
1. eslint 설치 및 설정
1) ESLint 확장기능 설치
vs code의 개발단에서도 사용할 수 있도록 VS code에 ESLint 라이브러리를 통합한다.
2) ESLint 설치
- 프로젝트에 설치 (앱을 구동시킬 때 사용)
npm install eslint --save
./node_modules 디렉토리 내 패키지 설치
/package.json 의 dependencies 에 추가
- dev 버전에만 설치 (개발시에만 사용)
npm install eslint --save -dev
./node_modules 디렉토리 내 패키지 설치
/package.json 의 devDependencies 에 추가
3) ESLint 초기설정
command pallete를 연 후에 create-Eslint-configuration을 입력하여
ESLint를 초기설정하면 아래와 같이 eslintrc.json 파일이 생성된다.
자신의 필요에 따라 수정하면 된다.
ESLint 설정 구성 참고자료
(블로그)
velog.io/@kyusung/eslint-config-2
(공식문서)
eslint.org/docs/user-guide/configuring/#specifying-environments
[eslintrc.json]
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"parser": "babel-eslint",
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"airbnb",
"plugin:prettier/recommended"
],
"settings": {
"react": {
"version": "detect"
}
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react",
"react-hooks",
"prettier"
],
"rules": {
"react/react-in-jsx-scope": 0,
"react/prefer-stateless-function": 0,
"react/jsx-filename-extension": 0,
"react/jsx-one-expression-per-line": 0,
"no-nested-ternary": 0
},
"globals": {
"React": "writable"
}
}2. Prettier 설치 및 설정
prettier와 eslint는 모두 코드 포멧을 수정하지만
연동되는 것이 아니라 순차적으로 진행되기 때문에 상충되는 부분이 있다.
이런 부분에 대해 Lint 오류가 발생할 수 있으니 주의해야한다.
1) Prettier 설치
eslint-plugin-prettier: Prettier를 ESLint의 플러그인으로 추가하는 명령어이다. 이 것만 사용한다면 eslint formatting rules와 prettier rules가 충돌할 수 있다.
eslint-config-prettier : Prettier 규칙을 ESLint에 통합하여 prettier와 상충되는 eslint 설정을 비활성화 한다.
ESLint 는 자바스크립트 문법을 담당하고, 코드 스타일 정리는 Prettier 가 담당하는 방식이다.
npm install --save-dev eslint-plugin-prettier eslint-config-prettier
2) Prettier 설정
어떤 prettier의 rule을 사용할 지 설정해야한다.
이를 위한 여러 방법이 있는데,
- settings.json(VS code 기본 설정)에서 prettier를 설정한다.
- .prettierrc 파일에서 설정(prettier의 포맷을 적용하기 위한 설정파일)
- Prettier 패키지 설치 후 CLI를 사용한다.
[settings.json]
{
//기본 포멧팅 설정
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
//자동포멧팅
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
"editor.formatOnSave": false,
}위의 코드에서는 자동 저장 기능(formatOnSave) 을 비활성화 하고
저장 시에만 codeActionsOnSave으로 자동 포멧팅 수정되도록 한다.
https://code.visualstudio.com/docs/editor/codebasics
기본 포멧팅 이외에 설정가능한 요소들
prettier.arrowParens
prettier.bracketSpacing
prettier.endOfLine
prettier.htmlWhitespaceSensitivity
prettier.insertPragma
prettier.jsxBracketSameLine
prettier.jsxSingleQuote
prettier.printWidth
prettier.proseWrap
prettier.quoteProps
prettier.requirePragma
prettier.semi
prettier.singleQuote
prettier.tabWidth
prettier.trailingComma
prettier.useTabs
prettier.vueIndentScriptAndStyle
settings.json 여는 법
Code - Preference - Settings 후 상단 오른 쪽에 {} 혹은 문서 표시를 클릭한다.
** 하지만 아직 언어가 익숙하지 않다보니
어떻게 설정하는지만 익혀놓고 추후 필요한 포멧팅을 설정해야겠다는 생각이 들었다.
[출처]