目次
スポンサードリンク
事前準備
以下の記事の内容が完了している前提で本記事を記載しています。
まだの方は、以下から進めてください。
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にアップしています。
スポンサードリンク
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」をインストールする
プロジェクトのルートに「.vscode」ディレクトリを作成し、その配下に「settings.json」を作成する。
「settings.json」の内容は以下とする。
{
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
]
}
本記事の全ての内容（VSCodeの設定など）を含んだソースコードは以下のGitHubにアップしています。
続きは以下の記事です。
React(TypeScript)プロジェクトの作成方法（Docker、ESLint、Prettier、WebPack）【3/4】 - Reigle 技術ブログ
