Prettier & ESLint 개념, 설치, 사용 방법

순덕·2024년 1월 3일

🔭 Overview

Prettier는 Format을 알아서 해준다

코드의 시각적인 스타일을 설정하는 것을 Format이라고 한다.

let a = true;
if (a) {
  console.log('Hola!');
}

let a=true;
if(a)
{
	  console.log("Hola!")
}

위 두 코드는 내용은 같지만 스타일이 서로 다르다. 사람마다 선호하는 스타일이 다를 수 있다. 그러나 팀으로 일할 때는 하나의 통일된 스타일을 정해야 한다. 여기서 논쟁이 발생한다. 이게 더 좋다 저게 더 좋다…… 이런 format, code style에 관한 논쟁에 시간을 낭비하고 싶지 않다면 Prettier를 사용하면 된다.

Prettier는 모든 코드가 일관된 스타일을 유지할 수 있도록 알아서 format해주는 도구이다.

Prettier는 JavaScript뿐 아니라 JSON, HTML, CSS, TypeScript 등의 formatting도 지원한다.

ESLint는 잠재적인 버그를 잡아주고 코드의 질 향상을 도와준다

let a = 1;
let b = 2;

console.log(a, c);

위 코드에는 문제가 있다.

b라는 변수를 정의했지만 사용하지 않았다. 당장은 문제가 안 되지만 나중에 버그의 원인이 될 수도 있다.
c라는 정의되지 않은 변수를 사용하려고 한다. 런타임 에러를 일으킨다.

ESLint는 JavaScript 코드에서 이런 버그, 잠재적 버그를 사전에 파악해서 에러로 띄워주는 도구이다. ESLint 같은 도구들을 Linter라고 하고, ESLint는 요즘 잘 나가는 JavaScript Linter이다.

🛠️ 설치하고 사용해보자

Prettier

VSCode Extensions에서 Prettier를 검색해서 설치한다.

npm으로 prettier를 설치한다.

$ npm init -y
$ npm install prettier -D --save-exact

💡 -D == --save-dev
해당 패키지를 devDependency로 설치하겠다는 뜻이다.

💡 --save-exact
--save-exact로 정확한 버전을 설치해서 협업 시 팀원 별로 사용하는 prettier 버전이 달라지는 것을 예방할 수 있다. 실제로 package.json을 확인해 보면 --save-exact로 설치하지 않은 패키지의 버전은 ^8.56.0과 같이 앞에 ^가 붙는데 이는 “8.56.0과 호환되는 버전을 사용하라”는 뜻이다. --save-exact로 설치하면 ^가 붙지 않고 정확히 그 버전을 사용하게 한다.

Ctrl + ,로 설정을 열어 Default Formatter를 Prettier로 설정한다.

.prettierrc.json 파일을 추가하고 아래 내용을 붙여넣는다.

.prettierrc.json 은 prettier의 formatting configuration file이고, VSCode에게 Prettier를 사용하고 있음을 알려준다.

아래 내용은 하나의 예시 설정이다.

(반드시 .prettierrc.json을 써야 하는 건 아니다. 자세히)

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

.prettierignore 파일을 추가한다.

이 파일에 명시된 파일이나 디렉터리는 prettier의 formatting 대상에서 제외된다.

Prettier를 사용해보자.

Shift + Alt + F 또는 [우클릭] - [Format Document]
- Prettier가 해당 파일의 코드를 Format해준다.
npx prettier --write .
- 해당 프로젝트의 .prettierignore을 제외한 모든 파일을 Format해준다.
- npx로 로컬에 설치된 prettier 패키지를 사용하고 있다. npx란?
npx prettier --check .
- 얘는 Format을 직접 해주는 건 아니고 Prettier의 Formatting Configuration에 어긋난 파일들을 찾아준다.
```
$ npx prettier --check .
Checking formatting...
[warn] index.js
[warn] Code style issues found in the above file. Run Prettier to fix.
```

💡 Format on Save
설정에서 Format on Save를 true로 설정하면 파일을 저장할 때마다 자동으로 Format할 수 있다.

