← 記事一覧へ

React(TypeScript)プロジェクトの作成方法（Docker、ESLint、Prettier、WebPack）【2/4】

ReactTypeScriptDockerESLintPrettierWebPack

目次

事前準備

以下の記事の内容が完了している前提で本記事を記載しています。

まだの方は、以下から進めてください。

React(TypeScript)プロジェクトの作成方法（Docker、ESLint、Prettier、WebPack）【1/4】 - Reigle 技術ブログ

ESLintの組み込み

以下のコマンドを実行し、ESLintをインストールします。

npm install eslint --save-dev

以下のコマンドを実行して、ESLintの初期設定を行います。

npm init @eslint/config

以下が表示されるので、「y」を入力してエンターを押下します。

※「日本語訳」以下はターミナルには表示されない項目です。

Need to install the following packages:
  @eslint/create-config
Ok to proceed? (y)

=====日本語訳=====
次のパッケージをインストールする必要があります。
  @ eslint / create-config
続行しますか？ （y）

以下が表示されるので、「To check syntax, find problems, and enforce code style」を選択してエンターを押下します。

※「日本語訳」以下はターミナルには表示されない項目です。

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

=====日本語訳=====
？ ESLintをどのように使用しますか？ …
  構文のみを確認するには
  構文をチェックして問題を見つけるには
❯構文をチェックし、問題を見つけ、コードスタイルを適用するには

以下が表示されるので、「JavaScript modules (import/export)」を選択してエンターを押下します。

※「日本語訳」以下はターミナルには表示されない項目です。

? What type of modules does your project use? …
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

=====日本語訳=====
？プロジェクトで使用しているモジュールの種類は何ですか？ …
❯JavaScriptモジュール（インポート/エクスポート）
  CommonJS（必須/エクスポート）
  どれでもない

以下が表示されるので、「React」を選択してエンターを押下します。

※「日本語訳」以下はターミナルには表示されない項目です。

? Which framework does your project use? …
❯ React
  Vue.js
  None of these

=====日本語訳=====
？プロジェクトで使用しているフレームワークはどれですか？ …
❯React
  Vue.js
  どれでもない

以下が表示されるので、「Yes」を選択してエンターを押下します。

※「日本語訳」以下はターミナルには表示されない項目です。

? Does your project use TypeScript? › No / Yes

=====日本語訳=====
？プロジェクトはTypeScriptを使用していますか？ > いいえ / はい

以下が表示されるので、「Browser」を選択してエンターを押下します。

※「日本語訳」以下はターミナルには表示されない項目です。

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

=====日本語訳=====
？コードはどこで実行されますか？ …（<スペース>を押して選択し、<a>を押してすべてを切り替え、<i>を押して選択を反転します）
✔ブラウザ
✔ノード

以下が表示されるので、「Use a popular style guide」を選択してエンターを押下します。

※「日本語訳」以下はターミナルには表示されない項目です。

? How would you like to define a style for your project? …
❯ Use a popular style guide
  Answer questions about your style

=====日本語訳=====
？プロジェクトのスタイルをどのように定義しますか？ …
❯人気のあるスタイルガイドを使用する
  あなたのスタイルについての質問に答える

以下が表示されるので、「Airbnb: https://github.com/airbnb/javascript」を選択してエンターを押下します。

※「日本語訳」以下はターミナルには表示されない項目です。

※これはどれを選択しても問題ありません。

? Which style guide do you want to follow? …
❯ Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

=====日本語訳=====
？どのスタイルガイドに従いたいですか？ …
❯Airbnb：https://github.com/airbnb/javascript
  標準：https：//github.com/standard/standard
  Google：https://github.com/google/eslint-config-google
  XO：https://github.com/xojs/eslint-config-xo

以下が表示されるので、「JavaScript」を選択してエンターを押下します。

※「日本語訳」以下はターミナルには表示されない項目です。

※これはどれを選択しても問題ありません。

? What format do you want your config file to be in? …
❯ JavaScript
  YAML
  JSON

=====日本語訳=====
？設定ファイルをどのような形式にしますか？ …
❯JavaScript
  YAML
  JSON

以下が表示されるので、「Yes」を選択してエンターを押下します。

※「日本語訳」以下はターミナルには表示されない項目です。

※環境や時期などによって表示内容が相違するかもしれませんが、必要なライブラリのインストールの確認なので、Yesで大丈夫です。

eslint-plugin-react@^7.28.0 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.3 eslint-plugin-jsx-a11y@^6.5.1 eslint-plugin-react-hooks@^4.3.0 @typescript-eslint/parser@latest
? Would you like to install them now? › No / Yes

=====日本語訳=====
eslint-plugin-react @ ^ 7.28.0 @ typescript-eslint / eslint-plugin @ latest eslint-config-airbnb @ latest eslint @ ^ 7.32.0 || ^ 8.2.0 eslint-plugin-import @ ^ 2.25.3 eslint-plugin-jsx-a11y @ ^ 6.5.1 eslint-plugin-react-hooks @ ^ 4.3.0 @ typescript-eslint / parser @ latest
？今すぐインストールしますか？ > いいえ / はい

以下が表示されるので、「npm」を選択してエンターを押下します。

※「日本語訳」以下はターミナルには表示されない項目です。

※これはどれを選択しても問題ありませんが、npmでまとめておいた方がいいかと思います。

? Which package manager do you want to use? …
❯ npm
  yarn
  pnpm

=====日本語訳=====

？どのパッケージマネージャーを使用しますか？ …
❯npm
  yarn
  pnpm

ここまでのソースコードは以下のGitHubにアップしています。

https://github.com/Reigle/react-typescript-template/tree/template_2

ESLintの設定ファイルに任意の設定を行う

「.eslintrc.js」の内容を以下の様に修正する これで、TypeScriptの設定や、node_moduleやpublicなどをチェック対象外にする設定などが含まれています。 それぞれ、設定の追加などは各自で実施してください。

module.exports = {
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "react-hooks",
    "@typescript-eslint"
  ],
  "rules": {
  },
  "overrides": [
    {
        "files": ["**/*.tsx"],
        "rules": {
            "react/prop-types": "off"
        }
    }
  ],
  "settings": {
    "react": {
      "version": "detect"
    },
  },
  "ignorePatterns": [
    "**/public/*",
    "**/node_modules/*",
    "**/.vscode/*",
    ".eslintrc.js",
  ],
}

コマンドでESLintのチェックを行う

以下のコマンドを実行する事で、「src」ディレクトリ配下の全てのファイルをESLintでチェックできる。

./node_modules/.bin/eslint ./src/.

VSCodeでESLintのチェックを起動する

VSCode の拡張機能の「ESLint」をインストールする

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

プロジェクトのルートに「.vscode」ディレクトリを作成し、その配下に「settings.json」を作成する。

「settings.json」の内容は以下とする。

{
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
    ]
}

本記事の全ての内容（VSCodeの設定など）を含んだソースコードは以下のGitHubにアップしています。

https://github.com/Reigle/react-typescript-template/tree/template_3

続きは以下の記事です。

React(TypeScript)プロジェクトの作成方法（Docker、ESLint、Prettier、WebPack）【3/4】 - Reigle 技術ブログ

← 記事一覧へ戻る