注目キーワード

【ESlint入門】Prettierとの併用でコード品質を向上させる

  • 2023.09.26
       
【ESlint入門】Prettierとの併用でコード品質を向上させる

ESLintとPrettierの組み合わせはコードの品質向上、読みやすさの向上、チーム開発における一貫性の確保など多くのメリットを提供してくれます。

本記事では実際にプロジェクトに導入した内容に基づき ESlintとPrettierを紹介します。

目次

ESlintとは?

ESlint(イーエスリント)とは、JavaScriptのコードが規約に沿って書かれているか、指定したルールに違反していないかをチェックをして指摘や修正をしてくれる静的解析ツールです。

プラグインを使用することでTypeScript、Vue.js、Reactなどの様々な種類のコードを解析することができます。

Prettierとは？

Prettier(プリティアー)はコードの自動整形を行うツールでコードのフォーマットを統一することができ、チーム開発におけるコードの品質、読みやすさ、一貫性を向上させます。

ESlintとPrettierの違い

どちらもコーディングを補助するツールですが、ESlintはコードの品質やスタイルをチェックして潜在的なエラーを見つけ警告やエラーを出して簡易なものは修正を行なってくれるツールであるのに対し、Prettierはコードのインデントやクォートの使い方などの整形を担当して一貫性のあるフォーマットに保ってくれるツールです。

導入方法

コードエディタはVSCodeを使用しています。今回の導入ではJavaScriptの他にTypeScriptとvue.jsを解析できるよう設定をしました。プロジェクトにpackage.jsonが無い場合は先に作成しておきます。

ESlintの導入

npm init @eslint/config

このコマンドを実行することで対話型のプロンプトが表示され必要なプラグインのインストールや設定ファイルの作成を行なってくれる便利なコマンドです。

ですが、こちらでは内容の説明も含めて手動でのセットアップについて紹介します！

必要パッケージのインストール

npm install --save-dev　　eslint　
npm install --save-dev @typescript-eslint/eslint-pulugin @typescript-eslint/parser
npm install --save-dev eslint-plugin-vue
パッケージ役割
eslintESlint本体
@typescript-eslint/eslint-pulugin
@typescript-eslint/parser		ESlintでTypeScriptを正しいルールで解析できる様にする
eslint-plugin-vuevue.jsを解析できるようにする

このコマンドでpackage.jsonの”devDependencies”に追加されます。

設定ファイルの作成（.eslintrc）

ルートディレクトリに`.eslintrc`をサポートされているファイル形式で作成し設定を追加していきます。

公式ドキュメント「ESlint設定ファイル形式」

今回は`.eslintrc.js`で作成してます。

module.exports = {
    env: {
        browser: true,
        es2021: true,
    },

    extends: [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:vue/vue3-strongly-recommended"
    ],

    ignorePatterns: ".eslintrc.js",

    parserOptions: {
        ecmaVersion: "latest",
        parser: "@typescript-eslint/parser",
        extraFileExtensions: [".vue"],
        sourceType: "module",
        project: "./tsconfig.json",
    },

    plugins: [
				"@typescript-eslint",
				"vue"
		],

    rules: {
    },
};

env

グローバル変数を読み込む項目です。windowやdocumentなどのグローバル変数を使おうとすると、「定義されてないので使えません」とエラーが出てしまうのを防ぐ設定です。

env: {
        browser: true,
    },

このように設定を入れることでbrowserのグローバル変数を読み込みチェック対象外にしてくれます。

ESlint公式ドキュメント「環境の指定」

extends

他の設定ファイルやルールセットを継承する項目です。

 extends: [
        "eslint:recommended",　　　　　　　　　　　　　　// eslintの推奨ルール設定
        "plugin:@typescript-eslint/recommended",　　　// TypeScriptの推奨ルール設定
        "plugin:vue/vue3-strongly-recommended"   // vue3の推奨ルール設定
    ],

