PrettierなしでNuxt.jsでESLintの設定をする

一つ前のポストでNuxt.jsでESLint + Prettierを使う際の設定というエントリーを書きましたが、ESLintとPrettierに加え、stylelintも絡めると頭が混乱してきて、凡人エンジニアの私にとっては手の追えない状態になってしまいました。

その時ふと「そもそもPrettierって無くても良いんじゃない？」という考えが浮かび、PrettierなしでESLintとstylelintを愛用のエディタVisual Studio Codeで快適に使える環境を作ってみようと思い立ち、本エントリーが生まれました。

本記事で達成すること

Nuxt.jsの開発でPrettierなしでESLintとstylelintをVisual Studio Codeでリアルタイムでlintが走るようにする。

はじめにESlintから設定をしていきます。
まずは環境構築に必要なモジュールをnpm経由で追加しましょう。

ESLintに必要なモジュールはたった2つだけ。Prettierがないととてもシンプルですね。

npmでサクッと追加しましょう。

npm i -D eslint eslint-plugin-vue

次に.eslintrc.jsというファイルをプロジェクト直下に作成します。

まずは.vueファイルの構文をチェックする設定をやっていきます。
.eslintrc.jsを下記の通り記述しましょう。

module.exports = {
  root: true,
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended'
  ],
  plugins: ["vue"]
}

これだけでOKです。

実際にESLintを実行してみましょう。package.jsonのnpm-scriptsにエイリアスとなるコマンドを設定します。

"scripts": {
    "lint": "eslint --ext .js,.vue"
}

設定したらlintコマンドを叩いてみましょう。

npm run lint

ここまでの正しく設定できていれば下記のようにLint結果が表示されるはずです。

$ npm run lint
> eslint --ext .js,.vue
---
ここにエラーメッセージがずらーっと表示される
---
✖ 12 problems (1 error, 11 warnings)

ESLintを実行する環境ができましたが、使用するたびにコマンドを叩くのは面倒です。
なのでここではファイルを保存時にESLintが実行されるように設定をしていきます。

以上で設定は完了です。
正しく設定されていれば、ファイルを編集時にリアルタイムてESLintが実行され、保存時には整形されるようになります。

次回はstylelintの設定について紹介します。