Eslint & Prettier & Stylelint & Husky

Introduction

To create the style standard so as to let the code becomes more beautiful
The dependency is installed when new react project is created

Eslint

Install the corresponding dependencies

npm install eslint-webpack-plugin eslint-config-prettier 
eslint-plugin-prettier eslint-plugin-react 
eslint-plugin-unused-imports babel-eslint @typescript-eslint/eslint-plugin
@typescript-eslint/parser

Install eslint plugin in vsCode for the hints

Create eslint config file - .eslintrc.js
React Version

// .eslintrc.js
module.exports = {
  parser: "babel-eslint",
  parserOptions: {
    ecmaVersion: 2020,
    ecmaFeatures: { jsx: true },
    sourceType: "module",
  },
  plugins: ["prettier", "unused-imports"],// use plugin
  extends: [
    "react-app",
    "plugin:react/recommended", // as prettier has different set of rule,
    "plugin:prettier/recommended",// we use the recommended set
  ],
  rules: {
    "react/react-in-jsx-scope": "error",  // must include import from react, otherwise show error
    "prettier/prettier": "warn", // styling warning based on prettier
    "react/prop-types": "off", 
    "prefer-const": "warn", // const type is preferred
    "jsx-a11y/anchor-is-valid": "warn",       
    "unused-imports/no-unused-imports": "warn", 
    "unused-imports/no-unused-vars": "warn",
  },
  ignorePatterns: ["generated*"],
};

NextJS + TypeScript Version

// .eslintrc.js
module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: 2020,
    ecmaFeatures: { jsx: true },
    sourceType: "module",
    tsconfigRootDir: __dirname,
    project: "./tsconfig.json",
  },
  plugins: ["prettier", "unused-imports"], // use plugin
  extends: [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended", // as prettier has different set of rule,
    "plugin:prettier/recommended", // we use the recommended set
     "next", 
    "next/core-web-vitals"
  ],
  rules: {
    "prettier/prettier": "warn", // styling warning based on prettier
    "prefer-const": "warn", // const type is preferred
    "jsx-a11y/anchor-is-valid": "off",
    "unused-imports/no-unused-imports": "warn",
    "unused-imports/no-unused-vars": "warn",
  },
  ignorePatterns: ["generated*"],
};

Prettier

Install the dependency

npm install prettier

Create prettierrc file

// .prettierrc
{
    "semi": true,
    "printWidth": 80,
    "arrowParens": "always",
    "singleQuote": false,
    "tabWidth": 2,
    "useTabs": false
  }

Stylelint

Install the dependency

npm install stylelint stylelint-config-sass-guidelines
yarn add

Install the plug-in in vsCode for hints

Create stylelint file

// .stylelintrc.js
module.exports = {
    "extends": [
        "stylelint-config-standard",
        "stylelint-config-prettier",
        "stylelint-config-sass-guidelines"
    ],
    "plugins": [
        "stylelint-scss",
        "stylelint-order"
    ],
    "rules": {
        "value-keyword-case": null,
        "selector-class-pattern": null,
        "comment-whitespace-inside" : "never",
        "at-rule-semicolon-space-before": null,
        "no-invalid-position-at-import-rule":null,
        "order/properties-alphabetical-order": null, 
        // beautify the bracket
        "block-opening-brace-newline-after":"always-multi-line",
        "block-closing-brace-newline-before": "always-multi-line",
        "declaration-empty-line-before": "never",
        "indentation": "tab",
        "max-empty-lines": 1,
        "function-name-case": null,
        // arrange the css order
        "order/properties-order": [ 
          "position",
          "top",
          "right",
          "bottom",
          "left",
          "z-index",
          "display",
          "justify-content",
          "align-items",
          "float",
          "clear",
          "overflow",
          "overflow-x",
          "overflow-y",
          "padding",
          "padding-top",
          "padding-right",
          "padding-bottom",
          "padding-left",
          "margin",
          "margin-top",
          "margin-right",
          "margin-bottom",
          "margin-left",
          "width",
          "min-width",
          "max-width",
          "height",
          "min-height",
          "max-height",
          "font-size",
          "font-family",
          "text-align",
          "text-justify",
          "text-indent",
          "text-overflow",
          "text-decoration",
          "white-space",
          "color",
          "background",
          "background-position",
          "background-repeat",
          "background-size",
          "background-color",
          "background-clip",
          "border",
          "border-style",
          "border-width",
          "border-color",
          "border-top-style",
          "border-top-width",
          "border-top-color",
          "border-right-style",
          "border-right-width",
          "border-right-color",
          "border-bottom-style",
          "border-bottom-width",
          "border-bottom-color",
          "border-left-style",
          "border-left-width",
          "border-left-color",
          "border-radius",
          "opacity",
          "filter",
          "list-style",
          "outline",
          "visibility",
          "box-shadow",
          "text-shadow",
          "resize",
          "transition"
        ]

    }
}

Husky && Lint-Staged

To perform the git hook when commit and focus on the commit file
Update the npm version and install dependencies

npm install -g npm@latest
npm install husky lint-staged

Edit the package.json to add prepare script

 // package.json
 "scripts": {
    // run prepare automatically after npm install
    "prepare": "npx husky",
    "dev": "next dev",
    "watch:style": "postcss ./styles/tailwind.css -o ./styles/output.css  -w",
    "build:style": "postcss ./styles/tailwind.css -o ./styles/output.css --env production ",
    "build": "npm run build:style && next build",
    "start": "next start",
    "lint": "eslint src --ext .ts,.tsx .",
    "lint:style": "npx stylelint --fix src/*.scss"
  },
  // set up the configuration of lint-staged
  "lint-staged":{
    "src/**/*.{ts,tsx}": "eslint --fix",
    "src/**/*.scss": "npx stylelint --fix"
  },

Can also edit the pre-commit setting in .husky/pre-commit file

// .husky/pre-commit
npx lint-staged --allow-empty

VS Code

Close the auto save formatting
Edit settings.json of vsCode

{
    "terminal.integrated.shell.osx": "/bin/bash",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true
    }
}

Edit package.json to delete eslint config (default) and add NPM script to fix the styling problem automatically

 "scripts": {
    "prepare": "husky install",
    "dev": "next dev",
    "watch:style": "postcss ./styles/tailwind.css -o ./styles/output.css  -w",
    "build:style": "postcss ./styles/tailwind.css -o ./styles/output.css --env prodution ",
    "build": "npm run build:style && next build",
    "start": "next start",
    "lint": "eslint src --ext .ts,.tsx .",
    "lint:style": "npx stylelint --fix src/*.scss"
  },