[VSCode] ESLint + prettier 사용하기

ESLint 란?

ESLint란 ES(ECMAScript) + Lint를 의미한다. 

 

Mozilla에 따르면, "ECMAScript는 JavaScript의 기본을 구성하는 스크립트 언어다."^[각주:1] Wikipedia가 정의하기론 "ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 자바스크립트를 표준화하기 위해 만들어졌다."^[각주:2] 즉, ECMAScript는 JavaScript의 표준이라는 뜻이다. 

 

린트(lint) 또는 린터(linter)는 "소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시(flag)를 달아놓기 위한 도구들을 가리킨다."^[각주:3] 라고 정의하고 있다. 

 

정리하자면 ESLint는 JavaScript의 표준에서 벗어난 코드를 표시하는 도구를 의미한다.

 

왜 사용해야 하는가?

틀린 문법뿐만 아니라, 코딩 스타일도 지정해서 수정할 수 있어 코드의 가독성을 높이며, 훗날 발생할 수도 있는 오류와 버그를 잡아주어 전체적인 코드의 완성도를 높여준다. 

 

VSCode에서 ESLint 실행하기

공식 문서를 참조했다. 

 

1. Node.js 다운 받기

우선 ESLint를 실행하려면 npm 또는 yarn 명령어를 사용해야 하는데, 그럼 Node.js를 설치해야 한다. 만약 설치되어 있다면 이 단계는 건너뛰어라.

Node.js

각자 운영체제에 맞게 설치하고, npm은 이미 Node.js와 같이 설치되기 때문에 별도의 절차가 필요 없지만, yarn은 Node.js 설치 완료 후 아래의 명령어로 설치해야 한다.^[각주:4] 

 

npm install --global yarn

 

2. ESLint 설치하기

우선 Extenstion으로 가서 ESLint를 설치하자.

 

