React+ESLint+Prettier+VSCode

VSCodeでReactのESLintとPrettierを設定する方法です。春先に下書きして投稿し忘れていた記事ですが、せっかくなので投下しておきます。

⚠以降の注意点

• あらかじめReactの開発環境を整えてあるものとします
• 開始時はVSCodeのsetting.jsonにある自動フォーマットを切っておいてください
• カレントディレクトリがプロジェクトのルートにいるとして解説しています

ESLint

ESLintはJavaScriptのLinterです。プログラムのスタイルを分析します🔎

まずESLintをグローバルにインストールします。初期化を行うとディレクトリ内に.eslintrcが作成されますが、このグローバルコマンドの実行時に、プロジェクト用のeslintパッケージも自動でインストールしてくれます。

# インストール
yarn add global eslint

# 初期化・対話式で進む（各々の環境に合わせて答えます）
eslint --init

.eslitrcを設定します。

module.exports = {
  parser: "babel-eslint",
  env: {
    browser: true,
    es6: true,
    jest: true
  },
  extends: ["airbnb"],
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly"
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 2018,
    sourceType: "module"
  },
  plugins: ["react"],
  rules: {
    /* jsx, jsを許可 */
    "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
    /* thisを介したpropsの警告無効化 */
    "react/no-this-in-sfc": 0,
    /* propsなどを直接使用可能にする */
    "react/destructuring-assignment": 0,
    /* jsxを1行で記述しなくてもよくする */
    "react/jsx-one-expression-per-line": 0,
    /* prop-typesによるバリデーション */
    "react/prop-types": 0,
    // devDependencies（外部モジュール）のインポートをコードに含めるのを許可
    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
  }
};

デフォルトルールはeslint: recommendedという規約ですが、広く使われているAirbnbのスタイルガイドをインストールします。

yarn add babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react --dev

Lint自体は以下で実行できます。

## ローカルパッケージのeslintを使う場合
./node_modules/.bin/eslint [filename]

## グローバルパッケージのeslintを使う場合
eslint [filename]

Prettier

Prettierはコードフォーマッターです。グローバルにインストールします。

yarn global add prettier

これでprettier --write [file]でファイルを整形できます。

次にPrettierにESLintのルール（Airbnb）を使用して、Linterを実行したときにPritteirのエラーも表示できるようにします。

yarn add eslint-config-prettier eslint-plugin-prettier --dev

.eslintrc.jsを編集します。extendsとpluginとrulesを編集しました。

module.exports = {
  parser: "babel-eslint",
  env: {
    browser: true,
    es6: true,
    jest: true
  },
  extends: ["airbnb", "prettier", "prettier/react"],
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly"
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 2018,
    sourceType: "module"
  },
  plugins: ["prettier", "react"],
  rules: {
    /* prittierのルール */
    "prettier/prettier": ["error"],
    /* jsx, jsを許可 */
    "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
    /* thisを介したpropsの警告無効化 */
    "react/no-this-in-sfc": 0,
    /* propsなどを直接使用可能にする */
    "react/destructuring-assignment": 0,
    /* jsxを1行で記述しなくてもよくする */
    "react/jsx-one-expression-per-line": 0,
    /* prop-typesによるバリデーション */
    "react/prop-types": 0,
    // devDependencies（外部モジュール）のインポートをコードに含めるのを許可
    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
  }
};

.prettierrcを作成して以下を記述します。Prittierの整形ルールです。

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 70,
}

これで、eslint [filename]と実行すれば、ESLintに加えてPrettierの整形ルールにあっていないものもエラーとして表示されるようになります。

VSCode

現状はターミナルからコマンドを実行する必要があり、利便が悪いです。VSCodeを使い効率を良くしましょう。

方法は簡単で、ESLintとPrettierの拡張をインストールするだけです！これでコマンド不要で開いているファイルすべてをLinterに介してくれます。

更に保存時に自動でフォーマットさせるには、settings.jsonに以下を追加します。

/**
 * Prettier
 * @formatOnSave 保存時にフォーマットするのを許可
 */
"editor.formatOnSave": true,
"[javascript]": {
  "editor.formatOnSave": true
},

以上です。vim拡張を入れている場合、:wで保存するときに稀にフォーマットされないことがありますが、エディタ自体の保存ctrl + sを有効にしておくことで自分は対処しています。