Vue3项目工程化配置：Prettier + Eslint + husky + commitlint

最近使用vue ui创建了一个vue3+typescript项目，需要配置代码格式化和git提交信息规范。

使用vue UI创建的时候，使用eslint 选择项目总是错误。搞得一头雾水，没办法单独添加ESlint

Vue3的开发插件使用了尤大推荐的Volar，Volar插件中没有Eslint和Prettier相关配置，需要我们自己按自己项目的实际需要进行配置。

vscode 需要安装插件，需要安装的插件有：Prettier和Eslint

 

 

// 安装perttier

yarn add prettier --save-dev --save-exact

// 安装eslint

yarn add eslint --save-dev

// 安装prettier 与 eslint兼容的插件

yarn add eslint-config-prettier --save-dev

// 安装vue官方推荐的eslint插件

yarn add eslint-plugin-vue --save-dev

• 在package.json中添加"prettier"字段（Prettier官方推荐的配置方式）

"prettier": {

"printWidth": 80,

"tabWidth": 2,

"useTabs": false,

"singleQuote": true,

"semi": true,

"trailingComma": "all"

}

上面的配置可以根据自己的项目修改配置

在工程的根目录创建文件.prettierignore，写入以下内容：

这个是忽略配置

# Ignore artifacts:

dist

coverage

 

配置eslint

• 在package.json中添加"eslint"字段

"eslint": {

"extends":

[ "plugin:vue/vue3-recommended", "prettier" ]

}

 

配置工程的settings.json

 

在工程根目录下创建.vscode目录，在.vscode中创建settings.json文件，写入以下内容：

{
  "[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"
}

主要是配置了各类型文件的默认格式化工具是prettier，以及保存时自动格式化文件。

配置Pre-commit Hook

在代码commit前，对处于staged状态下的文件进行一次格式化，避免提交的格式不符合要求。 在项目根目录执行：

npx mrm@2 lint-staged

 

 

 

等待命令执行完成后，会自动安装husky和lint-staged依赖，并创建.husky目录，同时在package.json中添加了相应的字段。 我们需要修改package.json中的lint-staged字段：

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

配置commitlint

git提交信息的随意编写对项目的长期维护来说是十分不利的，commitlint是一个用于检查git提交信息的工具，其约定了commit信息的格式：

安装Npm依赖

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

新增配置文件

在工程根目录下新建文件commitlint.config.js，写入以下内容：

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

注意：这个文件的编码格式必须是UTF-8，否则在git提交时会报错

新增husky配置

在.husky目录下新增文件commit-msg，写入以下内容：

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

npx --no-install commitlint --edit $1

至此，commitlint就配置好了，在下一次git commit时需要按照commitlint约定的格式.