Eslint란?

정의

ESLint란, 2013년 6월에 Nicholas C. Zakas가 처음 만든 오픈소스 JavaScript Linting 유틸리티이다. 코드 Linting 이란 특정 스타일 규칙을 준수하지 않는 문제가 있는 소스코드를 찾는데 사용되는 방식을 말하며, Linter 는 이러한 Linting 을 수행하는 도구이다. 또한 협업간에 획일화된 코드스타일을 정립하는데도 기여하고 있다.

대부분의 프로그래밍 언어에는 컴파일하는 과정이 있어서 컴파일시 수행되는 Linter 가 내장되어있다.

그러나 역동적이고 느슨한 언어인 JavaScript는 이러한 Linter 가 존재하지 않는다. JavaScript는 별도의 컴파일 과정이 없고, Node나 Browser에서 바로 실행되기 때문이다.

따라서 일반적인 JavaScript 개발시 구문 오류나 기타 오류를 찾기 위해서는 실제 실행까지 시켜봐야한다.

사용 환경

ESLint를 사용할 수 있는 환경은 두 가지가 존재한다.

첫번째로 JavaScript 개발시 사용되는 IDE/Editor 에 지원되는 ESLint 플러그인을 설치하는 것이고,

두번째로 webpack 을 사용하여 webpack 번들링시 eslint-loader 를 추가하여 사용하는 것이다.

물론 두 개 같이 사용할 수도 있다. 두 개 같이 사용하게 되면 좀 더 편리한 JavaScript 개발환경을 구축할 수 있다.

환경 설정

ESLint를 사용할 때 환경 설정 파일이 존재한다.

이 환경 설정 파일을 참고하여 Linter 는 소스코드 체크를 수행한다.

환경 설정은 IDE/Editor 에 따라서 별도의 UI로 제공되는 경우도 있고,

환경 설정 파일 내용을 오픈 소스로 공개하여 자신들만의 ESLint 환경 설정을 배포하기도 한다. (대표적으로 Airbnb, Naver 등등.. 이 있다.)

자신만의 Linting 설정을 하고자 한다면 ESLint 공식 홈페이지 에서 확인하여 설정할 수 있다.

패키지 설치

eslint 를 사용하려면 eslint패키지를 설치해야한다. vue환경에서 돌릴예정이니 eslint-plugin-vue를 붙여줬다.

$ npm install -D eslint eslint-plugin-vue

webpack.config.js 설정

eslint 패키지를 설치하였으면 설정을 넣어주어야 한다.

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

eslint 설정

package.json 파일과 동일한 디렉토리에 .eslintrc.js 파일을 생성해서 eslint 설정을 입력한다. 외부에 공개된 설정으로 진행하고 싶으면 그냥 패키지만 받으면 된다.

또한 앞서 exclude 속성을 별도의 파일로도 관리할 수 있다.

마찬가지로 package.json 파일과 동일한 디렉토리에 .eslintignore 파일을 생성하여 계행 문자로 구분하여 linting 에 제외할 디렉토리나 파일을 설정할 수 있다.

{
  "parserOptions": {
    "ecmaVersion": 2019,
    "sourceType": "module"
  },
  "env": {
    "browser": true,
    "node": true
  },
  "extends": ["plugin:vue/recommended"],
  "plugins": [],
  "rules": {
    "vue/max-attributes-per-line": "off",
    "vue/singleline-html-element-content-newline": "off"
  }
}

jeongjunho94