Develop front-end code specification in webpack project

The so-called norms, in fact, is that we agree on something, and to abide by it.

  1. Install eslint

Yarn add eslint -d or NPM install eslint -dCopy the code

  1. To initialize esLint, do as follows

Yarn run ESlint --init or NPM run eslint --initCopy the code

At this point, the command line will give you the corresponding option, and I chose the third option to check the syntax and find problems and enforce the code style.

Select the Javascript module (es module).

Choose the framework to use for the project, since my project framework is React, so React is selected here.

Whether the project uses Typescript or not, I chose Typescript.

I’m going to choose the environment in which this code is going to run, and I’m going to choose Browser, which is the Browser.

Choose the project code style, go straight to the popular style, of course, if you want to customize, then choose something else. I chose it directly hereStandard.

The relevantStandardPlease step over here.Standard Official Documentation

Select the configuration file type, given three options, JS, YAMl,json, I choose JSON

At the end, you will be prompted to install the dependencies required by the above selected configuration. The project root directory is generated after the configuration is complete.eslintrcThe content of the document is as follows:

{
    "env": {
        "browser": true."es2021": true
    },
    "extends": [
        "plugin:react/recommended"."standard"]."parser": "@typescript-eslint/parser"."parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 13."sourceType": "module"
    },
    "plugins": [
        "react"."@typescript-eslint"].// React is not used
    "rules": {
        "no-use-before-define": "off"."@typescript-eslint/no-use-before-define": [
            "error"]}}Copy the code

  1. Install the esLint plugin for WebPack

If it is webpack5

Yarn add eslint-webpack-plugin -d or NPM install eslint-webpack-plugin -dCopy the code

If it is webpack4

yarn add eslint-webpack-plugin@2 -D
或者
npm install eslint-webpack-plugin@2 -D
Copy the code

The simplest configuration is as follows. What this plug-in does is it tells webPack to compile and fail when we write code that doesn’t conform to the Standard specification

const ESLintPlugin = require('eslint-webpack-plugin')

new ESLintPlugin({
  context: './src'.// Check the directory
  extensions: ['js'.'jsx'.'ts'.'tsx'] // File extension
}),
Copy the code

When compilation fails

  1. Install Husky, Lint-staged

Yarn Add HusKY Lint-staged -D or NPM Intall Husky Lint-staged -DCopy the code

The latest version of Husky recommends using the following command to initialize

npx husky-init && npm install // Use NPM to initialize
npx husky-init && yarn // Use yarn 1.x to initialize
yarn dlx husky-init --yarn2 && yarn // Use YARN 2 to initialize
Copy the code

After initialization, the.husky folder will be generated in the root directory. We will focus on the pre-commit file in the husky folder. By default, this will be generated as follows:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm test
Copy the code

It sets up husky, modifies package.json, and creates a sample pre-commit hook that you can edit. By default, it runs NPM test when you commit.

Next, configure Lint-staged, using pre-commit as an example:

Example Change the content of the pre-commit file to

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

Copy the code

Package. Add in json

  "lint-staged": {
    "src/**/*.{js,jsx,tsx,ts}": "eslint --fix"
  },
Copy the code

This way, esLint will validate code before committing a commit, and failure to validate will prevent the commit if, for example, a variable is declared but not used

Of course,huskyOther hooks are also provided, please move onThe husky’s official website

  1. About the Standard

To borrow from the official website

This tool can save you (and your team) a lot of time in three ways:

  • No configuration is required. The most convenient way ever to unify code style, easy to own.
  • Automatic code formatting.Just runstandard --fixSay goodbye to dirty, messy code.
  • Identify style and procedural issues in advance. Reduce the back-and-forth modification process during code review and save time.

No need to hesitate. No longer need to maintain.eslintrc,.jshintrc, or.jscsrc. Out of the box

Of course, instead of using Standard directly, we use eslint-config-standard

  1. Through the above configuration, we have agreed on the most basic code specification

  • All scripts should follow the code style as agreed in the ESLint configuration
  • Husky + Lint-passage enforces style when committing

Reference documentation

eslint standard husky eslint-webpack-plugin lint-staged