🧩

Vue3プロジェクトにEslint導入の手順

ESLintとは

ESLintは、JavaScriptコードから問題点を見つけて警告するツールです。コードスタイルの問題や文法エラー、潜在的なバグなどを事前に発見し、プログラムの品質を向上させるのに役立ちます。

プラグインシステムを通じて様々なルールセットを提供し、開発者が直接ルールを作って追加することもできます。

プラグイン追加

eslint-plugin-vueプラグインは、Vue.jsコードで使用されるテンプレートと異なるVue.jsコンポーネントのリンティングをサポートします。

eslint-plugin-unused-importsプラグインは、使用しないimport文に対する警告メッセージが得られます。

次のようにnpmコマンドを入力します。


npm install --save-dev eslint eslint-plugin-vue eslint-plugin-unused-imports

`.eslintrc.js`ファイル作成

インストールが完了したら、.eslintrc.jsファイルをプロジェクトルートディレクトリに作ります。

このファイルはESLintを設定するファイルです。


module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
  },
  extends: ['plugin:vue/vue3-recommended', 'eslint:recommended'],
  plugins: ['unused-imports'],
  rules: {
    'unused-imports/no-unused-imports': 'warn',
    'no-unused-vars': 'warn',
  },
}

この設定では、plugin:vue/vue3-recommendedとeslint:recommendedを使用して基本的なルールを適用し、unused-importsプラグインで使わないimport文に対する警告メッセージを得ることができます。

必要に応じて、別のルールを追加したり、デフォルトのルールを変更したりできます。ここでは、使わない変数や関数も警告メッセージを得られるように'no-unused-vars': 'warn'を追記しました。

エラーが得たい場合は、warnの代わりにerrorを書いてください。

eslintが作動しない場合


eslint src --fix

上記コマンドを使ってsrcディレクトリのすべてのJavaScriptファイルに対して検査および修正を行うことができます。

コードコミット前にESLint検査を行う

ESLintはコードで発見された問題をリアルタイムで報告し、開発者がコードを作成する際にエラーを早く把握して修正できるようにサポートします。したがって、ビルド時間にESLintを実行することは推奨されません。

しかし、もしESLint規則に従うよう強制したいのなら、pre-commit hookまたはCI/CDパイプラインでESLintを実行することをお勧めします。これにより、コードがコミットされたりビルドされる前にESLintが実行されてコードを検証し、問題が見つかったらコミットがブロックされたりビルドが失敗するように設定できます。

pre-commit hookのインストール

pre-commitはGit Hooksを管理するツールです。 pre-commitをインストールすると、Gitコミット前にpre-commitスクリプトが実行されます。

pre-commitはPythonパッケージで、npmで直接インストールすることはできません。

しかし、npmと一緒に使用できるhuskyパッケージを利用してpre-commit機能を実現することができます。


npm install husky --save-dev

Git Hooksスクリプト作成

huskyパッケージを使うと、package.jsonファイルにGitHooksスクリプトを作成できます。例えば、ESLintを使ってコミットするたびにコードを検査し、エラーが発生した場合はコミットがキャンセルされるようにするには、次のように作成します。


{
  "scripts": {
    "lint": "eslint .",
    "precommit": "npm run lint"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run precommit"
    }
  }
}

これでGitリポジトリにコードをコミットするたびにeslintが実行されてコードを検査し、エラーが発生するとコミットが取り消されます。 eslintで見つかったエラーを修正した後、再度コミットすることができます。