@hokla/eslint-plugin-custom-rules

Hokla's Eslint plugin

Recommended custom eslint rules at Hokla

How to use

Install

yarn add --dev @hokla/eslint-plugin-custom-rules

Optional: In case you also need to setup eslint :

yarn add --dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

Use rules in your projects

In your .eslintrc.json file :

{
  "root": true,
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@hokla/custom-rules/recommended"
  ],
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  // In case you want to customize the level of warning (default to 'warn')
  "rules": {
    "@hokla/custom-rules/react-query-specify-typing": "warn" // "error" | "warn
  }
}

               |

Contribute

• Create a new branch and PR: https://github.com/hokla-org/eslint-plugin-custom-rules/compare

• Write a test with valid and invalid code samples

• Use online tools to specify AST selectors and implement the rule

  • https://astexplorer.net/
  • https://estools.github.io/esquery/
  • https://typescript-eslint.io/play
  • https://www.notion.so/m33/Faire-ses-propres-r-gles-de-linter-AST-801c068aa15d40a4b39bc0ceff5e49aa
  • https://eslint-utils.mysticatea.dev/
  • https://typescript-eslint.io/

• Build rules with yarn build, create the doc file for your rule in docs/rules/[YOUR_RULE_NAME].md (empty file is ok) and run yarn update:eslint-docs to update rules docs.

• Ask a review !

• Let the world know (slack the teams you want to share it with and tell them to upgrade by running yarn upgrade @hokla/eslint-plugin-custom-rules or npm update @hokla/eslint-plugin-custom-rules)

Configs

Configs section would normally go here.

Rules

💼 Configurations enabled in.
⚠️ Configurations set to warn in.
🌐 Set in the react configuration.
☑️ Set in the recommended configuration.

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
luxon-force-zone-in-datetime	TODO
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-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	description here
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().