ESLint 적용하기(+ Prettier)

저는 에디터 VSCode로 TIL이나 알고리즘, 온라인 강의를 자주 정리하는데 표준화된 코딩 컨벤션(Coding Convention)을 매번 정의할 때마다 환경이 다르다는 이유로 검색을 해야하는게 너무 불편했습니다.

저 뿐만 아니라 많은 분들이 동일한 상황을 마주했을거라 생각하며, 찾기 쉽게 정리해놓으려고 합니다.

#0. 들어가기 앞서

ESLint와 Prettier에 대해 짚고 넘어갈까요? 간단하게 정리하자면 아래와 같습니다.

ESLint : 문법 유효성 검사

Prettier : 스타일 가이드

자세한 내용은 캡틴판교님의 Vue.js 개발 생산성을 높여주는 도구 3가지를 확인해주세요.

#1. 준비

사용 및 설정에 앞서, 기본적으로 Node.js, NPM 패키지가 설치되어 있어야 하며, VSCode에서 사용할 것이므로 해당 프로그램도 설치해야 한다.

- 각 운영체제에 맞는 LTS 버전 설치

https://nodejs.org/en/download/

Download | Node.js

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

#2. 설치하기

# package.json 생성
# --y는 yes의 축약명령어로 별도의 설정 없이 default 값으로 프로젝트를 생성합니다.
$ npm init -y

# eslint 모듈 설치
# -D는 --save-dev의 축약명령어로 package.json의 devDependencies 항목에 설치됩니다.
$ npm i -D eslint prettier eslint-config-prettier eslint-plugin-prettier 

#3. ESLint 설정을 위한 파일 생성하기

eslint에 대한 설정을 진행할 파일을 생성합니다. 직접 생성하거나, CLI로 생성과 기본값 설정이 가능합니다.

- 직접 생성하기

*package.json *파일이 존재하는 동일 디렉토리에 새 파일을 *.eslintrc.js *로 지정한 뒤 생성합니다.

- CLI를 사용하여 생성 및 설정하기

# 명령어
$ eslint --init

# 선택하기
? How would you like to use ESLint? · problems    
? What type of modules does your project use? · none
? Which framework does your project use? · none
? Does your project use TypeScript? · No / Yes
? Where does your code run? · browser
? What format do you want your config file to be in? · JavaScript

 

* 추가적으로 package.json에 eslintConfig 옵션에 직접 입력할 수 있지만, package.json에 할당하기 힘들 정도로 많은 내용이 들어가는 경우 분리하는 것이 권장됩니다. 따라서 해당 글에서는 이를 다루지 않습니다.

#4. ESLint 설정하기

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true, // 'module' is not defined. 에러가 발생하면 기입
  },
  extends: ['eslint:recommended', 'prettier'],
  plugins: ['prettier'],
  parserOptions: {
    ecmaVersion: 12,
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        arrowParens: 'avoid',    // 화살표 함수 괄호 사용 방식
        bracketSpacing: true,    // 객체 리터럴의 괄호 사이에 공백 출력
        endOfLine: 'auto',        // 개행문자 CRLF/LF 자동 설정
        printWidth: 80,            // 줄바꿈 길이 설정
        semi: true,                // 명령문 끝에 세미콜론 추가
        singleQuote: true,        // 작은 따옴표 사용
        tabWidth: 2,            // 들여쓰기 공백 수 설정
        trailingComma: 'all',    // 후행 쉼표 추가
        useTabs: false,            // tab 대신 space 사용
      },
    ],
  },
};

env	프로젝트 사용 환경 설정으로 browser, es2021이 대표적입니다.
extends	정의되어 있는 ESLint 설정을 가져와 적용합니다.
plugins	ESLint는 3rd-party를 지원하므로 prettier 등과 같이 추가하여 사용할 수 있습니다.
parserOptions	ESLint가 지원하려는 Javascript 옵션을 지정할 수 있습니다.
rules	프로젝트에서 사용하는 규칙을 적용합니다.

#5. settings.json 파일 수정하기

ESLint에 설정했던 내역들을 코드에 적용시키기 위해서는, VSCode 자체적인 설정인 formatOnSave가 off 되어야 합니다. 또한 prettier 플러그인이 활성화 되어 있다면 충돌이 날 수 있습니다. 이를 비활성화 시켜주도록 합시다.

완료 되었다면 settings.json 파일에 아래 항목을 추가합니다.

{
    // 생략
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.alwaysShowStatus": true,
    "eslint.workingDirectories": [
        {"mode": "auto"}
    ],
    "eslint.validate": [
        "javascript",
        "typescript"
    ],
    // 생략
}

저장하시고, VSCode를 재시작합니다.