The thing to think about before you do anything is what does this thing solve? Why use it?

  1. Solved the problem of poor readability caused by non-standard code between teams;
  2. It solves the problem of inconsistent coding standards caused by different editors.
  3. Give corresponding specification prompt in time, and repair in time;

Of course the solution to these problems, in theory, verbal agreement, code review can handle, but inevitably one problem, can not control. Obviously this way can not real-time feedback, but also caused communication costs too high, not flexible, with the development of large front-end, automation, engineering configuration has been an inevitable process, unless you want to be a salt fish, or pure business leaders.

(this article uses the editor vscode)

Initialize the project

  1. Initialization engineering

    mkdir pck-name && npm init -y

  2. Initialize the warehouse

    git init

    After initializing the repository, create a.gitignore file and add the corresponding rules, and that’s about it for now

  1. .npmrc

Personally, to configure the NPM source for this project, add the.npmrc file.

EditorConfig introduction and configuration

  1. introduce
EditorConfig: Keeps coding style consistent across IDE editorsCopy the code
  1. Add editorconfig.

Editorconfig official website address

# /.editorConfig # The top-level editorConfig file identifies root =true[*] indent_style = space4# # end_of_line indentation size = lf control line type (lf | cr | CRLF) charset = utf-88Trim_trailing_whitespace =true# line start is not clear space insert_final_newline =trueAdd a blank line at the end of the file [*.md] trim_trailing_whitespace =false

Copy the code

Excited heart shaking hands, create a/SRC /index.js to see the effect……

Edit Config, prettier, ESLint all go to the plugin market to download their plugins. Other editors are not familiar with them.

  1. Vscode plug-in download

How do I determine whether my configuration takes effect after the installation?

1: View the configuration file used by the current editor

2: You can modify your own configuration file, then go to the index file and edit it to see if it takes effect. See Spaces:4 UTF-8 in the lower right corner of the figure.

Prettier introduction and configuration

  1. Introduce Prettier
Prettier: An opinionated code formatterCopy the code
  1. Vscode plug-in download

  1. Add prettierrc. Js

Prettier’s official website

1: Configuration files can actually be a variety of data format styles, yamL, JSON, JS…. However, for extensibility, the js format is usually used.

2: Some attribute Settings in the configuration file express the same meaning as editorConfig, so try to adopt the same configuration at this time to avoid setting conflicts, resulting in a series of problems caused by large changes in the code format or different configurations during formatting.

// /.prettierrc.js

module.exports = {
    printWidth: 100.The default value is 80. The official recommendation is to set the number of characters between 100 and 120
    tabWidth: 4.// A TAB represents several Spaces. The default is 2
    useTabs: false.// Enable TAB instead of space indentation. Default is false
    semi: true.// Whether to use a semicolon at the end of a line. The default is true
    singleQuote: true.The default value is false, that is, double quotation marks are used. You are advised to set the value to true, that is, single quotation marks
    quoteProps: 'as-needed'.// Whether attribute names in objects should be quoted. The default value is as-needed. That is, if not quoted, an error is reported, otherwise not quoted
    trailingComma: 'none'.Tail / / whether or not to use commas, there are three optional value "< none | es5 | all >"
    jsxSingleQuote: true.// Use single quotes in JSX, that's up to you
    bracketSpacing: true.{foo: bar} {foo: bar}
}
Copy the code
// /.prettierignore

*.md
Copy the code

  1. Save time formatting

    1: Add the /.vscode/settings.json file to the project root directory

{
    "editor.formatOnSave": true."editor.defaultFormatter": "esbenp.prettier-vscode",}Copy the code

Check the results!! (You can also look at the lower right corner for Prettier, click on it if output is the configuration for Prettier you wrote yourself)

Introduction and configuration of Eslint

  1. Eslint introduction
Find and fix problems in your JavaScript codeCopy the code
  1. Vscode plug-in download

  1. Install dependencies

npm i eslint -D

./node_modules/.bin/eslint --init

As you choose, a configuration file will be generated as follows (the selection varies slightly). Since I selected typescript, I have to install typescript

npm i typescript -D

The basic prompts are usually ok by this point, but you may need to reboot your editor

  1. Official website address + configuration

Eslint official website address

Eslint Addresses in Chinese

Because Prettier does some things that conflict with ESLint, how do you get Prettier to do them in a virtuous circle?

1: Modify configurations where ESLint conflicts with Prettier.

2: Disable the conflict between ESLint and Prettier, and replace ESLint’s formatting rule with Prettier’s.

The first way… Enenen: Look at yourself. I’m lazy. I don’t write by hand.

So here’s the second way

npm install --save-dev eslint-config-prettier

npm install --save-dev eslint-plugin-prettier

npm install --save-dev --save-exact prettier

Modify the corresponding configuration file

// /.eslintrc.js

module.exports = {
    ...
    "extends":{
        ...
        "prettier"
    },
    "plugins": [..."prettier"]."rules": {...'prettier/prettier': 1}}Copy the code

Lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint

  1. The specified suffix

Open /.vscode/setting.json to add the specified suffix file to be recognized by ESLint (unrecognized files don’t have ESLint in lower right corner)

// /.vscode/setting.json

{
    "editor.formatOnSave": true."editor.defaultFormatter": "esbenp.prettier-vscode"."eslint.options": {
        // specifies the suffix for files handled by vscode's eslint
        "extensions": [".js".".vue".".ts".".tsx"]}}Copy the code

husky + lint-staged

Finish these above, so far we have done the code to find and modify the error, basically reached 90% of the goal, but can not carry some stubborn members ah, extremely confident of their own code, after the change is too lazy to run, ** code world invincible! No bugs!! The results are still committed, causing problems with the remote library code.

This is where husky + Lint-staged hooks come into play, using pre-commit hooks to validate code rules and throw bugs that cannot be automatically fixed

Note ⚠️ : I’m using husky V4 here because v5 is a completely different configuration from V4 and I can’t access the documentation for a long time

NPM [email protected] - I D

npm i lint-staged -D

// /package.json{..."husky": {
            "hooks": {
                "pre-commit": "lint-staged"}},"lint-staged": {
            "*{.ts,.js}": [
                "eslint --fix ./src"."prettier --write"]}}Copy the code

Make a mistake in index.js on purpose

The whole process has been completed by now. As for the adaptation of vUE, React and other configurations, they are basically the same with minor differences. Different plugins or parse can identify different files.