はじめに

Reactのセットアップを紹介します。

続いて、TypeScript, Eslint, Prettierの設定もしていきます。

Reactのプロジェクト作成には、爆速で有名なViteを使ってセットアップしていきます。

構築環境

tools	version
Vite	3.2.0
React	18.2.0
ESLint	8.0.1
Prettier	2.7.1

目次

Viteを使ってReactプロジェクトを作成
Eslint 初期設定
Prettier 設定
eslint-config-prettier 設定
エラー解決
husky 導入

Viteを使ってReactプロジェクトを作成

Viteは爆速です。

開発時はバンドルがないので開発サーバーの起動が早い。
Hot Module Replacementが修正分だけを適応するので動作が早い。

プロジェクトを作成したいディレクトリで、下記コマンドを走らせます。

$ yarn create vite

プロジェクトの設定を入力・選択していきます。

Project name
Select a framework
Select a variant

このようになれば作成できました。

プロジェクトが作成できたら、プロジェクトのディレクトリに移動しておいてください。
node_modulesの作成や、サーバーが立ち上がることも確認しておきます。

$ cd sample-app

$ yarn

$ yarn dev

ちなみに、Viteが使うローカルサーバー(localhost)のポートはデフォルトで5173になります。

Eslint 初期設定

Eslintの初期設定を行なっていきます。

$ npx eslint --init

設定について質問されるので、選択していきます。

How would you like to use ESLint?
What type of modules does your project use?
Which framework does your project use?
Does your project use TypeScript?
Where does your code run?
How would you like to define a style for your project?
Which style guide do you want to follow?

今回は、Standardを選択しています。1番厳しいstyle guideとして、airbnbを選択することもあります。
What format do you want your config file to be in?

今回はJavaScriptを選択していますが、お好きなものを選択してください。

Would you like to install them now?
Which package manager do you want to use?

設定が完了できたら、.eslintrc.cjsが作成されていることを確認してください。

sample-app
  ├── node_modules
  ├── public
  ├── src
  ~
+ └── .eslintrc.cjs

.eslintrc.cjsを編集していきます。

Reactのバージョンを指定することで、Eslintがそのルールに合わせてくれます。

今回はReactのバージョンを18.2.0に設定しています。

.eslintrc.cjs

  module.exports = {
    env: {
      browser: true,
      es2021: true,
    },
    extends: [
      'plugin:react/recommended',
      'standard-with-typescript',
    ],
    overrides: [],
    parserOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
    },
    plugins: ['react'],
    rules: {
    },
+   settings: {
+     react: {
+       version: '18.2.0',
+     },
+   },
  };

次に、.eslintignoreファイルを作成します。

$ touch .eslintignore

sample-app
  ├── node_modules
  ├── public
  ├── src
  ~
  ├── .eslintrc.cjs
+ └── .eslintignore

作成後、.eslintignoreを編集していきます。

編集する中身についてはご自身のプロジェクトによって変わると思いますので、今回は参考として例を載せておきます。

.eslintignore

node_modules
yarn.lock
public

Prettier 設定

Prettierを導入していきます。

下記コマンドを入力して開発環境にPrettierを入れてください。

$ yarn add --dev prettier

導入が完了したら、.prettierrcファイルを作成します。

$ touch .prettierrc

sample-app
  ├── node_modules
  ├── public
  ├── src
  ~
  ├── .eslintrc.cjs
  ├── .eslintignore
+ └── .prettierrc

作成後、.prettierrcを編集していきます。

編集する中身についてはご自身のプロジェクトによって変わると思いますので、今回は参考として例を載せておきます。

.prettierrc

{
  "endOfLine": "lf",
  "printWidth": 80,
  "tabWidth": 2,
  "trailingComma": "es5",
  "singleQuote": true,
  "jsxSingleQuote": true,
  "semi": true
}

続いて、.prettierignoreファイルを作成します。

$ touch .prettierignore

