Adding code analysis to a plugin

Adding static code analysis

Using Prettier and ESLint

Plugins should use Prettier and ESLint as their static code analysis tools - this provides a standard without having to debate code styles and rules. They can also be enabled as a pre-commit hook that should fix most of the issues automatically.

npm install --save-dev [email protected] @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import eslint-plugin-cypress eslint-plugin-jsx-a11y eslint-plugin-react
npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier

Add a .eslintrc.js file at the top level with the contents from the .eslintrc.js in this code base. If it exists, remove the "eslintConfig" option from the package.json since this is unnecessary when an .eslintrc.js file is present.

Add a .prettierrc file at the top level with the contents from the .prettierrc in this code base

Integrating the code analysis in to a pre-commit hook

Install Husky

npm install --save-dev husky lint-staged

then update package.json with the following sections

  "lint-staged": {
    "src/**/*.{tsx,js,jsx,json}": [
      "eslint --fix",
      "prettier --config .prettierrc --write",
      "git add"
    ],
    "cypress/**/*.{tsx,js,jsx}": [
      "eslint --fix",
      "prettier --config .prettierrc --write",
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },

Running code analysis from npm scripts

Add a new line to the scripts section of package.json:

"scripts": {
    "lint:js": "eslint --ext=tsx --ext=js --ext=jsx --fix ./src",

then to run the linting from the console use

npm run lint:js