前提条件
以下手順を実施済み
1. プロジェクトの初期化
プロジェクトの初期化は、まず任意のディレクトリを作成して、npm initコマンドを実行します。
mkdir sample
cd sample
npm init --yes
2. prettierの導入
prettierは、独自のコーディング規約に則り、ソースコードを整形してくれるコードフォーマッタです。
これを利用することで、ソースコードが自動で整形され、コードスタイルの一貫性を保ちやすくなります。
npm i -D prettier
プロジェクト直下に設定ファイル.prettierrc.jsonを作成することで、フォーマットオプションをカスタマイズできます。
"singleQuote": trueを指定した場合、二重引用符を一重引用符に変換します。
{
"singleQuote": true
}
ファイル形式をjsonとしていますが、実際にはjs・jsonのどちらも使用できます。
使用できるオプションは、公式のドキュメントで確認できます。
また、prettierにフォーマットされては困るディレクトリやファイルがある場合は、.prettierignoreへ指定しておきます。
node_modules/
coverage/
dist/
package-lock.json
これも設定ファイルと同様に、プロジェクト直下に作成します。
2. eslintの導入
eslintは、Javascript の為の静的検証ツールです。
コードを実行する前に明らかなバグを見つけたり、コーディング規約に反している箇所を見つけるのに役立ちます。
npm i -D eslint eslint-config-prettier
eslint-config-prettierは、不要な、またはprettierと競合する可能性のあるルールをオフにします。
prettierと同様、設定ファイル.eslintrc.jsonはプロジェクト直下に作成します。
{
// 適用する環境
"env": {
"node": true, // Nodejs グローバル変数と Nodejs スコープを検証
"es6": true, // モジュールを除くすべての ECMAScript 6 機能を有効
"commonjs": true // CommonJS グローバル変数と CommonJS スコープ を検証
},
// 構文解析（パーサー）
"parserOptions": {
// モジュール形式のソースコードを用います
"sourceType": "module",
// JS のバージョンは最新とします
"ecmaVersion": "latest"
},
// プラグイン
"plugins": [],
/**
* ルールのインポート
*/
"extends": [
"eslint:recommended",
"prettier" // eslint-config-prettier
]
}
prettierは、必ずextends配列の最後尾に配置します。
prettierと同様に、eslintで文法チェックする必要のないディレクトリやファイルは、.eslintignoreへ指定しておきます。
node_modules/
coverage/
dist/
3. 開発環境の制約
Nodejsのメジャーバージョンを指定するため、package.jsonへenginesエントリを追加します。
{
...,
"engines": {
"node": ">=14"
}
}
また、この設定を強制する為、.npmrcファイルをプロジェクト直下に作成します。
engine-strict=true
これにより、仮にサポートされていないNodejsがインストールされていた場合、npm installを実行した際にエラーメッセージが表示され、依存関係を解決できなくなります。
4. Visual Studio Code の設定
ここまでで設定したコーディング規約をVisual Studio Code（以下 vscode）に反映する為に、まずは拡張機能をインストールします。
次に、プロジェクト直下に.vscodeディレクトリを作成して、その下にsettings.jsonとextensions.jsonを作成します。
{
// 保存時に eslint によるリントを実行
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// デフォルトのフォーマッターに prettier を指定
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 保存時に prettier によって整形
"editor.formatOnSave": true,
// タブ幅を 2 に設定
"editor.tabSize": 2,
// タブにはスペースを使用
"editor.insertSpaces": true,
// 改行コードはを LF に設定
"files.eol": "\n",
// ファイル末尾には自動的に空行を挿入
"files.insertFinalNewline": true
}
{
// 拡張機能がインストールされていない場合、インストールの推奨を表示
"recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
}
※ Typescript を使用している場合
プロジェクトに Typescript を含む場合、パッケージの追加と設定が必要になります。
npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
- @typescript-eslint/parser: TypeScript 構文を解析
- @typescript-eslint/eslint-plugin: TypeScript で eslint を利用するためのプラグイン
追加したパッケージを、eslintの設定ファイルに加えます。
{
...,
"parser": "@typescript-eslint/parse",
...,
"plugins": ["@typescript-eslint"],
"extends": [
...,
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"prettier"
]
}