오늘 남길 노트는 Node.JS 및 JavaScript 프로젝트에 ESLint를 추가하는 방법을 다룰겁니다. 저는 기본적으로 Standard.JS를 기준으로 코드를 짜고 있습니다.


오늘 전체적으로 다룰 내용은 전혀 어렵지 않습니다. 그냥 프로젝트에 린터라고 하는 것을 설치하면 됩니다. 설치가 끝나면 에디터의 린터 플러그인이 규칙을 인식하여 코딩을 도와줄거예요. 여기에서는 세세하게 린터에 대해서 다루지는 않을 것이고 간단히 Standard.JS를 설치해보는 작업만 해볼 겁니다.

ESLint와 Standard.JS 설치

정말로 간단합니다. ESLint와 Standard.JS를 패키지에 개발전용 의존성으로 설치합니다. 저는 새로 진행하려고 하던 React 사이트에 ESLint를 추가할겁니다.

yarn add -D eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard

eslintrc 파일로 ESLint 환경 설정하기

일단 기본적으로 설치는 간단하게 끝났습니다. 이제 .eslintrc.js 파일로 ESLint에게 어떤 규칙이 있는지 알려주면 됩니다. 이 .eslintrc.js 파일은 이전에는 .eslintrc 파일로도 불렸습니다. 그러나 지금은 .eslintrc.EXTENSION이 맞는 형태이고 JavaScript로 작성할 예정이니 .eslintrc.js가 되겠습니다. 그리고 .gitignore 파일과 같이 하위 디렉터리에 설정이 전파됩니다.

저는 기본적으로 아래와 같은 설정을 사용합니다.

module.exports = {
   env: {
     browser: true,
     commonjs: true,
     es6: true,
     node: true
   },
   extends: [
     'standard'
   ],
   globals: {
     Atomics: 'readonly',
     SharedArrayBuffer: 'readonly'
   },
   parserOptions: {
     ecmaVersion: 2018
   },
   rules: {
     indent: [
       'error',
       2,
       {
         SwitchCase: 1,
         VariableDeclarator: 'first'
       }
     ],
     'no-extend-native': 0 // NOTE: DO NOT OVERRIDE ORIGINAL FUNCTIONS.
   }
 }

Switch Case 문의 들여쓰기 추가 설정

그다지 많이 설명할 필요는 없을 듯하지만 아래에 SwitchCase 문에서는 Camel Case를 사용했을 때 아래와 같이 Linter에서 오류를 출력하기 때문에 간단히 몇 가지 설정이 더 필요했었습니다. (당시에는 Discord에서 도움을 받아 해결하였습니다)