그리고 Terminal을 켜(단축키 ctrl + `) 프로젝트의 루트 폴더에서 아래의 명령어를 실행하라.

 

# npm
npm install eslint --save-dev

# yarn
yarn add eslint --dev

 

이제 ESLint 설치를 완료했다. 그러나 ESLint를 실행하기 위해선 package.json 파일이 필요하다. 없다면 npm init 또는 yarn init으로 package.json 파일을 생성해야 한다.

 

npm init 명령어를 치면 package 이름 어떻게 할 거냐, version 어떻게 할 거냐 이런 질문들이 나오는데 딱히 정해진 것이 없다면 Enter키를 눌러서 스킵하고, 마지막에 package.json 파일을 이런 식으로 작성할 건데 괜찮은지 물어본다. 그리고 Enter를 치면 바로 파일이 생성된다.

 

이렇게!

파일 생성 후 아래의 명령어로 ESlint를 실행하라.

 

# npm
npx eslint --init

# yarn
yarn run eslint --init

 

그럼 ESLint를 어떻게 사용할 건지 질문들이 나온다.

 

질문들:

1. How would you like to use ESLint? (어떻게 ESLint를 사용할 건가)

- To check syntax only (문법 또는 구조를 체크하기 위해)

- To check syntax and find problems (+ 문제를 찾기 위해)

- To check syntax, find problems, and enforce code style (+ 코드 스타일을 강제하기 위해)

 

2. What type of modules does your project use? (어떤 모듈을 사용하는 프로젝트인가)

- JavaScript modules (import/export)
- CommonJS (require/exports)

- None of these (둘 다 아님)

 

3. Which framework does your project use? (어떤 프레임워크를 사용하는가)

- React
- Vue.js
- None of these (둘 다 아님)

 

4. Does your project use TypeScript? (TypeScript를 사용하는 프로젝트인가)

- No (안 사용함)

- Yes (사용함)

 

5. Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)

(어디서 코드가 돌아가는가 ... 스페이스바를 눌러서 선택, a 키를 눌러 전부 선택, i키를 눌러 선택 취소)

- Browser

- Node 

 

6. How would you like to define a style for your project? (어느 코드 스타일 가이드를 사용하고 싶은가)
- Use a popular style guide (유명한 스타일 가이드 사용하기)

  - Airbnb: https://github.com/airbnb/javascript
  - Standard: https://github.com/standard/standard
  - Google: https://github.com/google/eslint-config-google
  - XO: https://github.com/xojs/eslint-config-xo
- Answer questions about your style (내 스타일에 대해서 답하기)
- Inspect your JavaScript file(s) (내 파일 검사하기)

* 첫 번째 선택지 외에는 사용해본 적이 없어서 밑에 두 선택지의 해석이 맞는지 틀렸는지 잘 모르겠다

 

7. What format do you want your config file to be in? (.eslintrc 파일의 확장자 선택)

- JavaScript
- YAML
- JSON 

 

8. Would you like to install them now with npm? (위에서 선택한 사항들을 이행하기 위해선 별도의 설치가 필요한데 설치할 건가)

- No

- Yes

 

끝!

 

질문 답변을 완료하면 node_modules, package-lock.json, .eslintrc.json 파일이 생성된다^[각주:5]. 그럼 이제 수정이 필요한 *.js 파일을 열어보자.

 

열자마자 빨간 줄들의 향연...

 

수정할 것이 한가득이라고 겁먹지 말자. npx eslint 내파일.js --fix 명령어를 사용하면 ESLint가 자동으로 수정해줄 수 있는 규칙들은 다 수정해준다. 한 파일만 개별적으로 수정할 수 있는 것이 아니라, 여러 파일을 한 번에 수정할 수도 있으니 필요에 따라서 명령어들을 검색해보자.

 

181개에 17개로 변하는 매직...!

이런 식으로 수정해야 할 것을 알려준다.

3. Prettier 적용하기

Prettier는 이름 그대로 코드를 더 "예쁘게" 만들어준다. ESLint로는 문법적인 요소들을 고쳐 코드의 완성도를 높인다면, Prettier로는 tab을 쓸 것인지 space를 쓸 것인지, string에 ""를 사용할 건지 ''을 사용할 건지 등 문법적으로 문제 되지 않지만 눈에 거슬리는 부분들을 수정해준다. 그래서 대부분 둘을 같이 사용한다.

 

ESLint와 마찬가지로 우선 Extension에서 설치해야 한다.

 

 

그다음 아래의 명령어를 ESLint 설치할 때와 같이 루트 폴더에서 실행하라.

 

npm install prettier --save-dev --save-exact

 

Prettier와 ESLint를 같이 사용하려면 아래의 명령어를 사용해야 한다.

 

npm install eslint-plugin-prettier eslint-config-prettier --save-dev

# eslint-config-prettier: Prettier와 충돌할 설정들을 비활성화
# eslint-plugin-prettier: 코드 코맷할 때 Prettier를 사용

 

그리고 아래의 내용을 .eslintrc 파일에 추가한다.

 

{
  "plugins": ["prettier"],
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "error"
  }
}

 

Prettier 규칙들을 설정하고 싶다면 .prettierrc.json 파일을 생성하여 필요한 설정들을 채우면 된다. 

 

---

+덧) VSCode에서 작업하는 것보다 Atom에서 하는 것이 익숙해서 처음엔 Atom에서 ESLint를 사용하려 했다. 그러나 이상하게도 npx eslint index.js 명령어는 먹혔으나 에러난 곳에 빨간색 밑줄이 생기지 않았다. 종료했다 켜보기도 하고, 처음부터 다시 해보기도 하고 그랬는데 해결되지 않아 작업 환경을 VSCode로 옮기고 똑같은 파일을 실행했는데 됐다. 왜 그런지 알다가도 모르겠다... 여하튼 그 후부터 아예 VSCode에 정착했다.

---

참조

1. https://sunmon.github.io/vscode-eslint-prettier-setting/

vscode에 eslint와 prettier 설정하기 | NOT_NULL

2. https://feynubrick.github.io/2019/05/20/eslint-prettier.html

VS Code에서 ESlint와 Prettier 함께 사용하기

3. https://ingg.dev/eslint/

[JS] ESLint 적용하기

4. https://jeonghwan-kim.github.io/series/2019/12/30/frontend-dev-env-lint.html

프론트엔드 개발환경의 이해: 린트

5. https://velog.io/@jiwon/ESlint

ESLint의 개념과 사용법

---

1. ECMAScript [본문으로]
2. ECMAScript [본문으로]
3. 린트 (소프트웨어) [본문으로]
4. Yarn Installation(Official Docs) [본문으로]
5. 이것들 왜 생기는지 알고 싶다면 각주 클릭 [본문으로]