ElectronとTypeScriptの開発環境にESLint、Prettier、StyleLintを導入する方法

これはなに Link to this heading

ElectronとTypeScriptの環境にLinterとFormatterを導入する方法を説明する。 導入するのはESLint, Prettier, StyleLintである。

導入に必要な条件 Link to this heading

前提条件は次のとおりである。

  • Node.jsがインストールされていること
  • TypeScriptとElectronの基本的なプロジェクト構成が整っていること

ESLintの導入方法と設定手順 Link to this heading

このセクションでは、ESLintのインストール方法と設定方法について説明する。

ESLintのインストール Link to this heading

プロジェクトのルートディレクトリで、以下のコマンドを実行し、ESLintと関連パッケージをインストールする。

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-electron --save-dev

インストールしたパッケージの詳細は下記のとおりである。

パッケージ名説明
eslintESLintのコア機能を提供する
@typescript-eslint/parserTypeScriptの構文や機能をESLintで正しく解析・検証するために必要
@typescript-eslint/eslint-pluginTypeScript固有のルールと推奨設定を提供する
eslint-plugin-electronElectronアプリケーション開発に特化したESLintのプラグイン

とくに、eslint-plugin-electronパッケージは、以下のようなElectron固有のルールを提供する。

  • メインプロセスとレンダラープロセスのコードを適切に分離することに関するルール
  • セキュリティリスクを最小限に抑えるためのルール(例:ウェブコンテンツのセキュリティポリシーを適切に設定する)
  • Electron APIのベストプラクティスに関するルール

ESLintの設定ファイル作成 Link to this heading

プロジェクトのルートディレクトリに.eslintrc.jsonという名前の設定ファイルを作成する。 そして、以下の内容を設定ファイルに記述する。

.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ファイルを作成し、チェックを無視したいファイルやディレクトリを指定する。下記に例を示す。

.eslintignore
node_modules/
dist/

ESLintを実行する Link to this heading

package.jsonscriptsにlintコマンドとfixコマンドを追加する。

package.json
"scripts": {
  "lint": "eslint . --ext .ts,.tsx,.js,.jsx ",
  "fix": "eslint . --fix --ext .ts,.tsx,.js,.jsx",
},

この設定を追加した後、以下のコマンドでプロジェクト内のすべてのJavaScriptとTypeScriptファイルを対象にESLintを実行できる。

npm run lint

Prettierの導入方法と設定手順 Link to this heading

このセクションでは、Prettierのインストール方法と設定方法について説明する。

Prettierのインストール Link to this heading

プロジェクトのルートディレクトリで、以下のコマンドを実行してPrettierと関連パッケージをインストールする。

npm install prettier eslint-config-prettier --save-dev

インストールしたパッケージの詳細は下記のとおりである。

パッケージ名説明
prettierPrettierのコア機能を提供する
eslint-config-prettierPrettierと競合するESLintの設定を無効化するconfig

最近のESLintとPrettierの統合に関するベストプラクティスでは、ESLintとPrettierを別々に実行することが推奨されている。そのためeslint-plugin-prettierはインストールしない。

Prettierの設定ファイル作成 Link to this heading

既存の.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公式 を参照してほしい。下記に例を示す。

.prettierrc.json
{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

Prettierを実行する Link to this heading

package.jsonファイルを開き、“scripts"セクションに以下のformatスクリプトを追加する。

package.json
"scripts": {
  "format": "prettier --write \"./**/*.{ts,tsx,js,jsx,json,css,md}\"",
},

この設定を追加した後、以下のコマンドでプロジェクト全体のコードをフォーマットできる。

npm run format

Stylelintの導入方法と設定手順 Link to this heading

このセクションでは、Stylelintのインストール方法と設定方法について説明する。

Stylelintのインストール Link to this heading

プロジェクトのルートディレクトリで以下のコマンドを実行し、Stylelintと関連パッケージをインストールする。

npm install stylelint stylelint-config-standard --save-dev

インストールしたパッケージの詳細は下記のとおりである。

パッケージ名説明
stylelintStylelintのコア機能を提供する
stylelint-config-standardStyleLint公式の設定preset

Stylelint v14までは、StyleLintとPrettierが競合しないように、stylelint-config-prettierも導入していた。しかし、Prettier 9.0.5のリリースノート によると、Stylelint v15では必要ないらしいので入れていない。

Stylelintの設定ファイル作成 Link to this heading

プロジェクトのルートディレクトリに.stylelintrc.jsonという名前のファイルを作成し、Stylelintの設定を追加する。

.stylelintrc.json
{
  "extends": [
    "stylelint-config-standard"
  ],
  "rules": {
    // ここにカスタムルールを追加する
  }
}

加えて、プロジェクトのルートディレクトリに.stylelintignoreファイルを作成し、チェックを無視したいファイルやディレクトリを指定する。例を次に示す。

.stylelintignore
node_modules/
dist/

Stylelintを実行する Link to this heading

package.jsonファイルを開き、“scripts"セクションのlintスクリプトを、ESLintとStylelintが同時に動作するように変更する。

package.json
"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

まとめ Link to this heading

この記事では、ElectronとTypeScriptの環境にESLint、Prettier、およびStyleLintを導入する方法を詳細に解説した。これらのツールを導入することで、コードの品質向上やチーム内でのコーディングスタイルの統一が実現でき、効果的な開発環境を整えられる。ぜひ、この機会に開発環境を改善して、より高品質なコードを書くことを目指そう。

参考文献・URL Link to this heading

Licensed under CC BY-NC-SA 4.0
最終更新 5月 21, 2023
Hugo で構築されています。
テーマ StackJimmy によって設計されています。