ESLint+PrettierでAirbnb JavaScript Styleを適用する

今回は有名なコーディングスタイルの一つであるAirbnb JavaScript Styleを適用し、JavaScriptで書かれたコードをスタイルにそって書けるようにする方法を紹介。

今回の対象読者

ESLint・Prettierの基本的な使い方を使っていること
Airbnb JavaScript Styleをこちらで書いたコードに実際に適用する方法を知りたい人

前提条件

PCにバージョン10.12.0以上のNode.jsインストール済みであること
Visual Studio Code（以下VSCode）を使用していること
VSCodeにESLintとPrettierの拡張機能をインストールしていること

サンプルコード

github.com

Airbnb JavaScript Styleって？

宿泊施設提供サービスで知られるAirbnbがGithub上でオープンに公開しているコーディングスタイル。コーディングスタイルの中でも最も人気で実際にESLintに専用の設定が提供されているほどだが、これについては後述する。

github.com

日本語版はこちら github.com

なお今回はチェック機能を可能にすることが目的なのでAirbnb JavaScript Styleに記載されているルールの詳細については本記事では取り上げません。

主なメリット

ほぼESLintとPrettierと同じです。巨人の肩にのることでJavaScriptのコードをある程度の基準までもっていけるメリットはかなり大きいです。

では実際にスタイルを適用してみる。

今回使用した動作環境

Windows10 Home Version1903の

Ubuntu 18.04 LTS（WSL1）

Airbnb JavaScript StyleをESLint+Prettierに設定するまで

1.必要なnpmパッケージをインストール

まずpackage.jsonを生成するため、次のコマンドを入力する。-yをつけることで質問に回答する必要もなくすぐにファイルを生成することができる。（他のnpmパッケージをインストールする際もそうですが、忘れがちなので覚えておくこと）

npm init -y

ESLintとPrettier本体および併用できるようにするための設定用パッケージをローカルインストールする。

npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier

空白スペースをあけることで複数のパッケージをインストールすることができます。上記コマンドでは以下のnpmパッケージがインストールされています。

- ESlint本体
- Prettier本体
- eslint-plugin-prettier（ESLintと一緒にPrettierのチェックができるようにする）
- eslint-config-prettier（Prettierと設定が被るESLint のフォーマット関係のルールを無効化する）

「eslint-plugin-prettier」と「eslint-config-prettier」はESLintとPrettierの併用に必要になります。これをいれないとお互いの設定が競合してしまい十分な状態で併用することができません。

次にAirbnb JavaScript Styleの設定用npmパッケージをインストールします。

npx install-peerdeps --dev eslint-config-airbnb

インストールが終わったら、パッケージをインストールしたディレクトリの直下に次の2ファイルを用意してください。

.eslintrc.json

{
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "no-console": "off",
    "prettier/prettier": ["error"]
  }
}

.prettierrc

{
  "printWidth": 100,
  "singleQuote": true
}

最後にVSCodeの設定が「"editor.formatOnSave": true」になっているか確認してください。

2.サンプルコードを使ってチェックしてみる

index.jsをサンプルとして用意。

const add=({x, y})=> x+y;console.log(add({x:1, y:2}))

ここまでの時点でディレクトリは以下の画像のファイル構成になっているはずです。*1

f:id:miruoon:20200620141617p:plain

そして問題タブにエラーがでていることを確認。 f:id:miruoon:20200620143354p:plain

エラーの意味としてはこのようなことを言ってます。

.{x:1, y:2}))に;をつけてください
....x+y;と.{x:1, y:2}));の2箇所を改行してください
指示された箇所に空白スペースをいれてください

ということで保存してエラーが出ないようにコードが綺麗にフォーマット化されているか確認します。

const add = ({ x, y }) => x + y;
console.log(add({ x: 1, y: 2 }));

再チェックして何も表示されてなければ問題ないです。

参考記事

ESLint, Prettier & Airbnb Setup · GitHub

良質なプログラミングのチュートリアル動画を投稿しているYoutuberのBrad Traversy氏*2がESLint+PrettierでAirbnb JavaScript Styleを適用する方法をまとめてくれています。ちなみに上の記事で紹介されているコマンドのうち、この記事のようにフレームワークを使わないなら「eslint-plugin-node 」「eslint-config-node」は不要。

dackdive.hateblo.jp

この記事ではESLint+Prettierを併用する際に追加で入れたnpm用パッケージについての説明が詳しく載っています。

次回はVSCode+WSL1でGitを使う方法かWebpack入門記事の予定です。

*1:npmではなくyarnコマンドでインストールした場合はpackage-lock.jsonの代わりにyarn.lockが生成。またGitでソース管理しないならば.gitignoreは不要

*2:氏のCrash Courseシリーズは1時間で終わる上、下手なチュートリアルよりも基本を学習できるので英語がわからなくても動画でやっていることを真似するだけでもおすすめする Traversy Media - YouTube

きままに記録箱

フロントエンドたまに他のはなし