Zenn
📘

React+TypeScriptをPrettier+ESLint+Stylelintでコードフォーマットと品質チェックをする

2024/05/19に公開
React
ESLint
Prettier
tech

はじめに

VSCodeでESLintでPrettierを使う解説は多いですが、Prettierにコードフォーマットを行わせ、ESLint（+Stylelint）で品質チェックをする構成は見かけなかったのと、ESLintの新しい設定であるflat configを利用しているものもなかったので解説します。

考えとしてはPrettierの以下の記事になります。
Prettier vs. Linters

最終構成のプロジェクトは以下にアップロードしてあります。
https://github.com/yooontheearth/react-lint-settings

Vite + React + TypeScript

最初にViteでTypeScriptのReactプロジェクトを作成します。

npm create vite@latest my-react-app -- --template react-ts

プロジェクトが生成されたらESLintが初期で入っているので一旦関連するパッケージとともに削除します。

npm uninstall eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react-refresh eslint-plugin-react-hooks

.eslintrc.cjsも不要なので削除します。

Prettier

Prettierをインストールします。

npm install --save-dev --save-exact prettier

.prettierrcファイルをプロジェクトルートに以下内容で追加します。

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true,
  "endOfLine": "auto"
}

設定内容は以下を参照ください。
Prettier Options

ESLint

ESLintをインストールします。

npm init @eslint/config@latest --save-dev

色々聞かれるので要件に合わせて適当に答えます。

Need to install the following packages:
@eslint/create-config@1.1.1
Ok to proceed? (y) y
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ The React plugin doesn't officially support ESLint v9 yet. What would you like to do? · 9.x
√ Does your project use TypeScript? · typescript
√ Where does your code run? · browser

この時点で以下を実行すると

npx eslint .

以下のようなエラーが表示されます。がTypeScriptでは不要なのでこのルールは無効化します。

error 'React' must be in scope when using JSX

eslint.config.jsを以下内容に更新します。

export default [
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...fixupConfigRules(pluginReactConfig),
  {
    rules: {
        'react/react-in-jsx-scope':'off',
    },
  }
];

これで上記のエラーは表示されなくなります。

Stylelint

Stylelintをインストールします。サンプル作成時にeslint@9.3.0周りでバージョンの依存関係エラーが発生したので--force指定で強引にインストールします。

npm init stylelint --save-dev --force

この時点で以下を実行すると

npx stylelint "**/*.css"

以下のようなエラーが表示されます。

src/App.css
14:1 ✖ Expected empty line before rule rule-empty-line-before
25:3 ✖ Expected empty line before rule rule-empty-line-before
src/index.css
6:3 ✖ Unexpected empty line before declaration declaration-empty-line-before
7:10 ✖ Expected modern color-function notation color-function-notation

拡張機能

VSCodeで以下の拡張機能をインストールします。Crl+Pでクイックサーチを開き、そこに以下をそれぞれコピペしてインストールしてください。

  • ext install esbenp.prettier-vscode
  • ext install dbaeumer.vscode-eslint
  • ext install stylelint.vscode-stylelint

Prettierと衝突するルールを無効化する

eslint-config-prettierでPrettierと衝突するルールを無効化します。これもStylelintと同じ理由で--force指定します。

npm install --save-dev eslint-config-prettier --force

eslint.config.jsを以下内容に更新します。

import eslintConfigPrettier from 'eslint-config-prettier'

export default [
    { languageOptions: { globals: globals.browser } },
    pluginJs.configs.recommended,
    ...tseslint.configs.recommended,
    ...fixupConfigRules(pluginReactConfig),
    eslintConfigPrettier,
    {
        rules: {
            'react/react-in-jsx-scope': 'off',
        },
    }
]

VSCode設定

.vscode/settings.jsonを作成し以下内容をコピペします。

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll": "explicit"
    },
    "eslint.experimental.useFlatConfig": true
}

特にeslintのflat configはまだExperimental段階なのでこの設定をtrueにしておかないとESLintがVSCode上で動作しません。

終わりに

ここまでの設定でVSCode上でLintingが有効になり、ファイル保存時にPrettierでコードフォーマットが行われるようになりました。

最後にLintingをまとめて確認できるようにpackage.jsonのコマンドも更新しておきましょう。

"scripts": {
    // 省略
    "lint": "eslint .",
    "style": "stylelint \"**/*.css\""
    // 省略
},

これでnpm run lint, npm run styleでコードの品質チェックが行えるようになりました。

Discussion