ESLint 설정

ESLint 설정

안녕하세요 TriplexLab 입니다 :)
ESLint 설정에 대해서 살펴봅니다.

👉ESLint 간단한 소개

ESLint는 코팅 스타일 가이드를 따르지 않거나 문제가 있는 코드 또는 안티 패턴을 찾기 위해 사용하는
Javascript linter 입니다.
ESLint는 처음부터 유용하게 사용할 수 있는 스타일 가이드(built-in rule)을 제공하지만
개발자가 자신의 스타일 가이드를 작성할 수도 있습니다.

👉ESLint 환경 설정

ESLint는 node.js 환경에서 동작 합니다. node.js가 먼저 설치되어야 합니다. [ESLint 공식문서를 참고했습니다.]

 

🎯환경(env)

env는 사전 정의된 전역 변수 사용을 정의합니다.
자주 사용되는 설정으로는 browser, node가 있습니다.

 "env": {
	"browser": true,
	"es6": true,
 	"node": true
 },

 

🎯확장 (extends)

extends는 추가한 플러그인에서 사용할 규칙을 설정합니다.
플러그인은 일련의 규칙 집합이며, 플러그인을 추가하여도 규칙은 적용되지 않습니다.
규칙을 적용하기 위해서는 추가한 플러그인 중, 사용할 규칙을 추가해주어야 적용이 됩니다.

예를들어, eslint:recommended와 react/recommended를 사용할 수 있습니다.

"extends": [
  "plugin:react/recommended",
  "airbnb"
],

여기서 eslint-plugin- 접두사를 생략하고 plugin:를 사용하여 사용할 플러그인을 지정할 수 있습니다.
eslint:all과 eslint:recommended는 ESLint에 기본으로 제공되는 확장입니다.
ESLint는 eslint:all를 프로덕션 용도로 사용하지 않기를 권장하고 있습니다. 

또, 자주 사용되는 Typescript는 @typescript-eslint/eslint-plugin를 사용할 수 있습니다.
이 플러그인은 eslint-plugin을 생략하고 설정할 수 있습니다.

 "plugins": [
   "react",
   "@typescript-eslint"
 ],

 

🎯전역 (globals)

선언되지 않은 전역변수를 사용하는 경우 ESLint 경고가 발생하지 않도록, globals를 이용하여 사용자 전역 변수를
추가할 수 있습니다.

"globals": {
    // 사용자가 추가하는 전역 변수
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
},

 

🎯파서 옵션 (parserOptions)

parserOptions은 ESLint 사용을 위해 지원하려는 Javascript 언어 옵션을 지정할 수 있습니다.

- ecmaVersion: 사용할 ECMAScript 버전을 설정
- sourceType: parser의 export 형태를 설정
- ecmaFeatures: ECMAScript의 언어 확장 기능을 설정
     - globalReturn: 전역 스코프의 사용 여부 (node, commonjs 환경에서 최상위 스코프는 module)
     - impliedStric: strict mode 사용 여부
     - jsx: ECMScript 규격의 JSX 사용 여부

"parserOptions": {
  "ecmaFeatures": {
    "jsx": true
  },
  "ecmaVersion": 6,
  "sourceType": "module"
},

 

🎯파서 (parser)

ESLint는 구문 분석을 위해 기본적으로 Espree 파서를 사용합니다.
Babel과 함께 사용되는 파서로는babel-eslint가 있고 
Typescript 구문 분석을 위해 사용되는@typescript-eslint/parser가 있습니다.

parser: ['babel-eslint', '@typescript-eslint/parser']

 

🎯규칙 (rules)

ESLint에는 프로젝트에서 사용하는 규칙을 수정할 수 있습니다.
규칙을 변경하는 경우, 다음과 같은 방법으로 설정해야 합니다.

- "off" 또는 0: 규칙을 사용하지 않음
- "warn" 또는 1: 규칙을 경고로 사용
- "error" 또는 2: 규칙을 오류로 사용

