ESLint
ESLint는 자바스크립트 코드에서 발견되는 문제시되는 패턴들을 식별하기 위한 정적 코드 분석 도구로 니콜라스 C. 자카스가 2013년에 개발하였다.
ESlint를 사용하기 위해서는 Node.js 가 꼭 설치되어 있어야 하며, VSCode 에디터에서 사용하려면 eslint extention 과 eslint library 모두 설치 및 세팅이 필요하다.
ESlint는 Codeing Convetion과 같이 가독성 있는 코드를 작성하는 규칙에 대해 명시하고 선행된 rules에 벗어난 코딩스타일이 존재하면 'error' 또는 'warning' 표시하거나 유효성 체크를 'off' 할 수도 있다. 따라서, ESLint는 버그를 더 빠르게 찾고 고칠 수 있도록 도와준다.
사용방법
- install ESLint extention and ESLint library
ESLint 는 VSCode(텍스트 에디터)에 의존하여 구동되기 때문에, 에디터 확장 프로그램으로 설치하고, 설치된 확장 프로그램은 workspace 내에 설치된 ESLint library 를 통해 코드의 규칙을 판단하고 에러를 찾아낸다.
- make .eslintrc file
.eslintrc 파일을 통해서는 확장성, 플러그인 을 개별적으로 명시할 수 있기 때문에 커스텀 한 설정으로 협업 시 다른 사람이 작성한 코드의 가독성을 높여준다.
기본설정
module.exports = {
root: true,
env: {
browser: true,
es2021: true,
},
extends: ['eslint:recommended', 'plugin:react/recommended'],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: [],
rules: {
quotes: ['error', 'single'],
// semi: ['error', 'never'],
// 'space-in-brackets': ['error', 'always'],
// endOfLine: 0, //개행 설정. windows에서 prettier를 사용할 시 crlf 오류가 발생하기 떄문에 설정
},
};-
root
.eslintrc 파일을 찾을 때 검색범위를 설정하는 옵션으로, 현재 리텍토리에서만 확인할지 그 상위 폴더까지 올라갈지 범위를 설정한다. default : true
-
env
자바스크립트가 node, browser 등 여러 환경에서 실행될 수 있기에 환경에 따라 사용 가능한 고유 객체(ex : window) 를 미리 알려줌으로써 오류가 나지 않도록 설정하는 옵션
-
extends
이미 제공된 lint를 그대로 설정할 수 있는 옵션으로 basic 규칙을 수정하고 싶다면, rules 옵션에서 덮어쓰는 설정이 가능하다. ex : 'extends': ['airbnb ']
-
parserOptions
ESLint가 순수자바스크립트 코드만 이해할 수 있기 때문에 코드를 최신 문법으로 작성한 경우 파서를 사용하도록 설정해주는 옵션이다.
-
plugins
ESLin- t 기본규칙 외에 추가적인 규칙을 사용할 수 있도록 만들어주는 옵션으로, 해당 규칙에 어긋났을 때 error, warn, off 에 대한 설정은 extends 혹은 rules 옵션에서 명시한다._
-
rules
사용자 규칙을 정의하는 옵션으로 extends 옵션에서 자동으로 설정된 rules을 오버라이드 할 때 유용하다. ex : quotes: ['error', 'single']
Prettier
참조
