我们多人开发项目的时候，因为编辑器、个人编码习惯和格式化方式导致风格和格式化不同从而出现代码冲突

解决方式:

阶段一：要求其他成员必须使用 VSCODE 然后手动同步电脑的settings.json里的配置

下载注意 原网址下载很慢可以将下载链接

az764295.vo.msecnd.net/stable/d045… 中的 "az764295.vo.msecnd.net" 替换成 "vscode.cdn.azure.cn"

阶段二：利用VSCODE的Settings Sync插件来自动同步插件和vscode配置

这样虽然统一但限制了成员的工具配置和编码风格 安装好 Settings Sync可以同步公共的配置

分享一个公共的gist: fc2661b6b8b525ae909d55182e7b396e

阶段三：在项目中使用Eslint 和 Prettier在git commit的时候会自动格式化成项目中的配置格式和风格，不用局限vscode的配置

一. 我们先启动一个项目

1. yarn create vite my-vue-app --template vue
2. cd my-project npm install npm run dev
3. npm install --save-dev --save-exact prettier
4. echo {}> .prettierrc.json （prettierrc配置）
5. touch .prettierignore （prettierrc格式化排除配置继承.gitignore 和 .eslintignore）

先破坏下代码格式

二.运行格式化命令

npx prettier --write .

注意：可能运行这个命令报错，需要调整.prettierrc.json文件的编码格式为utf-8

运行完成代码自动格式化

三. eslint

1. 安装eslint

npm install eslint --save-dev

2. 运行

 ./node_modules/.bin/eslint --init

按步骤操作可以生成 .eslintrc.cjs 配置文件

四. 与eslint集成

1.安装 eslint-config-prettier

   npm install --save-dev eslint-config-prettier

2.添加"prettier"到.eslintrc.*文件中的“扩展”数组。确保把它放在最后， 这样它就有机会覆盖其他配置

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
}

3.此示例启用了冲突规则：  "indent"

"rules": {
    "indent": "error"
  }

五. 集成预提交钩子

1.安装 lint-staged

npx mrm@2 lint-staged

2.安装 husky

npx husky-init  
npm install --save-dev pretty-quick  
npx husky set .husky/pre-commit "npx pretty-quick --staged"

六. 测试打乱代码格式配

运行 git commit 命令后自动格式化

七、规范提交提示语

1、先安装依赖包

npm install @commitlint/cli @commitlint/config-conventional -D

2、新建 .commitlintrc.cjs 文件(或者在package.json 文件中增加 commitlint 字段的配置)

module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "type-enum": [
      2,
      "always",
      [
        "feat", // 新功能（feature）
        "fix", // 修复bug
        "docs", // 修改文档
        "style", // 修改代码格式，不影响代码逻辑
        "refactor", // 代码重构，理论上不影响功能逻辑
        "test", // 修改测试用例
        "build", // 构建或其他工具的变动(如webpack)
        "revert", // 还原以前的提交
        "merge", // 分支代码合并
      ],
    ],
  },
};

3、在之前生成的 .husky 文件夹下新建 commit-msg 文件 或命令生成该文件

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

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

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

4、测试

不带类型信息是提交不上的 带上就可以了

附上示例代码

eslint_prettier_test 代码仓库

希望大佬们多多点赞鼓励一下

注意最近vue3新项目集成后提交报错 参考juejin.cn/post/725290…

• 报错原因：prettier3与eslint-plugin-prettier4版本不兼容

  • 把prettier换成2x的版本
  • 或把eslint-plugin-prettier换成5alpha版本

我的prettier版本换成2.8.8就好了