규칙에 추가 옵션이 있는 경우에는 배열 리터럴 구문을 사용하여 지정할 수 있습니다.

rules: {
    "no-unused-vars": "error", // 사용하지않는 변수 error처리 하겠다.
    "no-console": "off", // 콘솔로그를 사용하수 있게 꺼놓겠다.
    "no-else-return": "warn",
    "semi": [1, "always"],
    "space-unary-ops": 2
 },

플러그인에서 규칙을 지정할 때는 eslint-plugin-를 반드시 생략해야 합니다.
ESLint는 내부적으로 접두사없이 이름을 사용하여 규칙을 찾습니다.

 

🎯기타

파일 디렉토리 제외
ignorePatterns 필드 또는 eslintignore 파일을 작성하여 파일 및 디렉토리를 제외하도록 지정할 수 있습니다.

// .eslintrc 파일 ignorePatterns 설정
{
  "ignorePatterns": ["temp.js", "node_modules/"],
    "rules": {
      //...
  }
}

//.eslintignore 파일 생성
/root/src/*.js

👉ESLint 패키지 설치

cd <project-folder>

npm init -y

npm install eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-html --save-dev

터미널에서 다음과 같이 eslint를 초기화 실행하면 

npx eslint --init

다음과 같은 옵션을 물어봅니다. 본인 프로젝트 성격에 맞에 선택 하면 됩니다.

✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser, node
✔ What format do you want your config file to be in? · JavaScript
✔ Would you like to install them now with npm? · No / Yes

 

👉전체 기본 세팅 코드

위에 옵션들 설정끝나면 다음과 같이 자동으로 .eslintrc.js파일 생성됩니다.
상황에 따라서 옵션들을 추가 하면 됩니다. [규칙들은 ESLint 사이트 참조]

// .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  extends: ['plugin:react/recommended', 'airbnb'],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parser: ['babel-eslint', '@typescript-eslint/parser'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 6,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    "no-unused-vars": "error", // 사용하지않는 변수 error처리 하겠다.
    "no-console": "off", // 콘솔로그를 사용하수 있게 꺼놓겠다.
    "no-else-return": ["error", {allowElseIf: false}], // if문에 else 문을 사용하지 규칙을 정의한다.
    "semi": [1, "always"],
    "space-unary-ops": 2
  },
};

 

👉VScode 에디터와 같이 사용하기

vs code의 확장 프로그램 ESLint 설치

확장프로그램 ES Lint설치하면 바로 하단처럼 시각적으로 빨간줄 표시됩니다.

시각적으로 빨간줄 표시됨.

빨간줄 된곳에 마우스를 올려놓으면 에러 메세지를 볼수 있습니다.
(add라는 변수가 사용된곳이 없어서 에러낫군요.)

'add'에 값이 할당되었지만 사용되지 않아서 빨간줄 생김.

불필요한 세미콜론 이라는 에러 메세지 발견할수 있습니다.

불필요한 세미콜론 이라는 에러 메세지

👉정한 규칙대로 자동으로 수정하기

이제 코드를 저장하는 동시에 불필요한 코드를 삭제하고, 내가 .eslintrc.js파일에서 정한 규칙대로 자동으로 수정되게끔 해봅시다.
vs code 에디터 설정파일로 가서 다음 옵션을 추가합니다. 

// settings.json

// 옵션을 추가합니다. 
  "editor.codeActionsOnSave": { // 저장 버튼 누르면 자동으로 eslint의 규칙되로 변경이 됩니다.
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "html"],
  "eslint.alwaysShowStatus": true

이제 코드작성하고 저장을 하시면 바로 본인이 설정한 규칙에 맞에 코드가 수정됩니다. 👏👏🎉

👉추천 도구

ESLint 데모를 사용하면 ESLint 설정을 연습해볼 수 있습니다.