きょるに @kyoruni

ダッシュで奪取

チラシの裏

【Gridsome】ESLintを導入する

Vue CLI は設定すると自動で lint を入れてくれていたのですが、Gridsome CLI にはその機能がないため手動で導入します。

環境

  • @gridsome/cli v0.3.4
  • gridsome v0.7.23

インストール

$ yarn eslint --init

ウィザードが表示されるので、質問に答えながら進めていきます。

ESLint をどのように使いますか?

? 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
  • 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? …
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

多分一番上……(ちゃんと調べます)。

どのフレームワークを使用していますか?

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

使っているフレームワークを選択(今回は Vue.js)。

TypeScript を使用していますか?_

? Does your project use TypeScript? › No / Yes

使っていないので No を選択。
使った方が良いとはよく聞くので、いつかちゃんと勉強したい……!

コードはどこで実行されますか?

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

スペースキーで複数選択できます。
ブラウザで実行されるので、 Browser を選択。

どのスタイルガイドを使用しますか?

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

セミコロン無し派なので Standard を選択。

設定ファイルをどのフォーマットで作成しますか?

? What format do you want your config file to be in? …
  JavaScript
  YAML
❯ JSON

VSCode 使うなら JSON が良いと聞いた記憶があったため(うろ覚え)、 JSON を選択。

関連パッケージをインストールしますか?

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

後でインストールするのも面倒そうなので Yes を選択。
ESLint と一緒に色々インストールされます。

インストール完了

以下のような設定ファイルが作成されました。

.eslintrc.json
{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:vue/essential",
        "standard"
    ],
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
}

プラグインの追加

Gridsome 用のプラグインをインストールします。

$ yarn add eslint-plugin-gridsome vue-eslint-parser
  • vue-eslint-parser: eslint-plugin-gridsome で使用しているらしいので、一緒に入れる
.eslintrc.json
{
    "root": true, // 追加
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:gridsome/recommended", // 追加
        "plugin:vue/essential",
        "standard"
    ],
    "parser": "vue-eslint-parser", // 追加
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
}
  • root: 親フォルダの .eslintrc.* を無視する(いらないかもしれないけど、おまじないとして)
  • extends, parser: 公式ドキュメントの通りに記載(参考

実行してみる

わざと色々間違えたファイルを作成。

src/components/Hoge.vue
<template>
  <div class="hoge">
    hoge
  </div>
  <div class="fuga">
    fuga
  </div>
</template>

<script>
export default {
  created () {
    const hoge = "fuga"
    console.log('hoge');
  },
  mounted() {
    console.log('mounted')
  },
  beforeMount () {
      console.log('beforeMount')
  }
}
</script>
src/hoge.js
var piyo ="webpack";
console.log(`Hello ${piyo}`);

const pokemons = ['ピチュー', 'ピカチュウ', 'ライチュウ']
pokemons.forEach(pokemon => {
      console.log(pokemon)
})

お試しで実行
色々出てきた 大丈夫そう!

$ ./node_modules/.bin/eslint src/ --ext .js,.vue

/Users/kyoruni/projects/blog/src/components/Hoge.vue
   5:3   error  The template root requires exactly one element  vue/no-multiple-template-root
  13:11  error  'hoge' is assigned a value but never used       no-unused-vars
  13:18  error  Strings must use singlequote                    quotes
  14:24  error  Extra semicolon                                 semi
  16:10  error  Missing space before function parentheses       space-before-function-paren
  20:1   error  Expected indentation of 4 spaces but found 6    indent
  23:10  error  Newline required at end of file but not found   eol-last

/Users/kyoruni/projects/blog/src/hoge.js
  1:1   warning  Unexpected var, use let or const instead       no-var
  1:10  error    Operator '=' must be spaced                    space-infix-ops
  1:11  error    Strings must use singlequote                   quotes
  1:20  error    Extra semicolon                                semi
  2:29  error    Extra semicolon                                semi
  6:1   error    Expected indentation of 2 spaces but found 6   indent
  7:3   error    Newline required at end of file but not found  eol-last

✖ 14 problems (13 errors, 1 warning)
  11 errors and 1 warning potentially fixable with the `--fix` option.

スクリプト追加

毎回 ./node_modules/.bin/eslint src/ —ext .js,.vue とか書くの面倒くさいので、エイリアスで実行できるようにします。

package.json

scripts の箇所に追記

  "scripts": {
    // 省略
    "lint": "./node_modules/.bin/eslint src/ --ext .js,.vue"
  },

これで、以下のコマンドで Lint が走るようになります。

$ yarn lint

実行してみる(自動補正)

エラーを表示するだけでなく、自動で修正してくれる機能を使用します。
自分で直すより絶対良いはずなので!

package.json

scripts の、 lint を修正
—fix オプションを追加

  "scripts": {
    "lint": "./node_modules/.bin/eslint src/ --ext .js,.vue --fix"
  },

実行

$ yarn lint

/Users/kyoruni/projects/blog/src/components/Hoge.vue
   5:3   error  The template root requires exactly one element  vue/no-multiple-template-root
  13:11  error  'hoge' is assigned a value but never used       no-unused-vars

✖ 2 problems (2 errors, 0 warnings)

自動補正でも直せない部分が残りますが、他の箇所は自動で補正してくれたことを確認。 ※ 以下が残った部分です。

  • error The template root requires exactly one element: ルートブロックが複数ある
  • error ‘hoge’ is assigned a value but never used:未使用の変数 ‘hoge’ がある
src/components/Hoge.vue
<template>
  <div class="hoge">
    hoge
  </div>
  <div class="fuga">
    fuga
  </div>
</template>

<script>
export default {
  created () {
    const hoge = 'fuga'
    console.log('hoge')
  },
  mounted () {
    console.log('mounted')
  },
  beforeMount () {
    console.log('beforeMount')
  }
}
</script>
src/hoge.js
const piyo = 'webpack'
console.log(`Hello ${piyo}`)

const pokemons = ['ピチュー', 'ピカチュウ', 'ライチュウ']
pokemons.forEach(pokemon => {
  console.log(pokemon)
})

残った部分を手動で直してから、もう一回実行してみます。

  • ルートブロックを1個にする
  • 未使用の変数を削除
src/components/Hoge.vue
<template>
  <div class="hoge">
    hoge
  </div>
</template>

<script>
export default {
  created () {
    console.log('hoge')
  },
  mounted () {
    console.log('mounted')
  },
  beforeMount () {
    console.log('beforeMount')
  }
}
</script>

通った!OK

$ yarn lint
✨  Done in 2.25s.

参考URL