[JS] ESLint, Prettier 설정 방법
ESLint
ESLint는 작성한 자바스크립트 코드를 분석한 후 문제점을 빠르게 찾아 고쳐주는 개발 툴킷입니다.
ESLint 설치 및 실행
- ESLint 설정 파일을
npm init @eslint/config명령어를 통해 생성합니다.npm init @eslint/config √ How would you like to use ESLint? · To check syntax, find problems, and enforce code style (문법 체크, 에러 탐색, 코드 스타일 강제 적용 √ What type of modules does your project use? · JavaScript modules (import/export) (ES6 import/export 사용) √ Which framework does your project use? · None of these (프레임워크를 사용하지 않음) √ Does your project use TypeScript? · No √ Where does your code run? · browser √ What format do you want your config file to be in? · JavaScript √ How would you like to define a style for your project? · Use a popular style guide (Airbnb, Standard 및 Google 스타일 가이드와 같은 인기 있는 스타일 세트 중에서 선택할 수 있음) √ Which style guide do you want to follow? · Airbnb: https://github.com/airbnb/javascript √ Which package manager do you want to use? · npm - 자바스크립트 파일에 대해 ESLint를 실행합니다.
npx eslint yourfile.js
많은 오류가 발견되네요..!
ESLint rules
생성된 ESLint 설정 파일( .eslintrc.js) 을 열어보면 rules가 설정되어 있는 것을 확인할 수 있습니다.
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: 'airbnb-base',
overrides: [
{
env: {
node: true,
},
files: [
'.eslintrc.{js,cjs}',
],
parserOptions: {
sourceType: 'script',
},
},
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
rules: {},
};
설정 파일 생성 시 airbnb 스타일을 선택했기 때문에 extends 속성값으로 'airbnb-base'가 적혀있는 것을 볼 수 있는데요!
extends를 통해 기본 규칙을 제공할 수 있고, rules속성을 통해 추가 규칙을 지정해 줄 수도 있습니다.
ESLint를 실행해보니 linebreaks(개행) 관련 오류가 거의 30%를 차지했습니다.
원인은 설정 파일에 linebreak-style 옵션을 windows(CRLF)로 명시하지 않는 경우 자동으로 unix(LF)가 사용되기 때문입니다.
해결을 위해 linebreak-style 속성 옵션으로 windows로 넣어주면 사진과 같이 더이상 linebreak-style 관련 오류가 나타나지 않는 것을 볼 수 있습니다.
"rules": {
"linebreak-style": ["error", "windows"]
}
MacOS랑 WindowsOS랑 번갈아 쓰는 경우에는 아래와 같이 0을 값으로 넣어 규칙을 끄는 게 더 좋습니다.
rules:
{
'linebreak-style': 0,
}
Rule Severities
rules 옵션 값으로 0을 넣었었죠.
넣을 수 있는 옵션 값으로는 0, 1, 2가 있습니다.
- 0: 규칙을 끕니다. (=off)
- 1: 경고로 나타냅니다. (=warn)
- 2: 에러로 나타냅니다. (=error)
기본적으로 rules는 error로 설정되어 있습니다.
error가 트리거되면 exit code는 1이됩니다.
warn은 트리거되어도 exit code에 영향을 주지 않습니다.
Prettier
Prettier는 저장 시 코드의 형식을 지정할 수 있는 코드 포맷터입니다.
Prettier 설치 및 실행
npm install --save-dev --save-exact prettier 명령어를 입력해 Prettier를 설치합니다.
설치가 완료되었으면 node --eval "fs.writeFileSync('.prettierrc','{}\n')" 명령어를 입력해 설정 파일을 생성합니다.
Prettier 설정 파일을 생성하므로써 텍스트 에디터에서 Prettier를 사용하고 있다는 걸 알 수 있습니다.
설정 파일 생성까지 완료했으면 npx prettier . --write 명령어로 포맷을 해봅시다!
console.log
("test");
let
a =
b;
포맷터를 실행하면 위의 못생긴 코드가 아래처럼 예쁘게 수정된 것을 확인할 수 있습니다.
console.log("test");
let a = b;
prettier --write . 명령어는 현재 위치에 있는 모든 것을 포맷하기 때문에 큰 프로젝트일 수록 시간이 오래 걸릴 수 있습니다.
특정 폴더만 포맷하기
prettier --write app/과 같이 특정 폴더를 지정해서 포맷을 할 수 있습니다.
특정 파일만 포맷하기
prettier --write app/components/Button.js과 같이 특정 파일을 지정해서 포맷을 할 수 있습니다.
포맷이 되었는지 확인하는 방법
npx prettier . --check 명령어를 사용하면 --write 옵션처럼 파일을 덮어쓰지 않고 포맷이 되어 있는지만 확인할 수 있습니다.
특정 파일 포맷 무시
prettierignore
.prettierignore 파일을 만들어 Prettier가 무시할(포맷하지 않을) 파일을 지정할 수도 있습니다.
.gitignore에 지정된 규칙이 있다면 해당 규칙을 따르고, .eslintignore 기반으로도 규칙을 지정할 수 있습니다.
기본적으로 .git, .sl, .svn, .hg와 같은 버전 제어 시스템 관련과 node_modules 파일은 무시하도록 되어 있습니다.
**/.git **/.svn **/.hg **/node_modules // --with-node-modules CLI 옵션이 지정되지 않은 경우에만
// prettier-ignore
자바스크립트 내에서 // prettier-ignore다음 코드를 입력하면 해당 구문은 포맷터가 무시합니다.
ESLint와 Prettier 중복 사용
ESLint 설정 파일 생성 시 How would you like to use ESLint? · To check syntax, find problems, and enforce code style 처럼 코드 스타일도 enforce하도록 했다면 Prettier의 코드 포맷 기능과 중복되게 됩니다.
이러한 기능 충돌을 막기 위해 npm install --save-dev eslint-config-prettier 명령어를 통해 충돌되는 포맷 규칙을 끌 수 있습니다.
