记录vue2项目配置eslint、prettier以及git提交校验

项目背景：vue2老项目，使用vue-cli4搭建的，创建项目时eslint校验使用的是eslint+standard。

问题：项目统一配置了eslint，但是prettier配置各不相同，导致格式化后总会有冲突，而且有的电脑配置了git提交校验不生效，提交的代码没有经过eslint验证，其他同事拉取代码后提交不成功。

配置1：.editorconfig

该文件是针对不同IDE进行配置的初始化格式。

# EditorConfig is awesome: http://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*] # 表示所有文件使用
charset = utf-8 # 设置文件字符集为 utf-8
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行尾的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

# 2 space indentation
[*.{js,jsx,ts,tsx,vue}]
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小

配置2：eslint相关

1、vscode安装eslint插件

2、vscode配置保存时修复

点击vscode左下角设置-->搜索settings --> 打开setting.json文件，配置eslint保存。

注意：这个setting.json文件是全局的，更改后在其他项目也会生效。如果只需要在当前项目生效，则使用快捷键ctrl+shift+p，点击setting，可以看到项目根目录下生成了vscode-->setting.json文件，在里边进行配置，则只会在当前项目生效。

3、项目根目录下创建.eslintignore文件，配置如下：

public
.husky
.vscode
node_modules
dist
index.html
.gitignore
*.sh
*.md

src/assets

配置3：prettier

1、安装
npm i prettier -D

2、vscode安装prettier

3、项目根目录下创建.prettierrc.js文件

module.exports = {
  // tab缩进大小，默认为2
  tabWidth: 2,
  // 使用tab缩进，默认false
  useTabs: false,
  // 使用分号，默认true
  semi: true,
  // 使用单引号, 默认false，(在jsx中配置无效, 默认都是双引号)
  singleQuote: false,
  // 单行代码最长字符长度，超过之后会自动格式化换行。
  printWidth: 80,
  // 行尾逗号，默认none，可选（none|es5|all），es5 包括es5中的数组、对象，all 包括函数对象等所有可选
  trailingComma: "all",
  // 对象中的空格 默认true，true: { foo: bar }，false: {foo: bar}
  bracketSpacing: true,
  // JSX标签闭合位置 默认false
  jsxBracketSameLine: false,
  // 箭头函数参数括号 默认avoid 可选（avoid|always），avoid 能省略括号的时候就省略 例如x => x ，always 总是有括号
  arrowParens: "avoid",
  // 与 `.editorconfig` 保持一致设置。
  endOfLine: "lf",
  // 指定要使用的解析器，不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准 always\never\preserve
  proseWrap: "preserve",
};

4、.prettierignore配置

dist
node_modules
public
.husky
.vscode
*.md
*.sh

src/assets

5、vscode配置prettier

// prettier可以格式化很多种格式，所以需要在这里对应配置下
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true

最后的"editor.formatOnSave": true是保存时格式化设置。

6、设置使用prettier格式化代码

右键选择使用...格式化代码

在弹窗中选择prettier

7、解决eslint和prettier冲突

7.1安装依赖：
npm i -D eslint-config-prettier@6.0.0
这里选择6.0.0版本是和项目中的eslint版本对应的，要不然版本不兼容会报错；

7.2 设置规则
把prettier设置的规则添加到extends数组中：

配置4：husky配置
1、安装husky
npm i husky@8.0.3 -D
注意：这个版本也是根据当前node版本安装的。

2、创建.husky/目录并指定该目录为 git hooks 所在的目录

npm set-script prepare "husky install" && npm run prepare

执行该命令后，会看到 package.json 文件中 scripts 对象中新增一条 prepare:"husky install"命令,项目根目录会生成一个.husky 文件夹

注: 需要 npm 版本 Version 7.x(npm set-script 命令需要 7.x)，建议 node 版本升级到 16.x

3、创建预提交脚本
执行该命令后，会看到.husky/目录下新增了一个名为 pre-commit 的 shell 脚本
这样，在之后执行 git commit 命令时会先触发 pre-commit 这个脚本

配置5：commitlint进行校验

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

执行该命令后，会看到.husky/目录下新增了一个名为 commit-msg 的 shell 脚本

配置6：lint-staged安装配置
lint-staged 用于预提交时要进行代码检查的规范，比如 eslint

npm install lint-staged@13.2.3 -D

在 package.json 新增 lint-staged

配置7：commitlint提交校验安装配置

npm i @commitlint/config-conventional@17.6.6 @commitlint/cli@17.6.6 -D

在项目根目录下创建 commitlint.config.js 文件，并设置如下信息

配置8：commitzen适配器

用于命令交互式提交的插件，方便大家进行提交
1、全局安装 commitzen

npm install -g commitizen@4.3.0

2、安装自定义项目提交配置适配器

npm install cz-customizable@6.3.0 -D

3、package.json 中添加 commitizen 配置

4、配置 cz-customizable 配置项
在项目根目录创建.cz-config.js 配置文件，文件内容参考如下

module.exports = {
    // 可选类型
    types: [
        { value: "feat", name: "feat: 新功能" },
        { value: "fix", name: "fix: 修复一个bug" },
        { value: "docs", name: "docs: 文档变更" },
        { value: "style", name: "style: 代码格式(不影响代码运行的变动)" },
        { value: "conflict", name: "conflict: 修复代码冲突" },
        { value: "font", name: "font: 字体文件更新" },
        { value: "refactor", name: "refactor: 重构(既不是增加feature，也不是修复bug)" },
        { value: "perf", name: "perf: 性能优化" },
        { value: "test", name: "test: 增加测试" },
        { value: "chore", name: "chore: 构建过程或辅助工具或配置工具修改" },
        { value: "revert", name: "revert: 回退" },
        { value: "build", name: "build: 影响构建系统或外部依赖项的更改(如:webpack、npm)" }
    ],
    // 交互式消息提示步骤
    messages: {
        type: "请选择提交类型:",
        customScope: "请输入修改范围(可选):",
        subject: "请简要描述提交(必填):",
        body: "请输入详细描述(可选):",
        footer: "请输入要关闭的issue(可选):",
        confirmCommit: "确认使用以上信息提交？(y/n/e/h)"
    },
    // 跳过问题
    skipQuestions: ["body", "footer"],
    // subject文字长度默认是72
    subjectLimit: 72
}

配置9：增加自定义校验规则到 commitlint 配置

编辑 commitlint.config.js，导入.cz-config.js 中的自定义的规则项

10、FAQ

Q:配置mac电脑配置husky校验不生效
A:mac电脑需要给husky添加权限，可以执行chmod +x .husky/pre-commit进行尝试