React Nativeでアプリを開発する中でコードのスタイルを統一するため、eslintをプロジェクトに導入しました。中括弧の前後にスペースを追加するなど、細かいルールはファイルを保存するときに自動で整形するようVisual Studio Code (Mac)上で設定する方法を紹介します。
ここで利用するプロジェクトは、”react-native init <project-name>”コマンドを利用して生成したプロジェクトですが、”create-react-native-app <project-name>”コマンドのような別のコマンドを使って生成したプロジェクトにも適用できるはずです。
目次
１．プロジェクトへのeslintの導入
まず、次のコマンドを実行し、必要なモジュールをプロジェクトにインストールします。
npm install --save-dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y babel-eslint
２．設定ファイルの生成
次のコマンドを実行して、設定ファイル.eslintrc.jsonを生成します。1行目を実行すると、いくつか質問されます。例えば、パブリックなスタイルガイドを利用するか、利用する場合はどれを利用するか、Reactを使っているか、設定ファイルの形式を何にするかです。
今回の場合、下記のように”>”がついた項目を選択しました。
# eslint --init ? How would you like to configure ESLint? ❯ Use a popular style guide Answer questions about your style Inspect your JavaScript file(s) ? Which style guide do you want to follow? (Use arrow keys) ❯ Airbnb (https://github.com/airbnb/javascript) Standard (https://github.com/standard/standard) Google (https://github.com/google/eslint-config-google) ? Do you use React? (y/N) y ? What format do you want your config file to be in? JavaScript YAML ❯ JSON
この結果、.eslintrc.jsonというファイルが生成され、中身は次のようになっていると思います。
{
"extends": "airbnb"
}
３．.eslintrc.jsonの編集
生成されたファイルをnodeやes6の予約語がエラーとして認識されないように下記のように書き換えます。
{
"env": {
"node": true,
"browser": true,
"es6": true
},
"parser": "babel-eslint",
"extends": "airbnb"
}
以上で、eslintのプロジェクトへの導入は完了になります。さらに、Visual Studio Codeでプロジェクトを開くと、次のように問題として、eslintのルール違反が表示されるようになります。
４．Visual Studio Codeの設定 (2020/3/23変更)
次にVisual Studio Codeでファイルを保存したタイミングでeslintで定義されたスタイルに自動整形する設定を行います。
まず、メニューバーを「Code > 基本設定 > 設定」とたどって設定画面を開きます。そして、次の2つの設定を追加します。
"eslint.enable": true, "eslint.autoFixOnSave": true,
これにより、適切なスタイルが自動的に適用されて保存されます。(2020/3/23 削除)
この方法ではうまく設定できなくなっていたので修正します。
まず、Visual Studio CodeにESLintのプラグインをインストールします。
次に、「Code > 基本設定 > 設定」とたどっていき、開いたsettings.jsonを次のように編集します。
{
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll": true
}
}
これにより、editor内にあるESLintの基本ルールに基づいたチェックではなく、3で定義した.eslint.jsonに基づいたルールで自動的にフォーマットしてくれるようになります。
余談: 個別に除外ルールを設定
例えば、このままの設定だと、.jsという拡張子のファイルないにJSXを記述するとeslintはエラーを返します。
それを許容するため、このルールを除外する場合は、.eslintrc.jsonファイルを次のように修正します。
{
....
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
}
}
ここまでのソースコードはこちらにおいてあります。
参考サイト
