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

·  阅读 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插件

需要安装的插件有:PrettierEslint

image.png

image.png

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
复制代码

image.png 等待命令执行完成后,会自动安装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约定的格式.

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改