[Vue.js/Typescript] 6. ES Lint

[Github - tslint issues] Roadmap: TSLint -> ESLint

Typescript 용 Lint인 TSLint가 deprecated 되고 ESLint 로의 마이그레이션을 진행 중이다.

TSLint 대신 ESLint 를 프로젝트에 적용해보자.

이미 TSLint 를 사용하고 있다면 TSLint to ESLint RoadMap (rules, Functionality ...) 이 글에 TSLint rules와 ESLint rules 매칭을 잘 해두었기 때문에 참고하면 좋을 듯 하다. 

---

$ npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

eslint, @typescript-eslint/parser, @typescript-eslint/eslint-plugin 설치

$ npm install --save-dev eslint-config-prettier eslint-plugin-vue

extends에서 사용할 eslint-config-prettier, eslint-plugin-vue 설치

// .eslintrc.js
module.exports = {
  root: true,
  plugins: ["@typescript-eslint"],
  parserOptions: {
    parser: "@typescript-eslint/parser"
  },
  extends: [
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint", 
    "plugin:vue/recommended"
  ],
  rules: {
    quotes: ["error", "single"],
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off"
  }
};

 .eslintrc.js  파일을 생성한다.

// package.json
{
  // ...
  "scripts": {
    // ...
    "lint": "eslint --ext .vue,.ts src" // add
  },
}

package.json 에 eslint를 실행하는 스크립트를 추가한다.

src 폴더에 있는 모든 .vue, .ts 파일들을 대상으로 eslint를 실행한다.

$ npm run lint

위 명령어로 실행을 해보면 

수 많은 에러가 발생한다. ESLint는 초반부터 추가하도록 하자..

---

이렇게만 설정했을 때 npm run lint로 테스트를 할 수 있지만 명시적으로 명령어를 실행해줘야 확인이 가능하다.

개발할 때 npm run lint를 실행하는걸 까먹을 가능성이 매우 높다.

주로 많이 실행하는 명령어는 개발용 환경으로 dev-server를 띄워서 확인하는 npm run dev 이다. (script 설정 상 상이할 수 있다.)

즉, webpack을 실행할 때 eslint를 실행 시킨다면 Error, Warning을 개발하면서 동시에 확인할 수 있다.

$ npm install --save-dev eslint-loader

 eslint-loader 를 추가한다.

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      // add
      {
        enforce: "pre",
        test: /\.(ts|vue)$/,
        loader: "eslint-loader",
        include: path.resolve(__dirname, "src")
      },

webpack 설정에서 eslint-loader를 추가한다.

include에서 src 대상 폴더를 지정한다.

enfoce: "pre"로 해서 다른 로더들보다 먼저 실행하게 한다.

이제 npm run dev로 실행해보면 웹팩 eslint-loader에서 eslint가 실행되기 때문에 eslint 실행을 잊지 않을 수 있다.

---

이제 error, warning 을 다 수정해야 하는데.. 81개를 다 바꾸기엔 너무 힘들다.

$ npm run lint -- --fix

위 명령어를 실행하면 자동으로 문제점들을 수정해준다. 

80개가 넘는 에러 중 28개만 남았다. 남은 것들은 수기로 변경해주자.

---

깃허브 : add eslint, add eslintrc.js

---

 

참고

ESLint user guide

ESLint Rules

TSLint Rules

[Vue.js 한국 사용자 모임] Vue.js 공식 ESLint 플러그인 적용하기

[Git issues] eslint-loader doesn't check if additional .eslintrc exists

Using ESLint and Prettier in a TypeScript Project

[TOAST FE Guide] 정적 분석