@hokla/eslint-plugin-bug-shield v0.3.0

Bug Shield (ESLint plugin)

A team can build its own shield to kill bugs for good

Shield your project :

Install

npm install @hokla/eslint-plugin-bug-shield --save-dev

Choose the configs made for your project

In your .eslintrc.json file :

{
  "extends": [
    // [...],
    "plugin:@hokla/bug-shield/recommended",
    "plugin:@hokla/bug-shield/react"
  ],
  // In case you want to opt-out from specific rules:
  "rules": {
    "@hokla/bug-shield/react-query-specify-typing": "off" // "off" | "warn"
  }
}

Kill bugs across many projects by crafting the shield :

Ensure a shield does not already exist in the open-source world

Generate a new rule

yarn rule:generate <your-rule-name>

Write unit tests

Implement the rule

• Find a good AST selector :
  • https://typescript-eslint.io/play
  • https://eslint.org/docs/latest/extend/selectors
• Debug the test in live to check the nature of the selected node:
  • In your rule implementation, set a large AST node selector (like "VariableDeclarator")
  • Add a break point inside your rule
  • Run the VSCode launch config "Tests Debugger" (optionnaly, modify the launch command by adding a file selector)
• Implement the rule
  • Get inspiration from other existing rules in this plugin
  • https://typescript-eslint.io/developers/custom-rules

Test your rule on the playground

• Build yarn build
• Restart your eslint server
• Paste some wrong code in ./src/playground.tsx
• Assess that the working behavior

Generate the rule documentation

• Run yarn create:eslint-docs if you just created the rule, otherwise run yarn update:eslint-docs

Ask for a review !

Let the world know the shield is tougher !

• Let the world know they can improve their protection by running yarn upgrade @hokla/eslint-plugin-bug-shield or npm update @hokla/eslint-plugin-bug-shield.

Configs

Create a new config

TO BE IMPROVED

• Create a CONFIG_NAME.config.ts file in the config folder
• In this file, copy the following block

import {
  RuleListener,
  RuleModule,
} from "@typescript-eslint/utils/dist/ts-eslint";
import { Config, PLUGIN_NAME, getConfigCustomRules } from "../utils/config";

export const CONFIG_NAME = ...; // Use the same config name as your file name

export const getConfig: CustomConfig<typeof CONFIG_NAME> = (allRules) => {
  return {
    [CONFIG_NAME]: {
      plugins: [PLUGIN_NAME],
      rules: { ...getConfigCustomRules(CONFIG_NAME, allRules) },
    },
  };
};

• Modify the config as you please
• Add your config in .eslint-doc-generator.js
• Build yarn build
• Generate the documentation with the new config : yarn update:eslint-docs

Rules

💼 Configurations enabled in.\ ⚠️ Configurations set to warn in.\ 🦅 Set in the nestjs configuration.\ 🌐 Set in the react configuration.\ ⚛️ Set in the react-native configuration.\ ☑️ Set in the recommended configuration.\ 🔄 Set in the redux configuration.\ 📦 Set in the typeorm configuration.\ 💡 Manually fixable by editor suggestions.