背景: 多个成员协作开发一个项目的时候需要统一代码格式和规范,避免出现一些不必要的问题
首先: 需要安装几个vscode编辑器插件
1、Prettier - Code formatter
2、Ant Design Vue helper(这个插件视个人情况,因为我的项目上基于antdv开发的)
3、Vue Language Features(Volar)
4、Eslint
然后需要找到vscode 设置-格式化,把 Editor: Format on Save勾选上
然后需要找到setting.json文件,去配置一些我们需要的项,给大家说一个快速找到setting.json文件的方法,请看下方图片:
setting配置项:
{
// 文件保存自动格式化
"editor.formatOnSave": true,
// 格式化插件设置为 prettier
"[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[less]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
prettier配置 : 项目里有一个prettier.config.js
module.exports = {
printWidth: 100, // 超过最大值换行
tabWidth: 2, // 缩进字节数
useTabs: false, // 缩进不使用tab,使用空格
semi: false, // 句尾添加分号
vueIndentScriptAndStyle: true, // 缩进Vue文件中的脚本和样式标签
singleQuote: true, // 不适用单引号,适用双引号
quoteProps: 'as-needed', // 仅在需要时在对象属性周围添加引号
bracketSpacing: true, // 格式化结果为 : { foo: bar }
trailingComma: 'none', // 无尾逗号
arrowParens: 'avoid', // 为单行箭头函数的参数添加圆括号
htmlWhitespaceSensitivity: 'strict', // 空格被认为是敏感的
endOfLine: 'auto' // 设置统一的行结尾样式 保持现有的行尾
}
以上就是多人开发,对代码进行统一管理的配置啦,希望对大家有帮助!
如有问题,欢迎指出,共同学习!