ESLintでコーディング規約チェックをしよう

ここではESlintについて詳しく学んでいきます。

ESLintとは

ESlintはJavaScriptのための静的検証ツールです。潜んでいるバグを発見したり、実行前および実行時にコードの書き方に関するルールを逸脱した記述をした場合にエラーを出力してくれるため、Node環境での開発においては欠かせないツールです。

構文の使い方が間違っている、または括弧や、インデント、それから改行の位置など記述方法に関する全てのものにルールを設定することで、一つのプロジェクト内で共有することができます。

ESLintは、全てのルールを自由にカスタム可能で、ルール適用の可否を決定することができます。 自由にカスタムが可能な一方で、200以上ものルールがあるため全てを把握することは難しいといった特徴もあります。

グローバルインストール

ESLintを使用するためにはnpmなどのパッケージ管理マネージャーが必要です。npmを使用しインストールを以下のコマンドで実行します。

sudo npm install -g eslint

ローカルインストール

ESLintを使用するためにディレクトリを作成します。その中で、npmコマンドでpackage.jsonを作成し、eslintの導入を行いたいので、以下のコマンドを実行します。

mkdir envader-sample # ディレクトリ作成
cd envader-sample # ディレクトリ移動
npm init -y # 初期化
npm install eslint --save-dev #インストール

上記のコマンドを実行すると、package.jsonのdevDependenciesにEslintが追加されます。

初期設定

初期設定を始めるには以下のコマンドを実行します。 このコマンドを実行すると、対話形式での設定をが始まります。

npm init @eslint/config

ESLintの質問内容

? How would you like to use ESLint? （ESLintをどのような用途で使用しますか？）

用途に合わせて選択を行ないます。ここで一番下の選択肢を選ぶと質問が変化します。

• 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)（ES2015のimport/export）
• CommonJS (require/exports)（CommonJSのrequire/exports）
• None of these（その他）

? Which framework does your project use? （プロジェクトではどのフレームワークを使っていますか？）

開発時に使用するフレームワークを選択します。

• React
• Vue.js
• None of these

? Does your project use TypeScript?（プロジェクトでTypeScriptを使っていますか？）

TypeScriptを使用する場合はyを入力します。 （y/N）

? Where does your code run?（コードはどこで実行されますか？）

コードの実行場所を、ブラウザーかNode(サーバーサイド)どちらで行うかが問われます。

• Browser
• Node

? How would you like to define a style for your project?（プロジェクトのスタイルをどのように定義しますか？）

• Use a popular style guide（人気のあるスタイルガイド）
• Answer questions about your style（質問に答えていきスタイルを決定する）
• Inspect your JavaScript file(s)（JavaScriptのファイルを参照する）

上記の質問でguide（人気のあるスタイルガイド）を選択すると以下の質問がされます。

? Which style guide do you want to follow? （どのスタイルガイドに従いますか？）

• Airbnb（人気なのはこちらです。）
• Standard（一般的なガイド）
• Google（Googleのガイド）

? What format do you want your config file to be in? （設定ファイルをどの形式にしますか？）

ファイルの形式が問われます。書きやすさなどの点からJavaScriptを選ぶことが多いです。

• JavaScript
• YAML
• JSON

? Would you like to install them now with npm? (設定した内容をnpmでインストールしますか？

これまで設定した内容をnpmでインストールするか否かが問われます。 基本的にはここでYesと選択します。

フォーマット実行

ESLintを実行するために以下のコマンドを実行します。

npx eslint [ファイル名]

修正

ESlintでファイルを修正する時は以下のコマンドを実行します。

npx eslint [ファイル名] --fix

まとめ

今回はESLintの使い方について解説しました。

npx eslint [ファイル名]
npx eslint [ファイル名] --fix

昨今のフロントエンド開発においてESLintは必須とも言える存在です。 簡単な使い方だけでも覚えておきましょう。