ESLint란?
ES + Lint를 합친것
ES = Ecma ScriptES는 표준 자바스크립트를 뜻한다.
Lint = 에러가 있는 코드에 표시를 해줌을 뜻한다.즉, ESLint는 표준 자바스크립트에서 에러가 있는 코드에 표시를 해준다!
협업할 때 특히 유용한 ESLint이다.
Prettier란?
코드 정리 규칙을 설정해놓을 수 있는 플러그인으로,
정해놓은 규칙에 맞게 자동으로 정렬해서 가독성을 높이고 코드 스타일을 통일할 수 있다.즉, Prettier는 코딩 스타일을 잡아준다!
그렇다면 ESLint와 Prettier을 이용하여 프로젝트 세팅을 해보자
원래 ESLint 를 사용하려면 프로젝트에 직접 설치해야 하지만,
CRA의 경우 기본적으로 ESLint 세팅이 다 되어 있는 장점이 있다. 그래서, Airbnb 스타일같은 extension만 설치해주면 개발 환경에서도 ESLint 룰을 적용받을 수 있다.
그래서 VSCODE의 확장프로그램인 ESLint와 Prettier을 먼저 설치해준다.
ESLint 플러그인 설치하기
Airbnb 스타일을 설치해주기 전에, 사전에 설치되어야 하는 것들이 있으므로npm info "eslint-config-airbnb@latest" peerDependencies
코드를 통해 사전 설치해야할 플러그인들을 확인해준다.
{
eslint: '^7.32.0 || ^8.2.0',
'eslint-plugin-import': '^2.25.3',
'eslint-plugin-jsx-a11y': '^6.5.1',
'eslint-plugin-react': '^7.28.0',
'eslint-plugin-react-hooks': '^4.3.0'
}위와 같이 사전에 설치할 플러그인이 뜨므로 모두 설치해준다.
yarn add -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hookseslint-plugin-import : ES6 의 import/export syntax 체크, 파일 경로나 import 이름을 잘못 입력하는지 여부를 체크해주는 lint 플러그인입니다.
eslint-plugin-jsx-a11y : 리액트 element 의 접근성 이슈를 짚어 lint 해주는 플러그인입니다. 예를 들자면 interactive 하지 않은 엘리먼트에 click 핸들러가 달려 있다. 이런 오류를 뿜습니다.
eslint-plugin-react : 리액트 규칙들을 추가해주는 플러그인입니다.
eslint-plugin-react-hooks : 리액트 hooks 규칙들을 추가해 주는 플러그인
Prettier의 플러그인들도 설치하여준다.
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
eslint-config-prettier : ESLint의 formatting 관련 설정 중 Prettier와 충돌하는 부분을 비활성화해주는 플러그인
Prettier에서 문법 관련된 ESlint 규칙을 사용하지 않게 되기 때문에 ESLint 는 자바스크립트 문법을 담당하고,
코드 스타일 정리는 Prettier가 담당한다.
eslint-plugin-prettier : 원하는 형식의 formatting 을 설정해줍니다.
yarn add -D babel-eslint eslint-plugin-babel
babel-eslint : Babel 이 서포트해주는 코드에 ESLint 를 적용할 수 있도록 해줍니다. 한마디로, ES6 이상의 자바스크립트, flow type 등의 feature 를 지원해줍니다. ESLint 만 깔 경우, ES6 / JSX / 객체 rest, spread 까지의 문법만 지원해줍니다. 그 이상의 문법 지원이 필요할 경우 반드시 이걸 깔아줘야 하는 거죠.
eslint-plugin-babel : 더 많은, 실험중인 feature 까지 지원해주는 플러그인입니다. babel-eslint 를 보완해주는 플러그인입니다.
ESLint설정하기 (.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
}
}"env" : 활성화하고싶은 환경 설정 / 현재 브라우저, node, es6 환경이 활성화되어 있습니다.
"parser" : parser 를 설정해줍니다.
설정하지 않을 경우 Espree가 기본 parser 로 설정됩니다. 보통 Espree, Babel-ESLint, @typescript-eslint/parser 을 사용합니다. (Babel-ESLint 사용하였음)
"extends" : extension 파트. 이 extension 파트에 Prettier 를 꼭 추가해주셔야 Prettier 를 사용할 수 있습니다.
저희는 Airbnb 설정을 사용하기로 했으니 Airbnb 도 추가해줍니다.
"rules" : 필요한 설정, 필요없는 설정을 관리하는 파트입니다. / 1은 사용하겠다는 뜻, 0은 사용하지 않겠다는 뜻
.eslintrc.json 파일을 만들지 않고 package.json 파일에 ESLint 설정을 해 주는 방법도 있다.
// package.json
"eslintConfig": {
"env": {
"browser": true,
"node": true
}위의 코드를 추가해주면 되지만, 보통 분리를 한다!
왜 ? package.json에는 설치된 패키지들만 보는것이 보기 편리함!
React import관련 에러
React must be in scope, 즉 상단에 리액트가 import 되지 않아 생기는 에러로 'React' must be in scope when using JSX react/react-in-jsx-scope가 뜰 때가 있다.
분명 Next에서는 React를 import하지 않아도 되는데, 에러가 뜰 시
.eslintrc.json파일의 rules부분에
"rules": {
"react/react-in-jsx-scope": 0,
},
"globals": {
"React": "writable"
}을 추가해준다.
Prettier 설정하기
.prettierrc 파일에
{
"singleQuote": false,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80
}코드를 추가해준다.
singleQuote = 문자열을 사용 할 때에는 " 를 사용 (홑따옴표가 아닌 겹따옴표 사용)
semi = 코드는 ; (semi-colon)으로 끝나야합니다.
useTabs = tab 사용여부 true와 false / tab대신에 스페이스를 사용할 것임.
tabWidth = 들여쓰기 크기는 2칸입니다. (space 2칸)
trailingComma = 객체나 배열을 작성 할 때, 원소 혹은 key-value 의 맨 뒤에있는 것에도 쉼표 붙이기
printWidth = 한 줄이 80칸이 넘지 않도록 한다.
각 코드의 해석은 다음과 같다.
위와 같이 프로젝티 초기 세팅을 할 때 ESLint와 Prettier을 설정해준 이후에, 개발을 시작하는 것이 협업할 때 정말 좋은 방법이다.