ESlint 란 ? , ESlint 설치

What is ESlint ?

ES ( EcmaScript ) + Lint ( 에러 코드 표식 )

코드에 특정 스타일과 규칙을 적용해서 문제를 사전에 찾고 패턴을 적용시킬 수 있는 정적 분석 툴입니다.

airbnb 등 미리 스타일과 규칙이 정해진 rule 을 적용시킬 수도 있습니다.

개발자가 자신만의 스타일과 규칙을 유동적으로 정해서 적용할 수 있습니다.

Tip* ( airbnb 와 airbnb-base 의 차이는, airbnb-base 에는 리액트 관련 규칙이 들어있지 않습니다. )

---

Why use ESlint ?

다양한 플러그인을 사용해서 새로운 규칙을 추가하고 커스텀할 수 있습니다.

즉 뛰어난 확장성을 바탕으로 다른 사람들과 같은 환경에서 개발을 진행할 수 있습니다.

---

How to Start ?

많은 개발자들이 사용하는 airbnb 룰 설치 https://www.npmjs.com/package/eslint

eslint

$ npm install -g eslint eslint-config-airbnb-base eslint-plugin-import

직접 set up 설치

$ cd <project-folder>
$ npm init -y
$ npm install eslint --save-dev

.eslintrc.js 파일을 생성하고 정해진 rule 혹은 자신만의 rule 을 적용할 수 있습니다.

ESLint 의 세부 설정은 package.json 파일의 eslintConfig 부분에서 설정하거나 또는

.eslintrc.js 파일에서 rule 을 json 형식으로 설정할 수 있습니다.

 

---

.eslintrc 형식

env: {
    browser: true,
    es6: true,
    node: true
  },
	( 사용 환경 )
  extends: ["airbnb-base", "prettier"],
	( 확장 설정 )
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly"
  },
	( 전역 변수 )
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: "module"
  },
( 버전과 모듈 사용 여부 )
  rules: {
    "no-console": 0,
    "func-names": 0
  }
( 세부 설정 )
};

 

Tip* ( ESLint 검사에서 제외할 파일들을 설정할 때는 .eslintignore 파일을 만듭니다. )

.eslintignore  /  Ex: node_modules

/node_modules/**

 

더 자세한 설정에 관한 링크와 VScode ESLint extension 은 아래 링크에서 확인하실 수 있습니다.

https://eslint.org/docs/rules/

List of available rules

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

ESLint - Visual Studio Marketplace