目的
统一团队代码风格,防止协作中不必要的冲突,团队主要技术栈VUE。
编辑器:vscode
插件:Vetur
、Prettier
、koroFileHeader
(添加文件头部注释和方法注释)
配置文件位置
vscode英文版菜单:File / Preferences / Settings,再点击右上角的 Open Settings(JSON)
vscode中文版菜单:文件 / 首选项 / 设置,再点击右上角的打开设置(json)
配置文件(Vetur、Prettier、koroFileHeader)
首先安装插件Vetur
、Prettier
、koroFileHeader
然后,在配置文件中添加如下设置,这是最简配置,其他的默认即可。
配置说明
一. vetur 用于语法高亮
二. prettier 用于格式化,js、html、css统一使用prettier
三. 个性化细节
1) 4 格缩进
2) 超出160个字符换行
3) 去除语句末尾分号
4) js、css中一律使用单引号
如下:
// 每次保存的时候自动格式化
"editor.formatOnSave": true,
// 文件头部作者信息注释
"fileheader.customMade": {
"Author": "QiTianDaSheng",
"Date": "Do not edit",
"Descripttion": "",
"LastEditors": "QiTianDaSheng",
"LastEditTime": "Do not Edit"
},
// script 中使用prettier规则
"vetur.format.defaultFormatter.js": "prettier",
// template 中使用js-beautify-html规则
"vetur.format.defaultFormatter.html": "js-beautify-html",
// style less模块中使用prettier规则
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.options.tabSize": 4,
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_line_length": 160,
"wrap_attributes": "auto"
},
// js中使用的规则
"prettier": {
// 4空格缩进
"tabWidth": 4,
// 语句末尾去掉分号
"semi": false,
// 双引号变成单引号
"singleQuote": true,
"printWidth": 160,
}
},
// 针对JS文件,使用prettier
"prettier.tabWidth": 4,
"prettier.semi": false,
"prettier.singleQuote": true,
"prettier.printWidth": 160,
koroFileHeader
// 文件头部作者信息注释
"fileheader.customMade": {
"Author": "QiTianDaSheng",
"Date": "Do not edit",
"Descripttion": "",
"LastEditors": "QiTianDaSheng",
"LastEditTime": "Do not Edit"
}
- 文件头部注释会自动生成。
- 函数注释,使用快捷键
window
:ctrl+alt+t
,mac
:ctrl+cmd+t
,即可生成。
注意事项
-
如果有多个格式化插件,可以右键选择默认格式化方式为
Vetur
或者Prettier
。 -
项目根目录下这些个性化设置会覆盖编辑器的配置。
.vscode/settings.json
.editorconfig
.prettierrc(如果安装了prettier插件)
浙江大华技术股份有限公司-软研-智慧城市产品研发部招聘高级前端,欢迎来撩,有意向可发送简历到chen_zhen@dahuatech.com,长期有效