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

解决方式:

阶段一：要求其他成员必须使用 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

1. 运行

 ./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 命令后自动格式化

附上示例代码

eslint_prettier_test 代码仓库

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

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

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

把prettier版本换成2.8.8就好了