ESLint で JavaScript を自動整形する

はじめに

JavaScript で開発する際、コードスタイルのルールを統一することは重要です。ESLint を使用してコードを自動整形する方法を解説します。

使用するツール

• パッケージ管理: npm
• リンター: ESLint
• スタイルガイド: eslint-config-google

Node.js のインストール

Node.js 公式サイト から Node.js をインストールし、npm を使用できる状態にしてください。

ESLint のインストール

作業ディレクトリで以下のコマンドを実行し、ESLint と Google スタイルガイドをインストールします。

npm install eslint eslint-config-google

ESLint の設定

作業ディレクトリに .eslintrc ファイルを作成し、以下の内容を記述します。

{
  "extends": ["google"],
  "rules": {
    "linebreak-style": ["error", "windows"]
  },
  "env": {
    "es6": true
  }
}

テストコードの作成

test.js というファイル名でテストコードを作成します。Google スタイルガイドでは、文字列にはシングルクォートを使用し、文末にはセミコロンが必要です。

// eslint-disable-next-line valid-jsdoc
/**
 * @add
 */
function add(x, y) {
  return x + y
}
document.write(add("Hello", "World"));

ESLint で自動整形

以下のコマンドを実行すると、ルールに従ってコードが自動修正されます。

eslint --fix test.js

整形後のコード:

// eslint-disable-next-line valid-jsdoc
/**
 * @add
 */
function add(x, y) {
  return x + y;
}
document.write(add('Hello', 'World'));

変更点:

• 文末にセミコロン（;）が追加された
• ダブルクォート（"）がシングルクォート（'）に変更された

まとめ

以上で ESLint による JavaScript コードの自動整形は完了です。

• ←前へ
• 次へ→