The background,

I recently created a Vue3 +typescript project using Vite that requires configuring code formatting and git commit information specifications.

Prettier + Eslint formatting

The Vue3 development plug-in uses Volar, which is especially recommended. There are no Eslint and Prettier configurations in Volar plug-in, so we need to configure them according to actual needs of our own projects.

Volar does not include ESLint and Prettier, but the official ESLint and Prettier extensions support Vue, so you could install these yourself if needed.

2.1 Installing Vs Code Plug-ins

The following plug-ins need to be installed: Prettier and Eslint

2.2 Installing the NPM Package

Run the following command to install the NPM dependency package:

// Install perttier NPM install prettier --save-dev --save-exact // install eslint --save-dev/install prettier and NPM install eslint-config-prettier --save-dev/install the eslint plugin NPM install eslint-plugin-vue --save-dev where the prettier file is prettier than the prettier file where the prettier file is prettierCopy the code

2.3 configuration Prettier

  • Add the “prettier” field to package.json (officially recommended for prettier)
"prettier": {
    "printWidth": 80."tabWidth": 2."useTabs": false."singleQuote": true."semi": true."trailingComma": "all"
  }
Copy the code

The above configuration can be modified according to your project

  • Create files in the root directory of the project.prettierignore, write the following:
# Ignore artifacts:
dist
coverage
Copy the code

This is where Prettier is configured to ignore formatting

2.4 configuration eslint

  • Add the “eslint” field to package.json
"eslint": {
    "extends": [
      "plugin:vue/vue3-recommended"."prettier"]}Copy the code
  • Create files in the root directory of the project.prettierignore, write the following:
dist
Copy the code

This is the directory where esLint is configured to ignore checking

2.5 Configuring the project settings.json

Create a.vscode directory in the root directory of the project, create a settings.json file in.vscode, and write the following:

{
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.updateImportsOnFileMove.enabled": "always"."editor.formatOnSave": true."window.zoomLevel": 1."files.eol": "\n"
}
Copy the code

Prettier is the default formatting tool for all types of files and formatting files automatically when saving.

Configure pre-commit Hook

Prior to commit, format your passively written documents to avoid submission formatting. Execute in the project root directory:

npx mrm@2 lint-staged
Copy the code

After command execution is complete, husky and Lint-staged dependencies are automatically installed and.husky directories are created, along with fields added to package.json. We need to change the Lint-staged field in package.json:

"lint-staged": {
    "*.{js,css,md,ts,tsx,vue}": "prettier --write"
  }
Copy the code

Configure commitLint

Commitlint is a tool for checking Git commit information. Commitlint specifies the format of git commit information:

4.1 Installing Npm Dependencies

npm install -g @commitlint/cli @commitlint/config-conventional --save-dev
Copy the code

4.2 Adding a Configuration File

Create a file commitlint.config.js in the project root directory and write the following:

module.exports = {
  extends: ['@commitlint/config-conventional']};Copy the code

Note: This file must be encoded in UTF-8, otherwise git commits will report errors

4.3 Adding husKY Configuration

Add the following file to the.husky directory: commit-msg

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

npx --no-install commitlint --edit $1
Copy the code

At this point, the CommitLint is configured and the next Git commit needs to follow the commitLint format.