introduce

  • Lint-staged: Run Linter on staged Git files and don’t let 💩 slip into your code base!
  • Prettier: Parsing code to enforce a consistent pattern used to optimize code formatting, such as indentation, Spaces, semicolons, etc.
  • GitHooks: Save some shell scripts in the. Git /hooks file. Git hooks are scripts that trigger the execution of specific events (commit, push, receive, etc.) in Git.

A. Lint – staged

Why Lint-Staged?

It makes more sense to run Linting before committing code to ensure that no ill-formed code is committed to the repository; But running a Lint validation process throughout the project can be slow, and Lint’s results may not be relevant, whereas you only want Lint to validate files that will be committed.

Lint-staged projects have a script that can run any shell task and takes a staged file as an argument, filtered through a specified glob pattern.

In the package. The json configuration
{
  "lint-staged": {
    "*": "your-cmd"
  }
}
Copy the code

2. Prettier

Prettier is used with a pre-commit tool (example: gitHooks) to reformat files marked “staging” with git add before committing code.

"Scripts ": {"format": "prettier --write." // your-cmd, add additional file type manually, default js, CSS,md},Copy the code

3. GitHooks

Trigger the pre-commit hook when git COMMIT and run lint-staged commands.

"gitHooks": {
    "pre-commit": "lint-staged --concurrent false" 
  }
Copy the code

The sample

Installation
npm install lint-staged prettier --save-dev
Copy the code

Such as:

 "scripts": {   
    "format": "prettier --write ."  // your-cmd
  },
  "lint-staged": {
    "*": [
      "prettier --write" 
    ]
  },
  "gitHooks": {
    "pre-commit": "lint-staged --concurrent false" 
  }
Copy the code
Create.prettierrc.json in the root directory

Create a configuration file for Prettier to let editors and other tools know that a project is using Prettier. For example:

{
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 80,
  "trailingComma": "none",
  "overrides": [
    {
      "files": ["*.json5"],
      "options": {
        "singleQuote": false,
        "quoteProps": "preserve"
      }
    },
    {
      "files": ["*.yml"],
      "options": {
        "singleQuote": false
      }
    }
  ]
}
Copy the code
Create the. Prettierignore file in the root directory

Create a. Prettier Ignore file so the Prettier CLI and editor know which files do not need formatting. Ex. :

packages/plugin-vue/dist/
packages/*/CHANGELOG.md
LICENSE.md
.prettierignore
yarn.lock
Copy the code
Command line to run NPM run format

NPM run format formats the code according to the rules in.prettierrc.json.

summary

  • When you enter the Git commit code in the terminal, Linter will automatically check whether the modified file meets the code specification of this project. If the file does not meet the code specification, the commit will fail.
  • One of the biggest benefits of using Linter is the ability to unify code styles in team work.

The resources

lint-staged – npm

prettier – npm

Prettier – Rule option

Learn Git Hooks configuration from top to bottom