vscode代码格式化配置 。

目的

统一团队代码风格，防止协作中不必要的冲突，团队主要技术栈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"}复制代码

1. 文件头部注释会自动生成。

2. 函数注释，使用快捷键window：ctrl+alt+t,mac：ctrl+cmd+t，即可生成。

注意事项

1. 如果有多个格式化插件，可以右键选择默认格式化方式为Vetur或者Prettier。

2. 项目根目录下这些个性化设置会覆盖编辑器的配置。

.vscode/settings.json

.editorconfig

.prettierrc（如果安装了prettier插件）