ESLintカスタムルールで{" "}の混入を防ぐ

{" "}の混入を防ぎたい

VSCodeで保存時に改行が発生して{" "}が混入することがあります。コードレビューで指摘したりも面倒くさいので混入防止のためESLintカスタムルールを作成しました。

↓ 適用した様子

手順

今回関わるファイル一覧

ディレクトリ構成

.gitignore
eslint.config.mjs
package.json
eslint-plugin-custom-rules/
    ├── tsconfig.json
    ├── package.json
    ├── index.js
    └── lib/
        ├── index.js
        └── rules/
            └── no-space-only-key.js

下記のファイルを追加します。

eslint-plugin-custom-rules/tsconfig.json

{
  "compilerOptions": {
    "target": "es2018",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./lib"
  },
  "include": ["lib/**/*.js", "lib/**/*.ts"],
  "exclude": ["node_modules"]
}

eslint-plugin-custom-rules/package.json

{
  "name": "eslint-plugin-custom-rules",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

eslint-plugin-custom-rules/index.js

import { rules as customRules } from "./lib"

export { customRules }

eslint-plugin-custom-rules/lib/index.js

/**
 * @fileoverview Custom ESLint rules for the project
 */

import noSpaceOnlyKey from "./lib/rules/no-space-only-key.js"

export const rules = {
  "no-space-only-key": noSpaceOnlyKey,
}

eslint-plugin-custom-rules/lib/rules/no-space-only-key.js

/**
 * @fileoverview 空白の {" "} を禁止するESLintのルール
 */

export default {
  meta: {
    type: "problem",
    docs: {
      description: "Disallow object keys that contain only spaces",
      category: "Possible Errors",
      recommended: false,
    },
    schema: [], // 追加のオプションが不要なため
    messages: {
      spaceOnlyKey: "Object keys should not contain only spaces.",
    },
  },

  create(context) {
    return {
      Property(node) {
        if (
          node.key.type === "Literal" &&
          typeof node.key.value === "string" &&
          node.key.value.trim() === ""
        ) {
          context.report({
            node: node.key,
            messageId: "spaceOnlyKey",
          })
        }
      },
    }
  },
}

eslint-plugin-custom-rules/index.js

import { rules as customRules } from "./lib"

export { customRules }

gitignoreを追記します。

.gitignore

node_modules/

下記を追記します。

eslint.config.mjs

import customRulesPkg from "eslint-plugin-custom-rules"
const { rules: customRules } = customRulesPkg;

export default [
  {
    plugins: {
      "custom-rules": customRules,
    },
    languageOptions: {
      project: [
        "./tsconfig.json",
        "./eslint-plugin-custom-rules/tsconfig.json"
      ],
    },
    rules: {
      "no-restricted-syntax": [
        "error",
        {
          selector: "JSXExpressionContainer[expression.value=/^\\s+$/]",
          message: 'スペースのみの式 {" "} の使用は避けてください。',
        },
      ],
    },
  },
  {
    files: ["**/*.js", "**/*.mjs"],
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        project: null  // JavaScriptファイルにはTypeScript設定を適用しない
      }
    }
  },
]

下記コマンドでpluginを追加する。
npm install eslint-plugin-custom-rules --save-dev
または、
yarn add eslint-plugin-custom-rules --dev

以上で検知できるようになります。
Happy coding!🎉