npm で React(TypeScript) に ESLint と Prettier を導入

概要

React(TypeScript) に npm で ESLint と Prettier を導入する手順を記載。
ESLint と Prettier の詳細な設定に関しては記載していない。

環境

• Windows 10 Home
• Node 16.14.0
• npm 8.5.1
• npx 8.5.1
• React ^17.0.2

その他パッケージの依存関係、ESLint と Prettier 関連のファイル内容は別途末尾に記載

手順1 Reactの環境を作成

TypeScript を使用した React の雛形アプリを作成する。

npx create-react-app . --template typescript

作成後、src ディレクトリの配下にあるファイルを編集して以下の App.tsx とi ndex.tsx の2つのみにする。

App.tsx

function App() {
  return <p>React App</p>;
}

export default App;

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
);

これでReactの事前準備は完了です。

手順2 ESLintの導入

https://eslint.org/
ESLint をインストールする。

npm install eslint --save-dev

ESLintのコンフィグファイルの雛形を作成する。今回は対話形式で作成。

npm init @eslint/config

今回は問いに対する解答を以下の通りにする。

√ How would you like to use ESLint?
❯ To check syntax, find problems, and enforce code style

√ What type of modules does your project use?
❯ JavaScript modules (import/export)

√ Which framework does your project use?
❯ React

√ Does your project use TypeScript?
Yes

√ Where does your code run?
❯ Browser

√ How would you like to define a style for your project?
❯ Use a popular style guide

√ Which style guide do you want to follow?
❯ Airbnb (https://github.com/airbnb/javascript)

√ What format do you want your config file to be in?
❯ JavaScript

√ Would you like to install them now with npm?
Yes

node_modules 内で ESLint が実行されないように、.eslingignore を作成して以下を記述

node_modules/

src ディレクトリ配下の全ファイル対して ESLint を CLI で実行する。

npx eslint --fix ./src/**

このときに表示されるエラーの解消法

• 'React' must be in scope when using JSX https://stackoverflow.com/questions/42640636/react-must-be-in-scope-when-using-jsx-react-react-in-jsx-scope
• JSX not allowed in files with extension '.tsx'
  上記のサイト、stackoverflowに記載
• Unable to resolve path to module './App' https://stackoverflow.com/questions/55198502/using-eslint-with-typescript-unable-to-resolve-path-to-module
• Missing file extension "tsx" for "./App" https://stackoverflow.com/questions/59265981/typescript-eslint-missing-file-extension-ts-import-extensions

4つ目のエラーを解消する際に必要だった eslint-config-airbnb-typescript を参考として記載
https://www.npmjs.com/package/eslint-config-airbnb-typescript

手順3 Prettierの導入

https://prettier.io/
ライブラリ prettier をインストールする。

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

https://github.com/prettier/eslint-config-prettier
eslint-config-prettier をインストールする。

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

ESLint の設定ファイルに追記（.eslintrc.jsの例）

.eslintrc

extends: [
  'その他の機能',
  'prettier', // 追記
],

ESLint と Prettier はルールが競合することがある。
eslint-config-prettier を適用することで競合するルールを無効化して調整するという性質上、extends の最後に追加する。

ちなみに eslint-config-prettier は、競合しているルールがないかチェックする CLI ツールを持っていたりするそうです。

CLI で eslint-config-prettier を実行する。

npx eslint-config-prettier ./src/**

実行結果が以下のようになっていれば問題はありません。

No rules that are unnecessary or conflict with Prettier were found.

最後に node_modules 内で Prettier が実行されないように、.prettierignore を作成して以下を記述する。

.prettierignore

node_modules

その他参考記事

https://qiita.com/h-yoshikawa44/items/14a114da903fb0eff886

作成したファイル

package.json

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.1",
    "@types/node": "^16.11.26",
    "@types/react": "^17.0.43",
    "@types/react-dom": "^17.0.14",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^6.3.0",
    "react-scripts": "5.0.0",
    "typescript": "^4.6.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint": "^8.14.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.29.4",
    "eslint-plugin-react-hooks": "^4.4.0",
    "prettier": "2.6.2"
  }
}

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
    'airbnb-typescript',
    "prettier",
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json',
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: [
    'react',
    '@typescript-eslint',
  ],
  rules: {
    "react/react-in-jsx-scope": "off",
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", '.ts', '.tsx'] }],
  },
  settings: {
    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
};

.eslintignore

node_modules/

.prettierrc

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 120,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false
}

.prettierignore

node_modules