Visual Studio Codeでeslintを使った自動整形

React Nativeでアプリを開発する中でコードのスタイルを統一するため、eslintをプロジェクトに導入しました。中括弧の前後にスペースを追加するなど、細かいルールはファイルを保存するときに自動で整形するようVisual Studio Code (Mac)上で設定する方法を紹介します。

ここで利用するプロジェクトは、”react-native init <project-name>”コマンドを利用して生成したプロジェクトですが、”create-react-native-app <project-name>”コマンドのような別のコマンドを使って生成したプロジェクトにも適用できるはずです。

1.プロジェクトへのeslintの導入

まず、次のコマンドを実行し、必要なモジュールをプロジェクトにインストールします。

2.設定ファイルの生成

次のコマンドを実行して、設定ファイル.eslintrc.jsonを生成します。1行目を実行すると、いくつか質問されます。例えば、パブリックなスタイルガイドを利用するか、利用する場合はどれを利用するか、Reactを使っているか、設定ファイルの形式を何にするかです。

今回の場合、下記のように”>”がついた項目を選択しました。

この結果、.eslintrc.jsonというファイルが生成され、中身は次のようになっていると思います。

3..eslintrc.jsonの編集

生成されたファイルをnodeやes6の予約語がエラーとして認識されないように下記のように書き換えます。

以上で、eslintのプロジェクトへの導入は完了になります。さらに、Visual Studio Codeでプロジェクトを開くと、次のように問題として、eslintのルール違反が表示されるようになります。

4.Visual Studio Codeの設定

次にVisual Studio Codeでファイルを保存したタイミングでeslintで定義されたスタイルに自動整形する設定を行います。

まず、メニューバーを「Code > 基本設定 > 設定」とたどって設定画面を開きます。そして、次の2つの設定を追加します。

これにより、適切なスタイルが自動的に適用されて保存されます。

余談: 個別に除外ルールを設定

例えば、このままの設定だと、.jsという拡張子のファイルないにJSXを記述するとeslintはエラーを返します。

それを許容するため、このルールを除外する場合は、.eslintrc.jsonファイルを次のように修正します。

ここまでのソースコードはこちらにおいてあります。

参考サイト

スポンサーリンク
スポンサーサイト
スポンサーサイト

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサーサイト