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.

| Name                                             | Description | 💼 | ⚠️ | 💡 | | :----------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---- | :- | :- | | forbid-lowercase-jsx-tags | To be used in a React Native project: this rule forbids JSX tags that don't begin with a capital letter | ⚛️ | | | | forbid-nestjs-cron-jobs | Don't use NestJS cron jobs, as they can entail performance problems for your server, as well as concurrency issues (your job might run several times in parallel). Instead, define a CLI command to run your job in your NestJS project (for example with nest-commander) and call it from a cron job defined at the infrastructure level (e.g. in your Kubernetes cluster, or on the platform that hosts your server: Scalingo, Vercel…). | 🦅 | | | | luxon-force-zone-in-datetime | force timezone option in DateTime object instantiation | | ☑️ | | | mandatory-attributes-for-svg-elements | Enforces the declaration of properties width, height and viewBox for svg elements to prevent non-desired display | 🌐 ⚛️ | | | | mutation-decorator-return-type-mismatch | Parameter of Mutation Decorator should match the method's return type | ☑️ | | | | no-async-in-foreach | Array.prototype.forEach is not designed for asynchronous code | ☑️ | | | | no-key-or-ref-prop | This rule forbids using props named key or ref in React function components, as they are reserved words and will not act as intended | 🌐 | | | | no-useless-expression-statement | A statement that only calls a variable does nothing. Usually, the developer meant to call a function but forgot the parentheses. | ☑️ | | | | no-value-export-in-declaration-file | This rule forbids exporting values from TypeScript declaration files (ending in ".d.ts"), which can lead to bugs since these files are dropped during transpilation. | ☑️ | | | | property-decorator-type-mismatch | Parameter of Type Decorator should match the property type | ☑️ | | | | react-query-specify-typing | Type parameters should always be specified when calling useQuery and useMutation from react-query | | 🌐 | | | react-routes-must-be-wrapped-in-router | enforce encapsulation of <...Routes> in <...Router> provider and explicit naming of components returning <...Routes> element | 🌐 | | | | redux-saga-no-sequential-actions | forbid multiple sequential action calls in redux dispatcher | | 🔄 | | | typeorm-enforce-column-type | The SQL column type in a TypeORM entity column must be specified to ensure the control of types in the database match your needs. | 📦 | | 💡 | | typeorm-enforce-repository-generic-method-typing | enforce calls to repository generic methods (save, softRemove and recover) without type specification | | 📦 | | | typeorm-query-runner-release | Any statement calling a queryRunner should be followed by a try/catch/finally block that ensures that the connection pool is released in any case by calling queryRunner.release(). | | 📦 | |