eslint에 대해 알아보자
ESLint는 코드 품질을 개선하고 런타임에 버그가 발생하지 않도록 사전에 버그를 수정하는 데 도움이 되는 linter입니다.
또한 향후 디버그하기 어려운 문제를 방지하는 데 도움이 됩니다.
JSLint, JSHint와 같이 다른 JavaScript 정적 분석 도구들도 있지만, ESLint가 커스터마이징이 쉽고 확장성이 뛰어나 많이 사용되고 있는 추세 입니다. ESLint는 스타일 가이드를 조금 더 편리하게 적용하기 위해 사용되기도 하는데, 외부에 공개되어 많은 개발자가 사용 중인 Airbnb Style Guide, Google Style Guide가 그 대표적인 예입니다.
사용법
1. 제일먼저 터미널에 아래의 명령어를 입력해줍니다.
npm init @eslint/config
만약 수동으로 전부 세팅하시고 싶다면 `npm i eslint`를 하셔서 직접 전부 설정하셔도 됩니다.
2. 여러가지 질문을 하는데 여러분 상황에 맞게 설정하시면 됩니다.
- How would you like to use ESLint?
- To check syntax only
- To check syntax and find problems
- To check syntax, find problems, and enforce code style
- What type of modules does your project use?
- JavaScript modules (import/export)
- CommonJs (require/exports)
- None of these
- Which framework does your project use?
- React
- Vue.js
- None of these
- Does your project use TypeScript?
- No
- Yes
- Where does your code run?
- Browser
- Node
- What format do you want your config file to be in?
- JavaScript
- YAML
- JSON
- Would you like to install them now?
- no
- yes
- Which package manager do you want to use?
- npm
- yarn
- pnpm
ESLint를 사용하기 앞서 제일먼저 Configuration 파일을 설정해줘야합니다.
보통 처음 세팅하시면 `.eslintrc.js` 파일이 준비되어져 있습니다. (선택 사항에 따라서 .yaml or .json 일수도)
env 옵션
자바스크립트는 다양한 환경에서 실행될 수 있는데 각 환경마다 전역 변수를 통해 접근이 가능한 고유한 객체들이 있습니다.
대표적인 예로, 브라우저 환경에서는 전역에서 접근이 가능하지만 NodeJS환경에서는 불가능한 windows 객체가 있습니다.
ESLint는 기본적으로 미리 선언하지 않고 접근하는 변수에 대해서는 오류를 내기 때문에 이렇게 각 실행 환경에서 기본적으로 제공되는 전역 객체에 대해서 설정을 통해 알려줘야 합니다. 이러한 역할을 실행 파일의 env 옵션이 담당합니다.
현제 위 예제는 아래처럼 설정되어 있습니다.
"env": {
"browser": true,
"es2021": true
},`browser` : 브라우저 전역 변수
`es2021` : 모든 ECMAScript 2021 전역을 추가하고 자동으로 ecmaVersion 파서 옵션을 12로 설정합니다.
또한 많이 사용되는 `node`도 존재 합니다.
`node` : Node.js 전역 변수 및 Node.js 범위 지정
그외에 더 많은 설정을 보고 싶으시면 링크를 눌러주시기 바랍니다.
만약 brower, node 설정을 하지 않을 경우 `console`, `require`같은 사전 정의된 전역변수환경에 있는 static 메서드를 인식할 수 없어서 에러가 발생합니다.
이외에도 선언되지 않은 전역변수를 사용하는 경우 ESLint 경고가 발생하지 않도록 globalse를 이용하여 사용자 전역 변수를 추가할 수 있습니다.
{
"globals": {
"anything": true
}
}
plugin 옵션
ESLint 플러그인은 일련의 ESLint 규칙, 구성, 프로세서 및 환경을 포함할 수 있는 npm 모듈입니다.
ESLint에는 기본으로 제공되는 규칙외에도 plugin을 사용해서 추가적인 규칙을 적용할 수 있습니다.
예를 들어서 현재 위에 있는 예제에서는 아래처럼 적용되어있습니다.
"plugins": ["react"],
이는 이미 ESlint가 처음에 설정할 때 이미 `eslint-plugin-react`를 다운 받았기 때문입니다.
package.json 보시면 금방 알 수 있습니다.
이렇게 `plugins` 옵션을 사용할 때는 꼭 해당 플러그를 다운 받고 사용하셔야 합니다.
다운을 받고 `plugins` 옵션에 추가하실 때 접두사인 `eslint-plugin`은 생략하셔도 하지 않으셔도 됩니다.
여기서 주의하셔야할점은 `plugin` 옵션에 추가하였다고 동작하는 것은 아닙니다.
쉽게말하면 전투기에 무기를 구매한 후 장착은 했지만 사용하는 로직을 설정하지 않은 것과 마찬가지입니다. 즉 아직까지는 장식품에 불과합니다. 이를 설정해주기 위해서는 `extends` 옵션이나 `rules`옵션을 통해서 설정을 마저 해주셔야합니다.
extends 옵션
Google, Facebook, Airbnb 등 수 많은 세계적인 기업들이 ESLint로 자바스크립트 코드를 린트합니다.
설정 파일의 `extends` 옵션을 통해서 이러한 기업들이 공개해놓은 설정을 그대로 가져봐 기반 설정으로 활용할 수 있습니다.
바로 위에서 우리는 `plugins` 옵션에 `react`를 설정해주었습니다.
이제 이를 사용하기 위해 `extends` 옵션에서 아래처럼 설정해주시면 됩니다.
"extends" : [ "plugin:react/recommended" ]
이렇게 `plugins`옵션에 원하는 플러그인을 넣고 `extends` 에서 설정해주면 규칙이 드디어 적용됩니다.
처음 보았던 예제에서는 `eslint:recommended`도 있는데 이는 `eslint:all`과 함께 ESLint에서 기본으로 제공되는 `extends` 입니다.
rules 옵션
설정 파일에서 `rules` 옵션은 규칙 하나 하나를 세세하게 제어하기 위해서 사용됩니다.
이를 활용하자면 여러분들이 마음에 드는 플러그인을 설정해줬는데 몇몇 부분을 내가 커스텀 하고 싶을 때 유용하게 사용할 수 있습니다.
`rules` 옵션을 사용하면 `extends` 옵션을 통해서 설정된 규칙을 덮어쓸 수 있습니다. 즉 'extends' 옵션보다 `rules` 옵션이 우선시된다는 소리입니다.
규칙을 설정할 때는 아래와 같이 해야 합니다.
- `"off"` 또는 `0` : 해당규칙을 사용하지 않음
- `"warn"` 또는 `1` : 해당규칙을 위반하였을 경우 경고 표시
- `"error"` 또는 `2` : 해당규칙을 위반하였을 경우 오류 표시
예제
{
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"]
"comma-style": ["warn", "last"],
}
}
parser / ParserOptions 옵션
ESLint 사용을 위해 지원하려는 Javascript 언어 옵션을 지정할 수 있습니다.
개발자가 작성하는 자바스크립트 코드는 실제로 브라우저와 같은 실행 환경에서 실제로 돌아가는 코드와 다른 경우가 많습니다.
대표적인 예로 타입스크립트나 JSX와 같은 자바스크립트 확장 문법으로 개발하거나 Babel과 같은 트랜스파일러를 통해 최신 문법으로 개발하는 경우가 있습니다.
ESLint는 기본적으로 순수한 자바스크립트 코드만 이해할 수 있기 때문에 자바스크립트의 확장 문법이나 최신 문법으로 작성한 코드를 린트하기 위해서는 그에 상응하는 파서를 사용하도록 설정해줘야합니다.
parser
ESLint 파서는 코드를 추상 구문 트리로 변환하여 ESLint가 평가할 수 있게 합니다.
기본적으로 ESLint는 내장 Espree 파서를 사용하는데, 이는 표준 JavaScript 런타임 및 버전과 호환됩니다.
커스텀 파서를 사용하면 ESLint가 표준이 아닌 JavaScript 구문을 해석할 수 있습니다.
일반적으로 커스텀 파서는 공유 가능한 구성(configuration)이나 플러그인의 일부로 포함되어 있으므로 직접 사용할 필요가 없습니다.
예를 들어, `@typescript-eslint/parser`는 `typescript-eslint` 프로젝트에 포함된 커스텀 파서로서, ESLint가 `TypeScript` 코드를 해석할 수 있게 해줍니다.
{
"parser" : "@typescript-eslint/parser"
}
ParserOptions
ESLint를 사용하여 지원할 JavaScript 언어 옵션을 지정할 수 있습니다. 기본적으로 ESLint는 ECMASciprt 5 구문을 예상합니다.
그러나 `parserOptions` 을 사용하여 다른 ECMAScript 버전과 JSX를 지원할 수 있습니다.
JSX 구문을 지원하는 것은 React를 지원하는 것과 동일하지 않습니다. React는 JSX 구문에 특정 의미론을 적용하지만 ESLint는 이를 인식하지 못합니다. 따라서 React를 사용하는 경우 `eslint-plugin-react`를 사용하는 것이 좋습니다.
마찬가지로, ES6 구문을 지원하는 것은 새로운 ES6 전역 변수 (ex : Set과 같은 새로운 타입)을 지원하는 것과 동일하지 않습니다. ES6 구문을 지원하려면 `{ "parserOptions": { "ecmaVersion": 6 } }`를 사용하고, 새로운 ES6 전역 변수를 지원하려면 `{ "env": { "es6": true } }`를 사용합니다. `{ "env": { "es6": true } }`를 설정하면 ES6 구문이 자동으로 활성화되지만 `{ "parserOptions": { "ecmaVersion": 6 } }`는 ES6 전역 변수를 자동으로 활성화하지 않습니다.
따라서 ES6 구문만 지원하려면 { "parserOptions": { "ecmaVersion": 6 } }를 사용하고, ES6 구문과 새로운 ES6 전역 변수을 모두 지원하려면 { "env": { "es6": true } }를 사용하면 됩니다.
- ecmaVersion: 사용할 ECMAScript 버전을 설정
- sourceType: parser의 export 형태를 설정
- ecmaFeatures: ECMAScript의 언어 확장 기능을 설정
- globalReturn: 전역 스코프의 사용 여부 (node, commonjs 환경에서 최상위 스코프는 module)
- impliedStric: strict mode 사용 여부
- jsx: ECMScript 규격의 JSX 사용 여부
'정보' 카테고리의 다른 글
| 코딩테스트할 때 유용한 코드들 (1) | 2023.10.01 |
|---|---|
| Husky, lint-staged 설치 및 사용법 (0) | 2023.09.19 |
| CSV 파일이란? (1) | 2023.01.21 |
| 더 좋은 코드를 위한 노력 - 코드 가독성 개선하기 (2) (0) | 2022.12.22 |
| 더 좋은 코드를 위한 노력 - 코드 가독성 개선하기 (1) (0) | 2022.12.19 |
