[ ESlint & Prettier ] 문법오류, 코드정리 도와주는 도구들

 

자바스크립트로 개발을 할때, 문법오류나, 코드 정리를 해주는 도구인 ESlint와 Prettier에 대해 정리해보았다.

1 . ESlint

ES LInt는 ES + Lint의 합성어이다.

ES는 Ecma Script로서, Ecma라는 기구에서 만든 Script, 즉, 표준 Javascript를 의미하고,

Lint는 에러가 있는 코드에 표시를 달아 놓는 것을 의미한다.

 

에러와 코드를 일관되게 잡아주기 때문에 여러명이 협업시 유용하다.

코딩 컨벤션 및 안티패턴들을 자동 검출하므로 사용하는것이 좋다고 한다.

 

 ESLint 설치

$ npm init -y
$ npm i -D eslint

//lint 초기화 설정
$ node_modules\.bin\eslint --init

 

ESLint 설정

설정을 전부 마치면 루트 경로에 .eslintrc.js 파일이 생성되며, 여기에서 ESLint를 설정할 수 있다.

{
    "extends": "eslint:recommended",
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

1) "extends": "eslint:recommended"

이 코드는 ESLint Getting Started 에 설명에 따르면, rules page 에서 v 표시된 항목을 자동으로 검사하는 옵션입니다.

 

2) "semi": ["error", "always"]

semi, quotes 또한 rules page 에서 기능을 확인할 수 있으며, 배열 값 조정을 통해 에러 정도를 설정할 수 있습니다.

- "off" or 0 : 검사하지 않음

- "warn" or 1 : 노란줄로 경고 표시

- "error" or 2 : 붉은줄로 에러 표시

 

 

 

2 . Prettier

Prettier는 코드를 보기좋게 정해진 코딩 컨벤션 대로 정렬해 주는 도구이다.

기존의 코드에 적용되어있던 스타일들을 전부 무시하고, 정해진 규칙에 따라 자동으로 코드를 변환한다.

 

 

Prettier 설치

// 1. npm 으로 설치하는 법 - 팀간의 프로젝트시 사용
$ npm i prettier -D -E

// 2. vscode extension 으로 설치하는 법 - 혼자 토이프로젝트 할때 사용
// Visual Studio Code Extention 에서 Prettier 를 검색하고 설치

vscode extension 으로 prettier설치하는 법

 

Prettier 설정

루트 경로에 ..prettierrc.json 파일을 생성하여 설정한다.

// 예시

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

 

짧게 정리하자면 다음과 같다.

 

ESLint는 문법적이거나 논리적으로 규칙을 따르지 않을때,

특정 문법 요소를 쓰도록 만들도록 코드에서 밑줄을 그어주는 등 코드 퀄리티와 관련된 것을 고치기 위해 사용된다.

(예를 들면 선언을 했는데 쓰지 않는 변수)

 

Prettier는 논리적인 코드는 고치지 않는다.

코드 퀄리티보단 코딩 스타일을 일괄적으로 통일하는 도구에 가깝다.

(ex. 필요없는 공백 제거, 작따옴표는 홀따옴표(')나 쌍따옴표(")중 무엇을 사용 할 것인지)

 

 

3 . ESlint & Prettier의 충돌 해결

비슷한 일을 하기 때문에 두 개를 동시에 쓸 경우 충돌이 일어날 수도 있다.

 

1 ) 그럴 경우에는 아래와 같은 명령어를 실행해준 뒤 ,

$ npm i --save-dev eslint-config-prettier eslint-plugin-prettier

• eslint-config-prettier
  ESLint의 formatting 관련 설정 중 Prettier와 충돌하는 부분을 비활성화 한다.

• eslint-plugin-prettier
  Prettier를 ESLint 플러그인으로 추가한다. 즉, Prettier에서 인식하는 코드상의 포맷 오류를 ESLint 오류로 출력해준다.

 

2 ) 루트 경로의 .eslintrc.js .eslint 파일에 다음과 같이 추가를 해준다.

 

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

이렇게 설정해놓으면 javascript는 Eslint만 담당하고, 코드 포맷팅은 Prettier가 담당하게 된다.

 

 

 

---

✔️ 참고

yohanpro.com/posts/code/eslint

velog.io/@recordboy/ESLint-Prettier-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

canoe726.tistory.com/16