전에 다루었던 prettier와 ESLint 설정에서 추가로 작성하고 싶은 내용이 있었지만.. 분량이 너무 길어서 따로 작성하게 되었다.
저번에 보았던 ESLint에 많은 plugin들을 잘 정리한 airbnb Lint plugin이 존재하는데, 어떻게 설정하는지 알아보려고 한다.
airbnb 코드 스타일 한국어 번역본도 존재한다
https://github.com/apple77y/javascript/tree/master/react
airbnb 세팅
(1). 설치
eslint-config-airbnb를 설치하려면 사전에 설치해야하는 패키지들이 있다. 다음 명령어를 통해 확인할 수 있다.
npm info "eslint-config-airbnb@latest" peerDependencies
CRA v2기준으로는 이미 설치가 되어 있어서 eslint-config-airbnb 외에는 따로 설치할 것이 없다.
yarn add eslint-config-airbnb
그런데 만약에 리액트 프로젝트를 CRA v2를 통해서 만든게 아니라면 위 패키지들을 직접 설치하거나, 아래의 명령어를 통해 한꺼번에 설치할 수 있다.
npx install-peerdeps --dev eslint-config-airbnb
(Global 설치가 아닌 devDependencies로 해야하므로 -peerdeps --dev를 꼭 넣자!)
이렇게 package.json에 생성이 되어있을 것이다.
ESLint의 세부 설정은 package.json의 eslintConfig에서 해도 되고 .eslintrc.js, .eslintrc.json, .eslintrc.yaml, .eslintrc.yml파일 중 하나를 선택해서 할 수 있다.
우리는 root 디렉토리에 .eslintrc.js파일을 생성하자.
파일을 열어서 아래와 같이 입력
module.exports = {
env: {
browser: true,
es6: true,
node: true,
},
extends: ['airbnb'],
rules: {
'linebreak-style': 0
},
};
저번 포스팅에서 다루었던 prettier도 설치
npm i -D prettier
.prettierrc.json 파일을 생성 후 
아래 내용 작성
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80,
"arrowParens": "avoid"
}ESLint 와 prettier를 함께 사용
이 둘을 함께 사용하면 충돌이 일어나는데,
eslint-config-prettier & eslint-plugin-prettier
위 패키지를 통해서 설정이 가능한데 어떤 기능들이 있는지 살펴보자.
eslint-config-prettier
prettier에서 관리 해 줄 수 있는 코드 스타일의 ESLint 규칙을 비활성화시켜준다. 즉, eslint 중 prettier와 충돌(중복)이 일어나는 모든 rules을 무시(turn off)한다.
이것을 사용하게 된다면 ESLint는 자바스크립트 문법 관련된 것들만 관리하게 되고, 코드 스타일 관련 작업은 prettier가 담당한다. 현재 적용된 대로라면 airbnb스타일에 맞게 포멧팅과 문법 검사를 맡게된 ESLint는 이 패키지로 인해 중복되는 포멧팅 규칙은 prettier에게 맡기고 나머지 부분에 대해서는 airbnb 컨벤션에 맞게 포멧팅과 문법 검사를 실행하는 것이다.
eslint-plugin-prettier
Prettier를 ESLint 규칙에 맞게 실행하게 오류를 ESLint의 오류로 나타나게 해주는 기능을 가진 패키지이다. 즉, Prettier가 ESLint 규칙을 바탕으로 검사를 하다가 결과로 나오는 오류를 ESLint 오류로 보여주게 한다.
이 패키지를 작동시키기 위해서 eslint-config-prettier 패키지를 설정하는 것이라고 생각해도 된다. 왜냐하면 eslint-plugin-prettier 플러그인이 완벽하게 작동하기 위해서는 formatting에 관련한 모든 ESLint 규칙들을 꺼놔야한다. 그러지 않으면 lint error를 피할 수 없다고 공식문서에 나와있다.
정리하면 eslint-plugin-prettier 플러그인 설치를 통해 모든 Prettier 규칙 이 ESLint 규칙으로 추가된다고 볼 수 있기 때문에 ESLint 하나만 실행해도 문법검사와 formatting을 함께 실행 시킬 수 있다. 하지만 formatting에 관하여 충돌되는 부분이 있으면 안되므로 eslint-config-prettier 패키지 설치를 통해 해결하는 것이다. 이제부터 이 두개의 플러그인 패키지를 설치하고 설정을 적용할 것이다.
ESLint formatting rules 비활성화
1.eslint-config-prettier 패키지를 설치한다.
npm install --save-dev eslint-config-prettier
2..eslintrc.json에 eslint-config-prettier 설정
"extends":[
...
"prettier",
"prettier/prettier",
]3. eslint 실행
npx eslint src/App.tsx ---quiet --fix
ESLint가 formatting rules사용을 중단한 것을 볼 수 있다.
ESLint가 Prettier 규칙을 사용하도록!
1. eslint-plugin-prettier 설치
npm install --save-dev eslint-plugin-prettier
2. .eslintrc.json에 eslint-plugin-prettier 설정
"extends":[
"plugin:prettier/recommended"
]note1: 이것은 ESLint 내에서 Prettier를 실행하는 eslint-plugin-prettier 플러그인에서 제공하는 규칙을 켠다.
note2: "plugin:prettier/recommended"가 이미 뒤에서 수행하므로 "extends"에서 "prettier"를 제거 할 수도 있다.
3. ESLint를 실행한다.
npx eslint src/App.tsx --quiet --fix
ESLint는 formatting rules 로 Prettier 구성을 사용한다.
eslint-config-prettier : prettier와 충돌을 일으키는 ESLint 규칙들을 비활성화 시키는 config
eslint-plugin-prettier : Prettier에서 인식하는 코드상의 포맷 오류를 ESLint 오류로 출력
2. extends 와 plugin 차이
PLUGINS
module.exports = {
"plugins": [
"eslint-plugin-react"
]
};생략
"eslint-plugin-react"의 "eslint-plugin"은 생략 가능하다
@jquery/eslint-plugin-jquery 도 짧게 @jquery/jquery 로 생략해서 사용할 수 있다
필요성
"eslint-plugin-react" 플러그인을 사용하면 ESLint가 react코드를 알아먹고 문제점을 알려주게된다. 더 엄밀히 말하면 단순히 플러그인을 가져오는것에 끝나면 아무일도 일어나지 않는다. 이거를 사용해야한다.
RULES로 사용하기
module.exports = {
"plugins": [
"react"
],
"rules": {
"react/display-name": true,
"react/jsx-key": true,
"react/jsx-no-duplicate-props": true
...
}
};이렇게 plugin으로 가져온 규칙을 일일이 rules에 적용해주면된다.
하지만 규칙이 많다면 상당히 귀찮다.
EXTENDS로 사용하기
module.exports = {
"plugins": [
"react"
],
"extends": [
"eslint:recommended",
"plugin:react/recommended"
]
};플러그에서 추천하는 규칙들을 모아놓은거를 extends해서 한꺼번에 적용하는게 rules에 일일이 적어주는것보다 훨씬 편하긴 하다.
EXTENDS VS PLUGIN
위에서 Plugin과 Extends를 같이 설명했기 때문에 둘의 차이점만 알아보도록 하자.
extends는 다른 사람이 만든 규칙을 가져와서 내 규칙에 붙여서 확장되는거고, plugin은 다른사람이 만든 규칙을 가져오는것이다. 다시말해 extends에 그냥 뭘 확장할건지만 써주면 자동으로 rules에 rule group이 추가 되고, plugin을 쓸때는 내가 일일이 rules에 적어줘야한다. (아님 extends랑 섞어서 쓰던지)
이러한 esling-plugin- 패키지들이나 룰들을 모아서 설정으로 만든 것이 eslint-config- 패키지다. 예를들면, esling-config-airbnb는 eslint, eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, eslint-plugin-jsx-a11y의 룰들을 조합한 설정 패키지 이고 아래와 같이 정의해서 사용한다.
3. rules
규칙 (rules)
ESLint에는 프로젝트에서 사용하는 규칙을 수정할 수 있습니다. 규칙을 변경하는 경우, 다음과 같은 방법으로 설정해야 합니다.
-"off" 또는 0: 규칙을 사용하지 않음
-"warn" 또는 1: 규칙을 경고로 사용
-"error" 또는 2: 규칙을 오류로 사용
규칙에 추가 옵션이 있는 경우에는 배열 리터럴 구문을 사용하여 지정할 수 있습니다.
{
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"]
"comma-style": ["error", "last"],
}
}플러그인에서 규칙을 지정할 때는 eslint-plugin-를 반드시 생략해야 합니다. ESLint는 내부적으로 접두사없이 이름을 사용하여 규칙을 찾습니다.
기타
인라인으로 규칙 비활성화
// 전체 파일 규칙 경고 비활성화, 파일 맨위에 아래 블록 주석 추가
/* eslint-disable */
alert('foo');
// 경고 비활성화 블록 주석
/* eslint-disable */
alert('foo');
/* eslint-enable */
// 특정 규칙 경고 비활성화
/* eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');
/* eslint-enable no-alert, no-console */파일 그룹에 대해서만 규칙 비활성화
{
"rules": {...},
"overrides": [
{
"files": ["*-test.js","*.spec.js"],
"rules": {
"no-unused-expressions": "off"
}
}
]
}4. 그 외
js 와 json으로 설정 차이
js 로 설정시
eslintrc
module.exports = {
env: {
browser: true,
es6: true,
node: true,
},
extends: [
'airbnb',
'prettier/react',
'eslint:recommended',
'plugin:prettier/recommended',
],
rules: {
'react/jsx-filename-extension': [
'error',
{
extensions: ['.js', '.jsx'],
},
],
'no-console': 1,
},
};
prettierrc
module.exports = {
// 문자열은 홀따옴표(')로 formatting
singleQuote: true,
//코드 마지막에 세미콜른이 있게 formatting
semi: true,
//탭의 사용을 금하고 스페이스바 사용으로 대체하게 formatting
useTabs: false,
// 들여쓰기 너비는 2칸
tabWidth: 2,
// 객체나 배열을 작성 할 때, 원소 혹은 key-valueㅇ의 맨 뒤에 있는 것에도 쉼표를 붙임
trailingComma: "all",
// 코드 한줄이 maximum 80칸
printWidth: 80,
// 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략하게 formatting
arrowParens: "avoid",
};json으로 설정시
{
"extends": ["airbnb", "plugin:prettier/recommended"],
"plugins": ["prettier"],
"env": {
"browser": true,
"jest": true
},
"ignorePatterns": ["node_modules/"],
"settings": {
"import/resolver": {
"node": {
"paths": ["src"]
}
}
},
"rules": {
"react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }]
}
}
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80,
"arrowParens": "avoid"
}
부족했던 plugin extend 설명
plugins로 호출하고서 사용할때는
plugin은 룰을 정의한 것으로, 예를 들면 eslint-plugin-react는 리액트와 관련된 룰을 정의한 패키지이다.
// .eslintrc.json
{
"plugins": ["react"]
}그러니까 이렇게 넣어도 아무런 동작도 안한다. 그냥 이제 eslint-plugin-react에 존재하는 룰을 사용할 수 있게 된 것이다. 만약 룰을 사용하고 싶다면 아래와 같이 정의해야 한다.
{
"plugins": ["react"],
"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error"
}
}하지만 이런식으로 매번 모든 룰에 대해 분석하고 파악해서 일일히 작성하기엔 너무 귀찮은 일이다. 때문에 대부분의 플러그인은 recommended나 strict, all 등의 자체 설정을 제공하는 것이다.
eslint-plugin-react의 경우 recommended와 all 두가지의 config를 제공하는데 다음과 같이 사용할 수 있다.
{
"extends": ["plugin:react/recommended"]
}plugins가 있어야 eslint-plugin-react의 룰들을 쓸 수 있다면서 왜 extends만 썼냐고 할 수 있는데, 이건 코드를 까보면 알 수 있다.
이 설정이 이미 plugin 선언을 포함하고 있기 때문에 따로 eslint에 적지 않아도 되는 것이다. 대부분의 recommended config가 이러한 형태를 취하고 있다.
그 외 패키지 설명
패키지 설명
- eslint : 코드의 문법을 검사하는 린팅과 코드의 스타일을 잡아주는 포맷팅 기능
- prettier : 코드의 스타일을 잡아주는 포맷팅 기능
- @typescript-eslint/eslint-plugin : Typescript 관련 린팅규칙을 설정하는 플러그인
- @typescript-eslint/parser : Typescript 를 파싱하기 위해 사용
- eslint-config-airbnb : airbnb 코딩규칙을 사용(리액트 코딩규칙 포함)
- eslint-config-prettier : prettier와 충돌을 일으키는 ESLint 규칙들을 비활성화 시키는 config
- eslint-plugin-prettier : Prettier에서 인식하는 코드상의 포맷 오류를 ESLint 오류로 출력
- eslint-plugin-react : React에 관한 린트설정을 지원
- eslint-plugin-react-hooks : React Hooks의 규칙을 강제하도록 하는 플러그인
- eslint-plugin-jsx-a11y : JSX 내의 접근성 문제에 대해 즉각적인 AST 린팅 피드백을 제공
- eslint-plugin-import : ES2015+의 import/export 구문을 지원하도록 함
