既存プロジェクトのESLintをアップデート&自動修正させる

はじめに

既存プロジェクトのESLintのバージョンを見たら v1.10.3 。
さすがに古いので、最新バージョン v6.2.0 までジャンプアップします。

ここでは主にeslintのインストールとファイル一括自動修正、
あとはオマケでVS Codeでたまに起きるエラーについて書きました。

既存のESLintをアンインストール

$ yarn remove eslint

ESLintをインストール

$ yarn add -D eslint
## eslint v6.2.0

—initオプションで初期設定する

configファイルを作成するため、 --init オプションを使います。

$ ./node_modules/.bin/eslint --init

対話形式で色々聞かれるので、適宜選択していきます。

? How would you like to use ESLint?
  To check syntax only
❯ To check syntax and find problems
  To check syntax, find problems, and enforce code style

? What type of modules does your project use? (Use arrow keys)
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

? Which framework does your project use?
  React
  Vue.js
❯ None of these

? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Browser
 ◯ Node

? How would you like to define a style for your project? (Use arrow keys)
❯ Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)

? Which style guide do you want to follow? (Use arrow keys)
❯ Airbnb (https://github.com/airbnb/javascript)
  Standard (https://github.com/standard/standard)
  Google (https://github.com/google/eslint-config-google)

? What format do you want your config file to be in? (Use arrow keys)
❯ JavaScript
  YAML
  JSON

? Would you like to install them now with npm? 
❯ Yes
    No

これで .eslintrc.js が作成されているはずです。

eslintrc.js

module.exports = {
      env: {
        browser: true,
        es6: true
      },
      extends: [
        'airbnb-base'
      ],
      globals: {
        Atomics: 'readonly',
        SharedArrayBuffer: 'readonly'
      },
      parserOptions: {
        ecmaVersion: 2018,
        sourceType: 'module'
      },
      rules: {
      }
    };

—fixオプションで自動修正

eslintのルールも新しくなりコードの修正が必要です。

ファイルを一つひとつ開いて直すのは非効率なので、 —fix オプションを使って一括修正します。

## srcフォルダ内のjsファイルを修正する
$ ./node_modules/.bin/eslint --fix src/

自動修正できるものは修正され、できないものはエラーメッセージ等が吐き出されます。

変更前のルールと差異が大きい＆ファイル量が多いとエラーメッセージだらけになると思いますが、どうかめげずに。

おまけ

複数プロジェクトでeslintを使ってて、かつVS Codeのprettier（プラグイン）の自動修正を使ってると、たまに変な修正をすることがあります。
そんなときはprettierプラグインをアンインストールして再度インストールすると直ります。

たぶん一つのeslintのルールに依存してしまってるぽいですね。
複数プロジェクトを行き来するときは気をつけましょう。