Prettier와 ESLint 그리고 Airbnb Style Guide 설정
Prettier와 ESLint에 대해서 간단히 설명하자면
ESLint는 문법을 검사해주는 도구이며 다양한 옵션을 작성하여 원하는데로 문법을 검사하도록 설정할 수 있다.(코드 포맷팅 효과도 있긴하다)
이 두가지 도구를 사용하는 가장 큰 이유는 여러사람이 코드를 작성하더라도 한사람이 작성한것과같이 효과를 주어 협업시 효율을 극대화 하기 위해서이다.
Prettier와 ESlint Airbnb 코드 스타일 적용, 설정 하는 방법
1. 두가지 도구는 간단하게 VSCode에서 Extensions로 ESLint와 Prettier를 다운받을 수 있다.
2. 이렇게 다운받은 두가지 Extensions 는 global로 설치되어있다. 그러므로 프로젝트별로 ESLint와 Prettier를 설정하기 위해서는 해당 프로젝트 root 디렉터리에 devDependencies에 eslint와 prettier를 다운받아야 한다.
$ npm install -D eslint prettier
3. Airbnb 구성 설치하기
$ npx install-peerdeps --dev eslint-config-airbnb
위 명령어를 통해 관련 구성을 한번에 설치할 수 있고 하나씩 설치할 수도 있다.
"devDependencies": {
"eslint": "^7.25.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.2.0"
}
4. Prettier 설정 관련 설치하기
$ npm install -D eslint-config-prettier eslint-plugin-prettier
해당 패키지들에대해 간단히 설명하면
eslint-config-prettier는 Prettier와 중복되는 ESLint 규칙을 비활성화 한다.
eslint-plugin-prettier는 Prettier 규칙을 ESLint 규칙으로 추가해주는 플러그인이다.
airbnb 코드 스타일 규칙에도 코드 포맷팅과 관련된 부분이 작성되어있기 때문에 충돌이 발생하게 된다. 그러므로 충돌을 방지하기 위해서는 위에 두 패키지를 다운 받아야 한다.
5. 프로젝트의 root 디렉토리에 .eslintrc 파일을 생성한다.
아래 내용을 복사 붙여넣기
{
"extends": ["airbnb", "prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": ["error"]
},
}
6. 프로젝트의 root 디렉토리에 .prettierrc 파일을 생성한다.
자신이 원하는대로 설정 옵션 작성하기
ex)
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": true,
"endOfLine": "auto",
"jsxBracketSameLine": false
}
7. 마지막으로 VSCode의 settings.json 파일로가서 아래의 두가지 설정을 추가해 준다.
{
"editor.formatOnSave": true,
// For ESLint
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
나의 경우 프로젝트를 진행하면서 .eslintrc와 .prettierrc 설정, 옵션을 아래와 같이 작성했다.
.eslintrc
{
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"browser": true,
"node": true,
"es6": true
},
"ignorePatterns": ["node_modules/"],
"extends": ["airbnb", "prettier"],
"plugins": ["import", "react-hooks", "prettier"],
"rules": {
"jsx-a11y/label-has-associated-control": "off",
"jsx-a11y/anchor-is-valid": "off",
"no-console": "off",
"no-underscore-dangle": "off",
"react/forbid-prop-types": "off",
"react/jsx-filename-extension": "off",
"react/jsx-one-expression-per-line": "off",
"object-curly-newline": "off",
"linebreak-style": "off",
"no-param-reassign": "off",
"consistent-return":"off",
"prettier/prettier": ["error"]
}
}
.prettierrc
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": true,
"endOfLine": "auto",
"jsxBracketSameLine": false
}
옵션들은 구글에서 검색하거나, eslint 또는 prettier 공식문서를 보고 추가하면 된다.
.eslintrc rules와 .prettierrc 규칙은 상황에따라, 원하는 방식에따라 옵션을 작성하면 된다.
이외에도 참고하면 좋은 정보
참고 자료
댓글
댓글 쓰기