reactのbulletproofを導入した話

0. はじめに

Reactを使ったプロジェクトを始めるにあたり、経験がまだまだ浅いのもあってコーディング規約などを調べたりベストプラクティスを調べたりしていました。
そこで出てきたのがbulletproof-reactと呼ばれるものでした。

bulletproofのいいところは以下の記事がまとめてくれています。

目的

今回はbulletproofを参考にして、VScodeでReactの環境構築をしてみた話です。
特にリンターやフォーマッターの設定を導入して、みんなが開発しやすいようにしよう！というのが目的になっています。
意外とつまづきポイントが多かったので誰かの参考になれば....

目次

1. リンター(ESLint)の設定
2. フォーマッター(Prettier)の設定

1. リンター(ESLint)の設定

インストール

リンターとしてESlintを使いましょう、と推奨されているので導入していきます。

以下bulletproofの引用

ESLint is a linting tool for JavaScript. By providing specific configuration defined in the.eslintrc.js file it prevents developers from making silly mistakes in their code and enforces consistency in the codebase.

bash

npm install --save-dev eslint@latest

VSCodeの拡張機能も入れます。

設定ファイル

ESLintではコード解析時の設定項目を自分でカスタムすることができます。
この設定ファイルが共有されてあれば、開発者を問わず一貫性のあるコードになります。
bulletproofではこの設定ファイルの参考例が載っているのでこれを真似してみます。

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
    es6: true,
  },
  parserOptions: { ecmaVersion: 8, sourceType: 'module' },
  ignorePatterns: ['node_modules/*'],
  extends: ['eslint:recommended'],
  overrides: [
    {
      files: ['**/*.ts', '**/*.tsx'],
      parser: '@typescript-eslint/parser',
      settings: {
        react: { version: 'detect' },
        'import/resolver': {
          typescript: {},
        },
      },
      env: {
        browser: true,
        node: true,
        es6: true,
      },
      extends: [
        'eslint:recommended',
        'plugin:import/errors',
        'plugin:import/warnings',
        'plugin:import/typescript',
        'plugin:@typescript-eslint/recommended',
        'plugin:react/recommended',
        'plugin:react-hooks/recommended',
        'plugin:jsx-a11y/recommended',
        'plugin:prettier/recommended',
        'plugin:testing-library/react',
        'plugin:jest-dom/recommended',
      ],
      rules: {
        'no-restricted-imports': [
          'error',
          {
            patterns: ['@/features/*/*'],
          },
        ],
        'linebreak-style': ['error', 'unix'],
        'react/prop-types': 'off',

        'import/order': [
          'error',
          {
            groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object'],
            'newlines-between': 'always',
            alphabetize: { order: 'asc', caseInsensitive: true },
          },
        ],
        'import/default': 'off',
        'import/no-named-as-default-member': 'off',
        'import/no-named-as-default': 'off',

        'react/react-in-jsx-scope': 'off',

        'jsx-a11y/anchor-is-valid': 'off',

        '@typescript-eslint/no-unused-vars': ['error'],

        '@typescript-eslint/explicit-function-return-type': ['off'],
        '@typescript-eslint/explicit-module-boundary-types': ['off'],
        '@typescript-eslint/no-empty-function': ['off'],
        '@typescript-eslint/no-explicit-any': ['off'],

        'prettier/prettier': ['error', {}, { usePrettierrc: true }],
      },
    },
  ],
};

ここで、この設定ファイルをそのまま使おうとするとESLintがエラーを吐きました。
どうやら設定ファイルの記法がeslintrcからFlatConfigというものに変わったらしく、設定ファイルを書き換える必要があるみたいです。

書き換えたファイルが以下の通り。

eslint.config.mjs

import js from '@eslint/js';
import { FlatCompat } from '@eslint/eslintrc';
import typeScriptESLintParser from '@typescript-eslint/parser';
import globals from 'globals';

const compat = new FlatCompat();

export default [
  // 推奨設定
  js.configs.recommended,
  // lint対象外のファイル
  {
    ignores: ['**/node_modules/**'],
  },
  // lint対象ファイル
  {
    files: ['**/*.ts', '**/*.tsx'],
  },
  // lint設定
  {
    rules: {
      'no-restricted-imports': [
        'error',
        {
          patterns: ['@/features/*/*'],
        },
      ],
      'linebreak-style': ['error', 'unix'],
      'react/prop-types': 'off',
      'import/order': [
        'error',
        {
          groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object'],
          'newlines-between': 'always',
          alphabetize: { order: 'asc', caseInsensitive: true },
        },
      ],
      'import/default': 'off',
      'import/no-named-as-default-member': 'off',
      'import/no-named-as-default': 'off',
      'react/react-in-jsx-scope': 'off',
      'jsx-a11y/anchor-is-valid': 'off',
      '@typescript-eslint/no-unused-vars': ['error'],
      '@typescript-eslint/explicit-function-return-type': ['off'],
      '@typescript-eslint/explicit-module-boundary-types': ['off'],
      '@typescript-eslint/no-empty-function': ['off'],
      '@typescript-eslint/no-explicit-any': ['off'],
      'prettier/prettier': ['error', {}, { usePrettierrc: true }],
    },
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
        ...globals.es6,
        myCustomGlobal: 'readonly',
      },
      parser: typeScriptESLintParser,
    },
  },
  ...compat.extends(
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/typescript',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:prettier/recommended',
    'plugin:testing-library/react',
    'plugin:jest-dom/recommended'
  ),
];

2. フォーマッター(Prettier)の設定

フォーマッターの設定は非常に簡単でインストールと拡張機能を入れて、設定ファイルをあげるだけです。

bash

npm i -D prettier

拡張機能

設定ファイル

.prettierrc.json

{
    "singleQuote": true,
    "trailingComma": "es5",
    "printWidth": 100,
    "tabWidth": 4,
    "useTabs": false
}

3. 終わりに

とりあえずコードを書くときの設定のベストプラクティスは導入できました。
bulletproofには、他にもテストに関するベストプラクティスが載っているので今後も参考にしたいと思います。