Naver ESLint 적용

프로젝트를 총 세명이 진행하다보니, 다들 코드 스타일이 달랐다.

코드의 품질을 높이고, 좋은 코딩 스타일을 익히기 위해 eslint를 프로젝트에 적용하기로 했다.

https://github.com/naver/eslint-config-naver

naver/eslint-config-naver

eslint 는 Airbnb를 기반으로 한 naver eslint를 적용하기로 하였다.

# 적용 순서

1. 프로젝트에 eslint를 설치한다.

yarn add eslint -D

 

2. 설치가 완료되었다면, IDE(phpstorm 사용)에 eslint를 설정한다.

Enable을 체크하고, ESLint package에 설치한 eslint 경로를 지정해준다. ( Enable를 체크하면 자동으로 찾아준다. )

3. eslint-config-naver를 프로젝트에 설치한다.

yarn add eslint-config-naver -D

4. 프로젝트내부에 .eslintrc 파일을 만들고 옵션을 추가한다.

{
  "env": {
    "es6": true
  },
  "extends": "naver"
}

 

잘 적용 됐다 :)

 

*참고 URL : https://jojoldu.tistory.com/230

Airbnb의 eslint를 IntelliJ에 적용하기

 

# rules 추가

1. 공백 tab > space 4칸

"rules": {
    "indent": ["error", 4]
 }

 

# webpack dev server에 연결

1. loader 설치

yarn add babel-eslint eslint-loader eslint-plugin-import --save --dev

 

2. webpack.config에 추가

    babel-loader보다 eslint-loader가 먼저 실행되어야 한다.

// webpack.config.development.js

 rules: [
      {
        enforce: 'pre',
        test: /\.(js)$/,
        loader: 'eslint-loader',
        exclude: /node_module/,
      }
 ],

 

3. .eslintrc 에 parser 설정

{
  "env": {
    "es6": true
  },
  "extends": ["naver"],
  "rules": {
    "no-script-url": "off",
    "no-console": "off",
    "no-extra-boolean-cast": "off",
    "no-useless-escape": "off",
    "max-len": ["error", { "code": 200 }],
    "no-else-return": "off",
    "indent": ["error", 2],
    "quotes": ["error", "single"],
    "array-element-newline": ["error", "consistent"],
    "object-curly-spacing": ["error", "always"],
    "no-dynamic-require": 0
  },
  "parser": "babel-eslint" // 추가
}