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

YL_FE

2021年09月01日 17:45 · 阅读 3294

一、背景

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

二、Prettier + Eslint 代码格式化

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

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 安装Vs code插件

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

2.2 安装npm包

执行以下命令，安装npm依赖包：

// 安装perttier
npm install prettier --save-dev --save-exact

// 安装eslint
npm install eslint --save-dev

// 安装prettier 与 eslint兼容的插件
npm install eslint-config-prettier --save-dev

// 安装vue官方推荐的eslint插件
npm install eslint-plugin-vue --save-dev
复制代码

2.3 配置Prettier

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

"prettier": {
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": false,
    "singleQuote": true,
    "semi": true,
    "trailingComma": "all"
  }
复制代码

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

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

# Ignore artifacts:
dist
coverage
复制代码

这是配置prettier忽略格式化的目录

2.4 配置eslint

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

"eslint": {
    "extends": [
      "plugin:vue/vue3-recommended",
      "prettier"
    ]
  }
复制代码

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

dist
复制代码

这是配置eslint忽略检查的目录

2.5 配置工程的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信息的格式：

4.1 安装Npm依赖

npm install -g @commitlint/cli @commitlint/config-conventional --save-dev
复制代码

4.2 新增配置文件

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

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

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

4.3 新增husky配置

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

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

npx --no-install commitlint --edit $1
复制代码

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