모듈화를 위한 프로젝트 환경 재구성(2) - ESLint 플러그인 설정하기

이번 포스팅에선 ESLint가 무엇인지, 그리고 플러그인 설정에 대해서 알아보도록 하겠습니다.

ESLint란?

: JS 코드를 에러가 덜 나는 방향으로 작성토록 도와주는 문법 보조 도구입니다.

다음과 같이 ESLint를 설정하게 된다면 var로 선언한 변수를 코드에 선언하고 저장하게 되면 자동으로 ES6+ 문법에 맞춰 코드를 수정해주는것과 같은 기능을 제공합니다.

따라서 ESLint를 통해 실제 배포환경에서 에러가 발생하는 것을 사전에 방지하여 프로그램의 유지보수성을 높일 수 있습니다.

ESLint 프로젝트에 설정하기

(사전에 ESLint 플러그인 설치 필요 - VSCode 마켓플레이스를 통해 설치)

프로젝트 폴더(작업하는 대단위 폴더)에 .eslintrc.js 파일을 생성 후, 해당 설정 입력합니다.

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  plugins: ['prettier', '@typescript-eslint'],
  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        semi: true,
        useTabs: false,
        tabWidth: 2,
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: 'avoid',
        endOfLine: 'auto',
      },
    ],
  },
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
};

typescript와 관련한 eslint 플러그인들을 설치하고, 코드 문법 convention을 rules에 정의합니다. 만약 해당 convention에 어긋나는 코드를 작성한다면 error를 뱉어내도록 설정합니다.

+) 만약 빨간줄이 뜨면서 에러가 발생한다면, settings.json 설정을 재구성합니다.

1. VSCode에서 ctrl + shift + p / cmd + shift + p 키를 이용하여 명령어 실행 창 표시 (window/mac)
2. 명령어 실행 창에 open User settings (json) 입력 후 선택
3. VSCode 사용자 정의 파일인 settings.json 파일의 내용에 아래와 같이 ESLint 플러그인 관련 설정 추가.

{
  // ... <-- 기존 내용을 꼭 유지한 상태에서 아래 내용을 추가하고 이 주석은 제거할 것
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true,
  "eslint.workingDirectories": [
      {"mode": "auto"}
  ],
  "eslint.validate": [
      "javascript",
      "typescript"
  ],
}

4. ctrl + , 또는 cmd + , 눌러서 VSCode 설정 파일(Settings)에 들어간 후 format on save 검색 후 체크가 해제 됐는지 확인합니다.
   

---

번외

TSLint를 쓰지않고 ESLint에 TS 규칙을 적용해서 사용하는 이유?
-> Linting
성능 이슈가 제일 컸음 (ESLint에서 더 좋은 퍼포먼스를 보여줌 )

실제 마이크로소프트의 typescript PM분께서 해당 이유를 작성한 깃헙 doc입니다. 그 중 일부를 발췌했습니다. ESLint를 쓰는 이유

Since part of our team is dedicated to editing experiences in JavaScript, our editor team set out to add support for both TSLint and ESLint. However, we noticed that there were a few architectural issues with the way TSLint rules operate that impacted performance. Fixing TSLint to operate more efficiently would require a different API which would break existing rules

요약하면.. JS에서 코드를 수정하는 과정에서 TSLint와 ESLint를 모두 써봤는데 TSLint로 코드 문법을 검사하게 되면 기존 rule을 깨는 API를 요청하기 때문에 아키텍쳐 이슈가 발생했다는 이슈 로그입니다.

반면 ESLint는 아키텍쳐면에서 퍼포먼스가 TSLint 보다 훨씬 좋았다고 합니다. 그렇기 때문에 TSLint보다는 ESLint에 TS 요소를 적절히 섞어 사용하는것을 추천하는 방향입니다.