preface

In the same project, there are usually several people working together to develop the code, and each person has a different code style. Therefore, before submitting to Git, we need to unify the format. Therefore, this article is designed to share the configuration process of my own. I hope every partner can standardize their own code, if you think it is helpful to you or a partner has a better way to welcome the positive message!

The preparatory work

Using vUE as an example, scaffold a project, directory structure (this doesn’t matter, existing projects are better)



This section describes the NPM module we need to use

  • prettierCode formatting module, the same formatting used by the Vetur extension tool installed on vscode

  • huskyGit hooks, which execute commands in git hooks

  • lint-staged¬†Lint checks temporary files in Git
  • eslintJs code detection tool

Step 1

Installation required dependencies

cnpm install --save-dev prettier husky lint-staged eslintCopy the code

Step 2

2.1 Configuring the Rule for Prettier

Prettierrc create a.prettierrc file in the directory where the project belongs

{
    // Line feed length
    "printWidth": 200.// Number of Spaces to indent code
    "tabWidth": 2.// Use TAB indentation instead of space indentation
    "useTabs": true.// Whether the code ends with a semicolon
    "semi": false.// Whether to use single quotation marks
    "singleQuote": true.{a:0}
    "bracketSpacing": true.// arrow functions with single arguments without parentheses x => x
    "arrowParens": "avoid"
}Copy the code

IO /docs/en/opt…

2.2 Configuring ESLint Rules

Because esLint is not installed globally, it is executed in the project (initializing esLint files)

./node_modules/.bin/eslint --initCopy the code

This is my prompt option based on ESLint, which varies from project to project



Eslintrc. Json file is automatically added to the root directory of the project and verifies the rules in the rules option:

"rules": {Disallow duplicate keys in object literals
    "no-dupe-keys": "error".// Disallow duplicate case tags
    "no-duplicate-case": "error".// disallow empty blocks and allow empty catch statements
    "no-empty": ["error", {"allowEmptyCatch": true}].// Disallows reassignment of the parameters of the catch clause
    "no-ex-assign":"error".// Disable unnecessary Boolean conversions
    "no-extra-boolean-cast": "error".// Disallow unnecessary semicolons
    "no-extra-semi": "error".// Force all control statements to use the same parenthesis style
    "curly": "error"
    
}Copy the code

cn.eslint.org/docs/rules/


Step 3

Add husky and Lint-staged configurations to package.json

"husky": {"hooks": {
        "pre-commit": "lint-staged"}},"lint-staged": {
    "src/**": [
        "prettier --config .prettierrc --write"."eslint --fix"."git add"]}Copy the code

Effect:



Passage Paths can be configured in lint-staged configuration items (see the official website for details)

Note: “git add” must be added to lint-staged configuration items; otherwise, formatted and modified files will not be committed to the local repository

Step 4

Verify success, modify some files, and execute

git add .Copy the code

git commit -m 'test'Copy the code

If there are any errors, esLint will fail to commit, and esLint will give you an error



Note: if you do not understand the demo can be cloned down to see, githua address github.com/foreverhot/…

The check image must be ignored, otherwise the check will not pass (create the following files and add/SRC /img separately)

The.eslintignore file ignores the path checked by esLint

. Prettierignore Path where the file neglects the prettier format


Focus on me: front-end Jsoning