출처 : ESLint 공식문서

1. ESLint

공식 문서에 따르면 ESLint는 자바스크립트의 작성 패턴을 통일화 시켜주는 도구이다.

ESLint를 사용하려면 Node.js가 설치되어야 한다.

2. ESLint 수동 설치

ESLint를 설치하기 이전에 프로젝트에 package.json 파일이 설치되어야 한다.

그리고 다음 명령어를 통해 ESLint 패키지를 설치한다.

npm install --save-dev eslint

설치할 때 --save-dev 명령어를 통해 프로젝트의 devDependencies 항목에 추가하도록 설정한다.

이후 .eslintrc 파일을 루트 디렉토리에 설치한다.

touch .eslintrc

이후 프로젝트에 적용하고 싶은 코드 컨벤션의 룰을 적용한다. 아래는 예시 코드이다.

// .eslintrc.js example
module.exports = {
  "env": {
      "browser": true,
      "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
      "ecmaVersion": "latest",
      "sourceType": "module"
  },
}

2-1. --save, --save-dev 차이

-save 명령어로 설치한 패키지의 경우 dependencies 항목에 패키지 정보가 저장되며 production 빌드 시 해당 패키지가 포함된다.

하지만 --save-dev의 경우 패키지를 devDependencies 항목에 저장하며 production 빌드 시 해당 패키지를 포함하지 않는다.

3. ESLint 규칙 설정하기

출처
DaleSeo 개인 블로그 - ESLint 상세 설정 가이드

3-1. parserOptions

출처 : ESLint - Configure Language Options

ESLint가 지원하는 자바스크립트 언어를 설정해주기 위해 사용된다. 이를 설정하여 ESLint에게 자바스크립트 코드를 올바르게 해석하고 분석하는 방법을 명시해준다.

1) ecmaVersion

ESLint에서 사용하려는 ECMAScript 버전을 지정한다. 예를 들어 ES6을 지정하고 싶으면 다음과 같이 작성한다.

"ecmaVersion": "2015"

혹은 최신 사양의 자바스크립트를 적용하고 싶으면 아래와 같이 작성한다.

"ecmaVersion": "latest"

2) sourceType

코드가 모듈 형식인지 스크립트 형식인지 지정한다. 주로 리액트나 Next.js에서는 모듈 형식을 사용하므로 아래와 같이 작성한다.

"sourceType": "module"

3) ecmaFeatures

특정 ECMAScript 기능을 활성화하거나 비활성화 하는 데 사용한다. 만약 JSX 문법을 사용하고 싶으면 아래와 같이 작성한다.

"ecmaFeatures": {
	"jsx": true
},

3-2. env

해당 프로젝트의 실행 환경에 대해 명시해준다. 브라우저와 Node.js 환경에서 실행될 경우 아래와 같이 작성한다.

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

또한 es6 최신 문법인 환경에서 작성할 경우 다음과 같이 추가해줄 수 있다.

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

3-3. extends, plugin

출처 : ESLint - Configuration Files

다른 기업들이 이미 작성한 ESLint 설정을 사용하고 싶을 때 명시한다.

eslint-config- 접두사는 생략이 가능하다.
ex) eslint-config-airbnb => airbnb

일단 이 옵션을 사용하려면 적용하고 싶은 ESLint 패키지를 기존에 설치해야 한다.

1) eslint:recommended

extends 부분에 eslint:recommended를 사용하면 프로젝트에서 일반적으로 권장되는 코딩 스타일을 따르도록 설정할 수 있다.

이후 서술할 rules 프로퍼티를 통해 구체적으로 명시할 수 있다.

"extends": "eslint:recommended",
"rules": {
	// enable additional rules
	"indent": ["error", 4],
	"linebreak-style": ["error", "unix"],
	"quotes": ["error", "double"],
	"semi": ["error", "always"],

	// override configuration set by extending "eslint:recommended"
	"no-empty": "warn",
	"no-cond-assign": ["error", "always"],

    // disable rules from base configurations
	"for-direction": "off",
    }

2) plugin

plugin이란 ESLint npm 패키지다. 이를 통해 새로운 규칙을 추가로 설정하거나 공유하고 싶은 ESLint 환경 설정을 export 해줄 수 있다.

다만 설치한다고 바로 적용되는 것은 아니고 규칙들을 담은 패키지들이라 대부분 내부 규칙들은 따로 extends에 명시해줘야 설정된다.

ESLint가 require 할 수 있게 프로젝트 디렉토리에 적용하고 싶은 plugin을 설치해야 한다.

"plugins": [
	"react"
],
"extends": [
	"eslint:recommended",
	"plugin:react/recommended"
],
"rules": {
	"react/no-set-state": "off"
}

3) extends

출처 : Stackoverflow - What's difference between extends and plugin?

config 파일을 사용하여 적용할 일련의 규칙을 명시한다.

아래와 같은 규칙들이 사용될 수 있다.

• "eslint:recommended"
• "eslint:all"
• "eslint-config-xxx"
• "eslint-plugin-xxx"
• "plugin: [패키지 이름]/[규칙파일 이름]"