sample-app
  ├── node_modules
  ├── public
  ├── src
  ~
  ├── .eslintrc.cjs
  ├── .eslintignore
  ├── .prettierrc
+ └── .prettierignore

作成後、.prettierignoreを編集していきます。

.prettierignoreの中身については.eslintignoreと同じにしておきます。

こちらもご自身のプロジェクトに合わせて編集してください。

.prettierignore

node_modules
yarn.lock
public

eslint-config-prettier 設定

下記コマンドを入力して、eslint-config-prettierを導入していきます。

Eslintにもコードフォーマット機能がすでにあるのですが、Prettierにコードフォーマットを任せるので、競合を防ぐために、eslint-config-prettierが必要になります。

$ yarn add --dev eslint-config-prettier

導入が完了したら、.eslintrc.cjsを編集していきます。

extendsにprettierを追加しました。

prettierの追加は、extends内の最後に追加しないと設定が上書きされないことに注意してください。

.eslintrc.cjs

  module.exports = {
    env: {
      browser: true,
      es2021: true,
    },
    extends: [
      'plugin:react/recommended', 
      'standard-with-typescript', 
+     'prettier'
    ],
    overrides: [],
    parserOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
    },
    plugins: ['react'],
    rules: {
    },
    settings: {
      react: {
        version: '18.2.0',
      },
    },
  };

以上で、TypeScript, Eslint, Prettierの設定が完了しました。

package.jsonファイルの中身を確認しておきましょう。

package.json

{
  "name": "sample-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.22",
    "@types/react-dom": "^18.0.7",
    "@vitejs/plugin-react": "^2.2.0",
    "eslint": "^8.0.1",
    "eslint-config-prettier": "^8.5.0",
    "eslint-config-standard-with-typescript": "^23.0.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-n": "^15.0.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-react": "^7.31.10",
    "prettier": "^2.7.1",
    "typescript": "*",
    "vite": "^3.2.0"
  }
}

一度、Eslintを走らせてみましょう。

`Eslint`でチェック

下記コマンドを入力して、Eslintを走らせます。

$ ./node_modules/.bin/eslint src/App.tsx

$ ~
$ ~
$ Oops! Something went wrong! :(

$ ESLint: 8.26.0

$ Error: Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
$ ~

エラーの内容としては、parserOptions.projectにプロパティを入れてねって言われています。

.eslintrc.cjsを編集していきます。

.eslintrc.js

  module.exports = {
    env: {
      browser: true,
      es2021: true,
    },
    extends: [
      'plugin:react/recommended',
      'standard-with-typescript',
      'prettier',
    ],
    overrides: [],
    parserOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
+     project: ['./tsconfig.json'],
    },
    plugins: ['react'],
    rules: {
    },
    settings: {
      react: {
        version: '18.2.0',
      },
    },
  };

これでtsconfig.jsonのルールに沿ってEslintが走ってくれるので、エラーは解決します。

再度、Eslintを走らせてみます。

まだコーディング規約に対してエラーが出てますので、解決していきましょう。

.eslintrc.js

  module.exports = {
    env: {
      browser: true,
      es2021: true,
    },
    extends: [
      'plugin:react/recommended',
      'standard-with-typescript',
      'prettier',
    ],
    overrides: [],
    parserOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      project: ['./tsconfig.json'],
    },
    plugins: ['react'],
    rules: {
+     'react/react-in-jsx-scope': 'off',
    },
    settings: {
      react: {
        version: '18.2.0',
      },
    },
  };

ほかにもエラーが出ている場合はご自身で解決してみてください。

また、Eslintのルールについては、ご自身のプロジェクトに合わせて、中身を編集・追加してください。

最後に

以上、Reactの環境構築に加えて、TypeScript, Eslint, Prettierの導入について紹介しました。

フロントの技術は日進月歩なので、やり方が古いや間違ってるといったことがあればコメントいただきたいです。

最後まで読んでいただきありがとうございました。

参照