ESLint

VSCode Extensions에서 ESLint를 검색해서 설치한다.

npm으로 eslint를 설치한다.

$ npm init @eslint/config

터미널에 eslint의 configuration file 설정을 위한 질문들이 나오는데, 프로젝트 상황에 맞게 적당히 답변하고 (설정 파일 확장자 질문에서 JSON을 선택했다면) .eslintrc.json 파일이 만들어진다.

// .eslintrc.json

{
  "env": {
    "commonjs": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": "latest"
  },
  "rules": {}
}

이 파일에서 가장 많이 건드리게 될 부분은 extends와 rules이다.

extends
- 어떤 Lint 설정을 확장하여 사용할 것인지 명시 (기본값은 eslint:recommended)
- 잘 쓰이는 설정으로는 airbnb에서 만든 eslint-config-airbnb가 알려져 있다.
rules
- 자신의 프로젝트에 적용할 개별 규칙을 정의할 때 사용한다.
- ESLint Rules Reference

.eslintignore 파일을 추가한다.

이 파일에 명시된 파일이나 디렉터리는 ESLint의 Lint 대상에서 제외된다.

ESLint를 사용해보자. 에디터에서 빨간 줄로 ESLint 에러를 띄워주는 것은 물론, 다음과 같은 터미널 명령어를 사용할 수 있다.

npx eslint index.js
- index.js 파일을 검사해서 ESLint 에러를 알려준다.
npx eslint .
- .eslintignore을 제외한 모든 파일을 검사해서 ESLint 에러를 알려준다.

$ npx eslint .      

C:\yourpath\index.js
  2:1  error  'a' is constant                         no-const-assign
  2:1  error  'a' is assigned a value but never used  no-unused-vars

✖ 2 problems (2 errors, 0 warnings)

npx eslint . --fix
- 에러를 알려주는 것은 물론, 자동으로 교정할 수 있는 것은 교정까지 해준다.
package.json에 ESLint 실행하는 npm 스크립트 추가하기
- package.json의 scripts에 아래와 같이 스크립트를 추가하면 npm run lint를 입력하는 것으로 npx eslint .를 대신할 수 있다.

// package.json

"scripts": {
  "lint": "eslint ."
},

☯️ Prettier와 ESLint를 함께 사용하기

서로 충돌하지 않도록 추가 작업을 해주자 (`eslint-config-prettier`)

ESLint와 같은 Linter들은 주로 버그를 잡아주는 규칙들을 제공하지만, Formatting에 관한 규칙을 제공하기도 한다. Prettier랑 ESLint를 함께 사용한다면 Prettier의 스타일링 규칙과 ESLint의 스타일링 규칙이 겹쳐서 문제가 될 수 있다. Prettier로 format했더니 ESLint에서 그렇게 하면 안 된다고 오류를 띄우는 것이다.

이 문제를 해결하기 위해 Prettier 공식 문서에서 권장하는 방법은 eslint configuration file을 수정하여 Prettier와 충돌을 일으키는 ESLint의 설정을 끄는 것이다.

그걸 해주는 설정이 eslint-config-prettier이다.

eslint-config-prettier를 설치한다.

npm install -D eslint-config-prettier

ESLint configuration file에 eslint-config-prettier를 적용하기 위해 다음과 같이 수정한다. prettier라는 항목이 추가되었다. prettier가 반드시 배열 마지막에 있어야 하는데, 그래야 그 앞의 config를 덮어쓸 수 있기 때문이다.

// .eslintrc.json

"extends": ["eslint:recommended", "prettier"],

직접 설정한 ESLint rules가 Prettier와 충돌하는지를 검사할 수도 있는데, 여기서는 rules를 따로 설정하지 않았기 때문에 생략한다. 자세히

ℹ️ eslint-plugin-prettier라는 패키지를 추가로 이용하는 방법도 알려져 있는데, 이것은 Prettier의 규칙을 ESLint 규칙에 포함시켜서 ESLint 에러 형식으로 띄워주는 것이다. Prettier 공식 문서에서는 이 방법을 권장하지 않는다.