Airbnb JavaScript スタイルガイドで ESLint を使用する方法

Airbnb スタイルガイドは、クリーンで一貫性のあるコードを書くための一連のガイドラインです。2012 年にリリースされて以来、JavaScript プロジェクトで最も人気のあるスタイル ガイドの 1 つになりました。

インデント、コメント、行の最大長、変数の命名規則、引用符、および関数定義に関するさまざまなスタイル ルールを適用することにより、保守が容易な一貫したコードを作成するための一連のガイドラインを提供します。JavaScript プロジェクトで Airbnb スタイル ガイドを設定するには、ESLint などのリンティング ツールを使用する必要があります。

ESLintをインストールする

ESLint はオープンソースの JavaScript リンティング ツールで、開発者が問題を見つけて修正することでクリーンなコードを作成するのに役立ちます。構文エラー、無効なパラメーター、未定義の変数など、コードの問題を検出できます。– -fixタグを付けて ESLint を実行すると、コード内の修正可能な問題が自動的に特定されて修正されるため、時間を節約できます。

ESLint を使用して、Airbnb スタイル ガイドのようなスタイル ガイドを適用できます。

開始するには、ターミナルで次のコマンドを実行して、ESLint を開発依存関係としてインストールします。

npm install --save-dev eslint eslint-config-airbnb


次に、ESLint を初期化します。

npx eslint --init


プロジェクトに関する質問が表示されます。プロンプトが表示された場合:

? How would you like to use EsLint?


次のオプションを選択します。

> To check syntax, find problems and enforce code style


次のプロンプトが表示されるまで、プロジェクトに従って次の質問に答えてください。

? How would you like to define a style for your project?


次に、次のように答えます。

> Use a popular style guide


次のプロンプトで Airbnb スタイル ガイドを選択します。

? Which style guide do you want to follow?
> Airbnb: <https://github.com/airbnb/javascript>


最後に、次のプロンプトで「はい」を選択して、必要な依存関係をインストールします。

インストールが完了すると、フォルダーのルートに.eslintsrc.jsonファイルが作成されます。

Airbnb スタイルガイドのカスタマイズ

Airbnb スタイル ガイドでは、カスタマイズが可能です。.eslintsrc.json構成ファイルで、追加のルールを追加したり、既存のルールをオーバーライドしたりできます。

たとえば、1 行あたり最大 80 文字を許可するには、ルール セクションにこのルールを追加できます。

{
  "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
  "rules": {
    "max-len": ["error", { "code": 80 }]
  }
}


package.json で ESLint を実行する

package.jsonファイルにスクリプトを追加して、ESLint を実行します。

"scripts": {
   "lint": "eslint"
}


このコマンドを実行して、lint スクリプトを実行し、lint エラーをチェックします。

npm run lint


–fixフラグを使用して、コードの問題を修正するスクリプトを追加することもできます。

"scripts": {
    "lint": "eslint",
    "lint:fix": "npm run lint -- --fix"
  },


ターミナルでnpm run lint:fixを実行すると、リンターが修正できる問題があれば自動的に修正されます。

VS Code での保存時にリンティングを有効にする

コードを lint するたびにスクリプトを実行するのは面倒です。以下の手順に従って、VS Code での保存時にリンティングを有効にします。

1. VS Code ウィンドウの左側にある [拡張機能] タブに移動します。
2. ESLint 拡張機能を検索してインストールします。
3. 拡張機能がインストールされたら、VS Code の設定を開きます ([ファイル] > [設定] > [設定] を選択するか、Ctrl +, を押します)。
4. 設定エディターで、「保存時のコード アクション」を検索します。
5. 「settings.json で編集」をクリックし、以下の設定をsettings.jsonファイルに追加します。

{
 "editor.codeActionsOnSave": {


    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript"],
  "eslint.run": "onSave",
}


これにより、保存時に ESLint 拡張機能がコードを自動的に修正できるようになります。

スタイル ガイドを使用する利点

Airbnb スタイル ガイドのようなスタイル ガイドを使用する主な利点は、一貫したコード ベースを維持できることです。これは、開発者がコード ベースを簡単に理解して貢献できるため、チームで役立ちます。また、ベスト プラクティスを適用し、一般的なコーディングの間違いを回避するのにも役立ちます。