これはなに
ElectronとTypeScriptの環境にLinterとFormatterを導入する方法を説明する。 導入するのはESLint, Prettier, StyleLintである。
導入に必要な条件
前提条件は次のとおりである。
- Node.jsがインストールされていること
- TypeScriptとElectronの基本的なプロジェクト構成が整っていること
ESLintの導入方法と設定手順
このセクションでは、ESLintのインストール方法と設定方法について説明する。
ESLintのインストール
プロジェクトのルートディレクトリで、以下のコマンドを実行し、ESLintと関連パッケージをインストールする。
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-electron --save-dev
インストールしたパッケージの詳細は下記のとおりである。
パッケージ名 | 説明 |
---|---|
eslint | ESLintのコア機能を提供する |
@typescript-eslint/parser | TypeScriptの構文や機能をESLintで正しく解析・検証するために必要 |
@typescript-eslint/eslint-plugin | TypeScript固有のルールと推奨設定を提供する |
eslint-plugin-electron | Electronアプリケーション開発に特化したESLintのプラグイン |
とくに、eslint-plugin-electron
パッケージは、以下のようなElectron固有のルールを提供する。
- メインプロセスとレンダラープロセスのコードを適切に分離することに関するルール
- セキュリティリスクを最小限に抑えるためのルール(例:ウェブコンテンツのセキュリティポリシーを適切に設定する)
- Electron APIのベストプラクティスに関するルール
ESLintの設定ファイル作成
プロジェクトのルートディレクトリに.eslintrc.json
という名前の設定ファイルを作成する。
そして、以下の内容を設定ファイルに記述する。
{
"parser": "@typescript-eslint/parser",
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:electron/recommended"
],
"plugins": [
"@typescript-eslint",
"electron"
],
"env": {
"browser": true,
"node": true
},
"rules": {
// ここにカスタムルールを追加する
}
}
とくに、"env"
の設定を追加することで、Electronのメインプロセスとレンダラープロセスの両方にESLintを適用できる。レンダラープロセスで使用されるブラウザのグローバル変数や、Node.jsのグローバル変数がESLintで認識されるようになる。
次に、プロジェクトのルートディレクトリに.eslintignore
ファイルを作成し、チェックを無視したいファイルやディレクトリを指定する。下記に例を示す。
node_modules/
dist/
ESLintを実行する
package.json
のscripts
にlintコマンドとfixコマンドを追加する。
"scripts": {
"lint": "eslint . --ext .ts,.tsx,.js,.jsx ",
"fix": "eslint . --fix --ext .ts,.tsx,.js,.jsx",
},
この設定を追加した後、以下のコマンドでプロジェクト内のすべてのJavaScriptとTypeScriptファイルを対象にESLintを実行できる。
npm run lint
Prettierの導入方法と設定手順
このセクションでは、Prettierのインストール方法と設定方法について説明する。
Prettierのインストール
プロジェクトのルートディレクトリで、以下のコマンドを実行してPrettierと関連パッケージをインストールする。
npm install prettier eslint-config-prettier --save-dev
インストールしたパッケージの詳細は下記のとおりである。
パッケージ名 | 説明 |
---|---|
prettier | Prettierのコア機能を提供する |
eslint-config-prettier | Prettierと競合するESLintの設定を無効化するconfig |
最近のESLintとPrettierの統合に関するベストプラクティスでは、ESLintとPrettierを別々に実行することが推奨されている。そのためeslint-plugin-prettier
はインストールしない。
Prettierの設定ファイル作成
既存の.eslintrc.json
ファイルを開き、“extends"セクションにPrettier関連の設定を追加する。最終的に以下のようになる。
{
"parser": "@typescript-eslint/parser",
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
+ "prettier",
"plugin:electron/recommended"
],
"plugins": [
"@typescript-eslint",
"electron"
],
"env": {
"browser": true,
"node": true
},
"rules": {
// ここにカスタムルールを追加する
}
}
次に、プロジェクトのルートディレクトリに.prettierrc.json
を作成し、Prettierの設定を追加する。設定できるオプションの詳細はPrettier公式
を参照してほしい。下記に例を示す。
{
"semi": true,
"trailingComma": "all",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2
}
Prettierを実行する
package.json
ファイルを開き、“scripts"セクションに以下のformatスクリプトを追加する。
"scripts": {
"format": "prettier --write \"./**/*.{ts,tsx,js,jsx,json,css,md}\"",
},
この設定を追加した後、以下のコマンドでプロジェクト全体のコードをフォーマットできる。
npm run format
Stylelintの導入方法と設定手順
このセクションでは、Stylelintのインストール方法と設定方法について説明する。
Stylelintのインストール
プロジェクトのルートディレクトリで以下のコマンドを実行し、Stylelintと関連パッケージをインストールする。
npm install stylelint stylelint-config-standard --save-dev
インストールしたパッケージの詳細は下記のとおりである。
パッケージ名 | 説明 |
---|---|
stylelint | Stylelintのコア機能を提供する |
stylelint-config-standard | StyleLint公式の設定preset |
Stylelint v14までは、StyleLintとPrettierが競合しないように、stylelint-config-prettier
も導入していた。しかし、Prettier 9.0.5のリリースノート
によると、Stylelint v15では必要ないらしいので入れていない。
Stylelintの設定ファイル作成
プロジェクトのルートディレクトリに.stylelintrc.json
という名前のファイルを作成し、Stylelintの設定を追加する。
{
"extends": [
"stylelint-config-standard"
],
"rules": {
// ここにカスタムルールを追加する
}
}
加えて、プロジェクトのルートディレクトリに.stylelintignore
ファイルを作成し、チェックを無視したいファイルやディレクトリを指定する。例を次に示す。
node_modules/
dist/
Stylelintを実行する
package.json
ファイルを開き、“scripts"セクションのlintスクリプトを、ESLintとStylelintが同時に動作するように変更する。
"scripts": {
"lint": "eslint . --ext .ts,.tsx,.js,.jsx && stylelint \"./**/*.{css,scss}\"",
"fix": "eslint . --fix --ext .ts,.tsx,.js,.jsx && stylelint \"./**/*.{css,scss}\" --fix",
},
以上で設定は完了である。次のコマンドを実行して、プロジェクト全体のスタイルファイルをlintチェックする。
npm run lint
まとめ
この記事では、ElectronとTypeScriptの環境にESLint、Prettier、およびStyleLintを導入する方法を詳細に解説した。これらのツールを導入することで、コードの品質向上やチーム内でのコーディングスタイルの統一が実現でき、効果的な開発環境を整えられる。ぜひ、この機会に開発環境を改善して、より高品質なコードを書くことを目指そう。