サバイバルTypeScript勉強備忘録5（ESLintでのTypeScriptコーディング規約チェック）
目次
- 目次
- 1. 概要
- 2. 環境構築
- 3. TypeScriptにESLintを導入する
- 4. TypeScriptをチェックする
- 5. VS Code用ESLint Extensionの導入
- 6. おわりに
- 7. 参考
1. 概要
このシリーズでは、TypeScriptの入門教材としてサバイバルTypeScriptで学習し、個人的に重要だと思った箇所を備忘録として記事に記載しています。
今回の記事では、第三章 作って学ぶTypeScriptを題材に、TypeScriptのコーディング規約チェックについて学んでいきます。
2. 環境構築
2.1. プロジェクト作成
適当なディレクトリを作成し、package.jsonを作成、最低限の内容を記載しておきます。
{
"name": "eslint-typescript-tutorial",
"license": "UNLICENSED",
}
2.2. TypeScriptの導入
以下コマンドでtypescriptおよび、Node.jsの型定義@types/nodeをインストールします。
yarn add -D typescript@^4.6 @types/node@^16
yarnのバージョンWARNINGが出てますが、ここでは無視します。
TypeScriptコンパイラの設定ファイルtsconfig.jsonも作成しておきます。
{
"compilerOptions": {
"outDir": "dist"
},
"include": ["src"]
}
2.3. TypeScriptファイルの作成
srcというディレクトリにhelloWorld.tsを作成します。
コンパイルできるか確認しておきます。
npx tsc
コンパイルに成功すると、distディレクトリにhelloWorld.jsが生成されます。
3. TypeScriptにESLintを導入する
3.1. 導入コマンド実行
以下コマンドでESLintおよびTypeScript ESLintの両方を導入します。
yarn add -D \
eslint@^8 \
@typescript-eslint/parser@^5 \
@typescript-eslint/eslint-plugin@^5
上記TypeScript ESLintの2つのパッケージはそれぞれ以下の用途です。
- @typescript-eslint/parser：ESLintにTypeScriptの構文を理解させるためのパッケージ
- @typescript-eslint/eslint-plugin：TypeScript向けのルールを追加するパッケージ
念のため、バージョンを確認しておきます。
npx eslint -v
3.2. TypeScript向けshareable configを導入する
前回の記事で学んだように、ESLintのルールを一つずつ手動設定するのは手間なので、shareable configという設定ルールプリセットを導入します。
今回はAirbnb JavaScript Style Guideに準拠したプリセットを導入していきます。
以下コマンドで導入します。
yarn add -D \
eslint-config-airbnb-base@^15 \
eslint-plugin-import@^2 \
eslint-config-airbnb-typescript@^17
それぞれの行での導入パッケージは以下を意味します。
- eslint-config-airbnb-base：Airbnb JavaScript Style Guideに準拠したshareable config
- eslint-config-airbnb-typescript：上記へのTypeScript ESLintのルール追加/設定用パッケージ
- eslint-plugin-import：import順番のルール化、自動整列用パッケージ（依存関係上必要）
3.3. TypeScript ESLint設定ファイルの作成
3.3.1. tsconfig.eslint.jsonの作成
TypeScript ESLintは、チェック時に型情報を利用するために、TypeScriptコンパイラを使用します。その設定としてルートディレクトリにtsconfig.eslint.jsonファイルを作成します。
{
"extends": "./tsconfig.json",
"compilerOptions": {
"allowJs": true
},
"include": ["src", ".*.js", "*.js"]
}
それぞれの記載は以下を意味します。
- extends：コンパイラの基本設定を
tsconfig.jsonから引き継ぐ - compilerOptions：
.eslintrc.js自体のチェックも行いたいため、allowJSを追加 - include：
srcディレクトリおよびjsファイルのパターンマッチを追加
以下コマンドで設定を確認します。
npx tsc --showConfig --project tsconfig.eslint.json
正しく設定されていると以下のように設定内容が出力されます。
3.3.2. .eslintrc.jsの作成
ESLintの設定ファイル.eslintrc.jsを作成します。
module.exports = {
root: true,
parser: "@typescript-eslint/parser",
plugins: ["@typescript-eslint"],
env: {
browser: true,
es2021: true,
},
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
project: "./tsconfig.eslint.json",
tsconfigRootDir: __dirname,
},
ignorePatterns: ["dist"],
extends: [
"airbnb-base",
"airbnb-typescript/base",
"plugin:@typescript-eslint/recommended-requiring-type-checking",
],
rules: {
"import/prefer-default-export": "off",
"@typescript-eslint/quotes": ["error", "double"],
},
};
前回の記事で扱っていない要点を以下に記載します。
- perser：TypeScript構文の解析のため、
@typescript-eslintのパーサを指定 - plugins：
@typescript-eslintによりTypeScript ESLintのルールを追加 - parserOptions：
- project：ESLint実行時に使うコンパイラ設定ファイルを指定
- tsconfigRootDir：ロジェクトルートの絶対パスを指定
- ignorePatterns：ESLintのチェック対象外ディレクトリの指定（通常コンパイル生成先フォルダは対象外にする）
- extends：shareable configを使用するための設定を追記
- rules：shareable configで有効化されたルールの上書き用
4. TypeScriptをチェックする
4.1. コード記載
下準備として、src/helloWorld.tsに以下を記載しておきます。
export const hello_world = "Hello World";
console.log(hello_world);
4.2. ESLint実行
以下コマンドでESLintを実行します。
npx eslint .
次のようにエラーとワーニングが出力されます。
4.3. 指摘内容の修正
上記で指摘された内容を修正します。
export const helloWorld = "Hello World";
// console.log(helloWorld);
再度ESlintを実行し、エラーが出力されないことを確認します。
5. VS Code用ESLint Extensionの導入
VS Code用のESLintエクステンションを導入すると、リアルタイムでコーディング規約をチェックしてくれます。
以下のようにVS Code上でエラー内容を確認できるようになります。
6. おわりに
今回の記事では、第三章 作って学ぶTypeScriptを題材に、TypeScriptのコーディング規約チェック方法について学びました。
次回の記事では、第四章 読んで学ぶTypeScriptを題材に、TypeScriptの言語機能詳細について学んでいくつもりです。