eslint-config

GinTrickのプロダクトで使うための共通eslint-config

インストール方法

npm i -D @gintrick/eslint-config eslint-plugin-import

環境に応じて追加で以下をインストールをする。

TypeScript: @typescript-eslint/eslint-plugin , @typescript-eslint/parser , eslint-import-resolver-typescript

React: eslint-plugin-react , eslint-plugin-react-hooks , eslint-plugin-react-refresh

Usage

一般的な eslint-config パッケージと同様に使う。

.eslintrc.js の例

module.exports = {
  // ...
  extends: ['@gintrick/eslint-config/typescript-react'], // // <- TypeScript + React の場合
  plugins: ['@typescript-eslint', 'react', 'react-hooks', 'import'], // <- TypeScript + React の場合
  rules: {
    // ... プロジェクト固有の追加ルール
  },
  settings: {
    react: { // <- React を使う場合
      version: 'detect',
    },
    'import/resolver': { // TypeScriptを使う場合
      typescript: {},
    },
  },

その他の parserOptions などのプロパティについては詳しくはESLint や @typescript-eslint のドキュメントを参照して良い感じに設定する必要がある。

extends に指定できるルールは以下の通り。

• @gintrick
  • 基本の設定。ReactもJavaScriptも使わないときに使う
• @gintrick/eslint-config/typescript
  • TypeScriptを使うときに使う。基本の設定が含まれている
• @gintrick/eslint-config/react
  • Reactを使うときに使う。基本の設定が含まれている
• @gintrick/eslint-config/typescript-react
  • TypeScriptとReactを使うときに使う。基本の設定が含まれている

このパッケージの開発方法

ESLint には eslint-config-ほげほげ というパッケージ名でESLintの設定ファイルをパッケージとして公開する慣習・仕組みがある。

この @gintrick/eslint-config も eslint-configの仕組みに則って作成した。ここに書いてあるeslint-configのハウツーを参考にした。

ruleSets ディレクトリ以下にルールが書かれている。例えば ruleSets/react.js には React用のeslintルールが書いてある。

ruleSetsのルールをルート直下のファイル (inde.js や typescript-react.js など) から参照している。ルート直下のjsファイル名はそのまま extends されるときの名前に使われている(そいういうEslint の仕様となっている)。

publish 手順

• PRをマージしたりmasterに直接pushするなどしてmasterを更新する。
• 以下のコマンドを叩く

npm version minor  # package.json の versionを更新し、タグ付きのコミットを生成するコマンド。更新内容に応じて major, minor, patch のいずれかを選択
npm publish # パッケージをpublish する。package.json の versionを見るので、同じバージョンが既にpublishされていたらエラーになる。 

• 必要であればリリースノートを書く
  • 破壊的変更や大きめな機能をつけたときに書こう