nuxt.js(v2)でesLintの設定をする。ついでにVScodeで自動整形させる。

■動作確認済みバージョン

• nuxt(2.11.0)
• create-nuxt-app(v2.12.0)

■更新履歴

• 2020/2/5 初稿

---

目標

• create-nuxt-appでstyleLintのエラーが出ても驚かない
• 各種動作を確認する
• VScodeで保存時に自動整形する

nuxt.jsインストール時の設定

公式ドキュメントのcreate-nuxt-appを利用するを参考に、各種設定をしつつ選んでNuxt.jsをインストールします。ポイントのみ記載します。

↓

terminal

% cd <インストール先のディレクトリ>
% npx create-nuxt-app

リンティングツールをチェック時に…

? Choose linting tools 
 ◉ ESLint
 ◯ Prettier
 ◉ Lint staged files
❯◉ StyleLint

ESLint、Lint staged files、StyleLintをチェックします。Prettierは改行強制で好みが分かれるため、プロジェクトメンバーで検討の上で別途追加します。

インストール完了後…stylelintの設定

インスストール完了後に、npm run devをするとStyleLintErrorが出ます。

↓

terminal

ERROR  StylelintError

No rules found within configuration. Have you provided a "rules" property?

焦らずに…自動生成されているstylelint.config.jsに空のルールを追加します。

↓

stylelint.config.js

module.exports = {
  // add your custom config here
  // https://stylelint.io/user-guide/configuration
  'rules': {} // ←追加
}

修正し保存して、エラーが出なければ動作確認完了です。styleLintの設定は以下を参照してください。

参考：nuxt.js(v2)でstyleLintの設定をする。ついでにVScodeで自動整形させる。

動作確認

確認のために、% npm run dev後に適当にjavascriptを打ってください。エラーが出たら成功です。

↓

terminal

// エラー例

ERROR  StylelintError

/xxx/test-app/pages/test.vue
  24:4  error  Unexpected trailing comma  comma-dangle

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

さらに、--fixの動作確認をします。% npm run lint -- --fixを入力してエラー箇所が修正されれば成功です。

↓

terminal

% npm run lint -- --fix

↓
//エラーが出なければ成功

commit時のesLintErrorを確認します。適当なjavascriptを打ってcommitします。同様のエラーが出たら成功です。

↓

terminal

% git add ./pages/test.vue
% git commit -m 'commit test'

↓
// エラー結果抜粋
✖ eslint found some errors. Please fix them and try committing again.

/xxx/test-app/pages/test.vue
  24:4  error  Unexpected trailing comma  comma-dangle

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

修正（--fix）して、再度動作確認をします。エラーが出力されずにcommitできたら成功です。

↓

terminal

% npm run lint -- --fix
% git add ./pages/test.vue
% git commit -m 'commit test'

↓
//エラーが出なければ成功

VScodeで保存時に自動整形する

eslintをインストールします。.eslintrc.jsファイルの設定が反映されます。また、自動整形機能（editor.codeActionsOnSave）を有効にするためには、settings.jsonの書き換えが必要です。

自動整形機能の有効化

1. VScodeのprefarence（機能拡張）からSettingsを開きます
2. 検索窓で「settings.json」を検索します
3. **[json]**下の「Edit in settings.json」をクリックしてsettings.jsonを開きます
4. 以下を追記します。

↓

settings.json

{
    ...
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    }
}

動作確認をします。先ほどと同じように適当にjavascriptを打ってください。保存時に自動で整形されれば成功です。

以上で目標達成です。

おまけ

相変わらずほとんど設定をせずにesLintの恩恵を得られます。cool!

すでにシンプル。