やっとできた、ReactにESLint + Prettier + Stylelintを導入するために参考にした記事

はじめに

JavaScriptにおけるコードチェック・自動整形はESLintとprettierを組み合わせるのが主流らしい。

自分のReactアプリにも導入しようと思い色々ググったが、いろんな情報がありすぎてわからなかった。これはESLintとprettierを組み合わせた導入の仕方が一通りじゃないことに起因するようで、拾い集めた断片的な情報でやろうとするとうまくいかないようだ。

今回は、これを参考に導入したらうまくいったという記事をまとめて紹介（2020年1月時点）。

ESLint概要

さすがにコピペだけで済ませるとまずいと思い、まずはある程度仕組みを理解しようと読んだのがこちら。
Step by Stepで始めるESLint
かなりわかりやすく設定ファイルの書き方を説明してくれている。

もう１つ、多分ESLintについて調べるとすぐに目に留まるのが以下の記事だと思う。
Prettier 入門 ～ESLintとの違いを理解して併用する～
これの通りに導入しようとするもダメだった。さすがに情報が古すぎるのでPrettierとESLintの概要を掴む目的で読むのがいい。

導入

ESLint + Prettier + Stylelintを実際に導入する上で参考にする記事はこれ一つでOK。指示通りにやったらいけた。
VS CodeにPrettier・ESLint・Stylelintを導入してファイル保存時にコードを自動整形させる方法

自分の設定

上記記事をベースに作った最終的な設定ファイルを貼っておく。もし紹介した記事通りにやってもダメだったら参考までに。

eslintrc.js

module.exports = {
    extends: ['google', 'plugin:prettier/recommended'], // Googleのコーディング規約をベースにする
    plugins: ['react'], // React関係のルールを指定するのに必要
    parser: 'babel-eslint', // JSXとかでエラー出るのを回避。env の es6:true もこれにより不要になる
    parserOptions: {
        sourceType: 'module', // import などを使うときに必要
        ecmaFeatures: {
            experimentalObjectRestSpread: true, // 非推奨項目も注意してくれる？（あんまよくわかってない）
            jsx: true,  //JSX を使うときに必要（ reactプラグインいれてるからいらないかも...？ ）
        },
    },
    rules: {
        'no-var': 'error', //varを許可しない
        'no-console': 'off', // console.logがあってもエラーにしない
        'require-jsdoc': 'off', // Docコメントなくてもエラーにしない
        'valid-jsdoc': 'off', // Docコメントの書き方についてとやかくいわせない
        camelcase: ['warn', { properties: 'never' }], // オブジェクトのキーはキャメルじゃなくてよい
        'react/jsx-uses-vars': 1, // これを使うとJSXで使ってる変数がno-useとして認識されるのを防げた
        "react/jsx-uses-react": 1, //Reactをimportしてもno-var-useエラーが出ないように
    },
};

prettierrc.js

module.exports = {
    tabWidth: 4, //インデントのスペース数
    singleQuote: true, //シングルクォートに統一
    trailingComma: 'es5', //末尾のカンマをどうするか: es5に準拠させる。
  };

stylelintrc.js

module.exports = {
    plugins: ['stylelint-scss', 'stylelint-order'], // stylelint-order を使う
    extends: [
      'stylelint-config-standard',  //ベースとなるルール
      'stylelint-prettier/recommended',
    ],
    rules: {
      'order/properties-alphabetical-order': true, //ABC順に並べる
      'at-rule-no-unknown': null, //scss関係のやつ
      'scss/at-rule-no-unknown': true, //scss関係のやつ
    }
  };