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().		📦