推奨のルールセットを読み込んでいますが他にもルールセットがあるので必要に応じて変更します。

ignorePatterns

ESlint のチェック対象外にしたいファイルを指定できます。

今回作成した.eslintrc.jsでは、envでnodeの設定をしていないため`module.exports`に対してエラーが出てしまうのでignoreに設定しています。

parserOptions

ESlintがコードを解析する際の各種オプションの設定項目です。

parserOptions: {
    ecmaVersion: "latest",               // 最新のECMAScriptバージョンを使用することを指定します
    parser: "@typescript-eslint/parser", // TypeScriptコードを解析するためのパーサーを指定します
    extraFileExtensions: [".vue"],       // 追加で解析するファイル拡張子を指定します。
    sourceType: "module",                // ECMAScriptのモジュールシステムを利用することを指定します
    project: "./tsconfig.json",          // プロジェクトのTypeScriptの型情報がESLintに提供されます
},

plugins

ESlintにプラグインを読み込ませ解析できるようにする項目。typescriptとvueの設定を入れています。

rules

この項目には基本ルールセット以外の細かなルールを追加で設定することができます。例えば”no-console”: “error”と設定するとconsole.logを禁止することができたりとプロジェクトの必要に応じてルールを追加することができます。

ESlint公式ドキュメント「ルールの構成」

Prettierの導入

必要パッケージのインストール

npm install --save-dev　　prettier　　eslint-config-prettier
パッケージ役割
prettierPrettier本体
eslint-config-prettierPrettierとESlintで競合するルールをオフにする

設定ファイルの作成（.prettierrc）

ルートディレクトリに`.prettierrc`ファイルを作成して適用したいオプションを記載します。

Prettier オプション

.eslintrc.js に設定を追加

extendsの項目に”prettier”を追加し連携させます。

extends: [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:vue/vue3-strongly-recommended",
        "prettier"
    ],

注意点として“prettier”は末尾に入れてください。 最後に読み込むことでeslint-config-prettierでルールの競合をオフにしています。

ESlintとPrettierを実行してみる

package.jsonにスクリプトを追加します。

"scripts": {
...
    "lint": "eslint './resources/**/*.{js,ts,vue}' && prettier --write './resources/**/*.{js,ts,vue}'",
},

今回はresources内の全ての js、ts、vue ファイルに対してESlintとPrettierを実行するように記述しました。こちらは実行したいファイルに応じて変更します。そして、`npm run lint`コマンドを叩くと指定したファイルに実行してくれます。これで対象ファイルのコードに問題点があればログにエラーを出力してくれます。

"scripts": {
...
    "lint": "eslint --fix './resources/**/*.{js,ts,vue}' && prettier --write './resources/**/*.{js,ts,vue}'",
},

“eslint –fix”とすることでESlintが実行タイミングで可能な範囲での自動修正を行ってくれます。

VSCodeで自動化する

最後にVScodeで保存時に自動で実行してくれるように設定をします。

VSCode の拡張機能で ESlint と Prettier をインストール

.vscode/settings.json に記述

{
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"editor.formatOnSave": true,
	
	"editor.codeActionsOnSave": {
	    "source.fixAll.eslint": true
}

この記述で VSCode 保存時に Prettier が自動フォーマットとESlintの自動修正をしてくれます。

終わりに

今回は、コーディングを補助するツール、ESlintとPrettierについて紹介しましたがいかがでしたか？これらを利用することで、コードの可読性が上がり、不具合になりうるミスも見つけやすくなるので、開発効率も向上します。特に、チーム開発のような複数人でコードに触れる場面で役立ちます。
ぜひ利用してみてください。
このほかにも、huskyやCommitizenなどのツールを導入することでコミット時に自動でコード解析をできたり、コミットメッセージを統一できたりとより便利になります。気になった人は導入するのも良いでしょう。

     

Programmingカテゴリの最新記事