[Back-end] ESLint, Prettier 설정하기

본격적으로 개발을 진행하기에 앞서 그 동안 막연히 사용하였던 ESLint와 Prettier 함께 이용하는 개발환경 세팅을 백엔드와 프론트엔드로 나누어 다뤄 보고자 한다.

ESLint

개요

ESLint는 JavaScript를 위한 정적 검사 Tool이다. 코드를 실행하기 전에 버그를 찾거나, 괄호나 스페이스의 사용방법 등의 스타일을 통일하거나 하는 것에 도움이 된다.

비슷한 역할을 하는 툴로는 JSLint, JSHint 등이 있지만, 현재는 ESLint가 가장 많이 사용되고 있다.

특징

• 모든 검사 룰을 자유롭게 세팅할 수 있다.
• 자신의 프로젝트에 맞게 커스터마이징 룰을 간단히 만들 수 있다.
• ECMAScript 2015(ES6), 2016, 2017, 2018, 2019를 지원하고 있다.
• JSX 문법을 지원하고 있다.

Prettier

개요

Prettier는 Code Formatter이다. 즉, 작성한 코드를 정리해 주는 Tool이다. ESLint가 설정한 룰에 따라 룰에 맞지 않는 코드를 알려주는 Tool이라면, Prettier는 설정한 규칙이 맞게 코드를 맞춰주는(바꿔주는) Tool이라고 할 수 있다.

즉, ESLint에는 강제성이 없지만, Prettier에는 강제성이 있다는 차이점이 있다.

특징

• 다양한 프로그래밍 언어를 지원한다.
  • JavaScript
  • JSX
  • Flow
  • TypeScript
  • CSS, Less, SCSS
  • JSON
  • GraphQL
  • Markdown 등
• ESLint와의 연계해서 사용하기 좋다.
• 다양한 에디터/IDE를 지원한다.

설치 방법

기본적으로 Node.js가 설치되어 있어야 하며, Node.js 패키지 관리 툴인 npm을 이용하여 설치한다.

1. ESLint 설치

$ npm install eslint --save-dev

--save-dev 대신 -g를 붙이면 해당 프로젝트의 루트가 아닌 글로벌이라고 하는 컴퓨터 자체의 루트로 설치가 된다. 이 부분에 있어서는 사용자의 취향에 맞게 글로벌 환경 또는 프로젝트 루트에 설치할 지 판단하면 된다.

2. Prettier 설치

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

--save-exact라는 옵션이 눈에 띈다. 이 옵션을 붙이는 이유는 버전이 달라지면서 생기는 스타일의 변화에 대응할 수 있기 때문인다.

3. 추가 모듈 설치

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

eslint-config-prettier는 Prettier와 ESLint를 함께 사용하기 위해 충돌하는 설정 맞춰준다.

eslint-plugin-prettier는 IDE에서 사용한 코드 포맷을 prettier로 하기 위한 모듈이다.

4. .eslintrc 생성

{
  // 코드 포맷을 prettier로 설정
  "plugins": [
    "prettier"
  ],
  
  // eslint의 룰을 기본 권장설정으로 설정
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  
  // 코드를 해석하는 parser에 대한 설정
  "parserOptions": {
    // 자바스크립트 버전, 7은 ECMA2016
    "ecmaVersion": 7,
    // 모듈 export를 위해 import, export를 사용 가능여부를 설정, script는 사용불가
    "sourceType": "script",
    // jsx 허용을 설정, back-end 설정이기 때문에 사용 안함
    "ecmaFeatures": {
      "jsx": false
    }
  },
  
  // linter가 파일을 분석할 때, 미리 정의된 전역변수에 무엇이 있는지 명시하는 속성
  "env": {
    // 브라우저의 document와 같은 객체 사용 여부
    "browser": false,
    // node.js에서 console과 같은 전역변수 사용 여부
    "node": true
  },
  // ESLint가 무시할 디렉토리, 파일을 설정
  "ignorePatterns": [
    "node_modules/"
  ],
  
  // ESLint 룰을 설정
  "rules": {
    // prettier에 맞게 룰을 설정
    "prettier/prettier": "error"
  }
}

5. .prettierrc 생성

{
  // 객체, 배열 등에서 항상 마지막에 , 를 붙인다.
  "trailingComma": "es5",
  
  // 들여쓰기 할 때, 기본 폭을 설정한다.
  "tabWidth": 2,
  
  // 모든 구문에 세미콜론을 붙인다.
  "semi": true,
  
  // 따옴표는 홑따옴표를 사용한다.
  "singleQuote": true
}

6. VSCode 확장에서 ESLint와 Prettier 설치
VSCode 마켓 플레이스에서 ESLint와 Prettier를 검색 후 설치하여, IDE 환경을 설정한다.

참고 자료

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