Build Front-end Projects FROM Scratch HusKY + Lint-Staged

Build a lean front-end project step by step from scratch.

Vue3.0 + Vite + TypeScript + Element Plus + Vue Router + AXIos + Pinia

Canonicalization: Eslint + Airbnb JavaScript Style + husky + Lint-staged

Package management: YARN

Historical content

Building front-end Project 1 from Scratch (Vue3+Vite+TS+Eslint+Airbnb+ Prettier)

This chapter content

Husky and Lint-staged methods are used to ensure that code submitted to Git has uniform code constraints and styles.

husky

Functions: Associate Git hooks with custom actions that perform related Git hooks, such as Eslint validation before commit, Commit message validation, and so on.

The installation

Husky-git hooks

Install using Automatic (recommended)

npx husky-init
yarn
Copy the code

The.husky folder was added to the project directory after the installation.

configuration

Add husky to scripts in package.json file

"Husky" : {" hooks ": {" pre - commit" : "lint - staged" / / subsequent installation}},Copy the code

lint-staged

Function: filter out Git code temporary area file tool; A review of the entire project’s code can take a long time and result in major changes to the project. So you can only check for temporary files.

The installation

Passage ten: 🚫💩 — Run Linters on Git staged files

# lint-staged
yarn add lint-staged --dev
Copy the code

configuration

New Lint-staged additions to scripts in package.json files

"lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "yarn lint",
      "prettier --write",
      "git add"
    ]
  }
Copy the code

Because ESLint needs to be executed globally here, ESLint also needs to be installed globally.

yarn global add eslint
Copy the code

test

When you push Git from your terminal, you can see the details of git hooks actions that are consistent with commands lint-staged configuration.

— 2022.02.28 Update —

commitlint

Commitlint is a git commit validation constraint tool that helps us write commit messages more formally.

The installation

yarn add @commitlint/cli @commitlint/config-conventional --dev 
Copy the code

configuration

Configuration instructions

yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'
Copy the code

The root directory creates the commitlint.config.js file

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'build',
        'chore',
        'ci',
        'docs',
        'feat',
        'fix',
        'perf',
        'refactor',
        'revert',
        'style',
        'test',
      ],
    ],
  },
};
Copy the code

Information when the code is submitted.

"Feat: Configuring commitLint"Copy the code

summary

Husky + Lint-staged code validates ESLint before committing code to Git using husKY + Lint-staged code to ensure uniform code constraints and styles.