vetur自动格式化官方文档翻译——wsdchong
vetur自动格式化官方文档翻译
翻译文章地址
格式化
Vetur支持格式化html/pug/css/scss/less/postcss/stylus/js/ts。
补充：
pug：官方文档 。pug是一款专门为node.js平台开发的HTML模块引擎。
less：官方文档。less是一门CSS预处理语言。
scss：官方文档。scss（sass）是世界上最成熟、稳定强大的专业级CSS预处理语言。
postcss：官方文档。postcss是使用js插件来转换CSS的工具。
stylus：官方文档。stylus是node.js平台上的CSS预处理框架。
Vetur只具有“整个文档格式化程序”，不能任意范围格式化。 并且，只有Format Document命令可用。 Format Selection命令不起作用。
格式化程序
这些格式化插件可用：
-
prettier：用于css / scss / less / js / ts。 -
prettier使用@ prettier / plugin-pug：用于pug。 -
prettier-eslint：用于js。运行prettier和eslint --fix。 -
prettyhtml：用于html。 -
stylus-supremacy：用于stylus。 -
vscode-typescript：用于js / ts。 -
sass-formatter：用于.sass文件。
补充：
pretties：官方文档。代码格式化工具，能够解析代码，使用用户设定的规则格式化规范的代码。
prettyhtml：官方文档。为vue或纯HTML模板等提供通用格式化的工具。
stylus-supremacy：官方文档。用于格式化stylus文件的node.js模块。
Vetur捆绑了上述所有格式化程序。当Vetur观察到格式化程序的本地安装时，它将更喜欢使用本地版本。
您可以在VS Code配置中选择每种语言的默认格式设置vetur.format.defaultFormatter。 将语言的格式化程序设置为none禁用该语言的格式化程序。
当前默认值：
{
“ vetur.format.defaultFormatter.html ”：“ prettyhtml ”，
“ vetur.format.defaultFormatter.pug ”：“prettier”，
“ vetur.format.defaultFormatter.css ”：“prettier”，
“ vetur.format.defaultFormatter.postcss “：”prettier“，
” vetur.format.defaultFormatter.scss “：”prettier“，
”vetur.format.defaultFormatter.less “：”prettier“，
” vetur.format.defaultFormatter.stylus “：”stylus-supremacy“，
” vetur.format.defaultFormatter.js “：”prettier“，
” vetur.format.defaultFormatter。 ts “：”prettier“，
” vetur.format.defaultFormatter.sass “：” sass-formatter “
}
设定
全局开关vetur.format.enable可打开和关闭Vetur格式器。如果想让Prettier 控制器将*.vue文件格式，这将很有用。
-
使用Prettier的好处：CLI支持，一个格式化程序。
-
缺点：没有stylus的支持，无法使用
js-beautify，prettyhtml或TypeScript的格式化。
Vetur 格式化设置
这两个设置被所有格式化程序继承：
{
"vetur.format.options.tabSize ":2,
"vetur.format.options.useTabs ":false
}
但是，当.prettierrc找到本地配置（例如）时，Vetur会优先选择它。例如：
-
.prettierrc存在但未tabWidth明确设置：Veturvetur.format.options.tabSize用作tabWidth用于prettier。 -
.prettierrc存在并tabWidth显式设置：Vetur忽略vetur.format.options.tabSize，始终使用.prettierrc中的值。
useTabs 以相同的方式工作。
prettier
固执己见的格式化工具。从.prettierrc项目根目录读取设置。请参阅https://prettier.io/docs/en/configuration.html上的格式。
如果要设置全局更漂亮的设置，请执行以下任一操作：
-
.prettierrc在您的主目录中进行配置 -
使用以下配置，并且不要在主目录中包含
.prettierrc"vetur.format.defaultFormatterOptions" :{ "prettier":{ // Prettier option here " semi ": false } }
prettier-eslint
prettier+ eslint --fix。设置是在项目的根阅读.prettierrc和.eslintrc。
全局配置：与prettier全局配置相同。
prettyhtml
Vue模板的默认格式化程序。
其他设置包括：
"vetur.format.defaultFormatterOptions": {
" prettyhtml": {
"printWidth'": 100, // 每一行不超过100个字符
"singleQuote": false // 体型双引号在单引号
},
}
}
从本地.prettierrc配置中读取prettier选项。
vscode-typescript
VS Code的基于TypeScript语言服务的js / ts格式化程序。
从javascript.format.*和typescript.format.*读取设置。
js-beautify-html
备用html格式器。
默认设置在这里。您可以通过设置覆盖它们vetur.format.defaultFormatterOptions.js-beautify-html。
“ vetur.format.defaultFormatterOptions ”：{
“ JS-beautify-HTML ”：{
// JS-beautify-HTML的设置在这里
}
}
stylus-supremacy
从stylus Supremacy.*中读取其他的设置。你可以安装Stylus Supremacy扩展来获取IntelliSense的设置，但是Vetur可以在没有它的情况下工作。一个有用的默认值：
{
"stylusSupremacy.insertBraces": false, // 是否插入大括号
"stylusSupremacy.insertColons": false, // 是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 是否插入分号
}
sass-formatter
从sass.format.*中读取设置。您可以安装Sass扩展程序以获取IntelliSense的设置，但是Vetur可以在没有它的情况下运行。一个有用的默认值：
{
// 启用调试模式。
"sass.format.debug": false,
// 删除空格
"sass.format.deleteEmptyRows": true,
// 删除最后一个空格。
"sass.format.deleteWhitespace": true,
// 将 scss / css 转换为 sass。
"sass.format.convert": true,
// 如果 属性:值 为true,则始终设置为1.
"sass.format.setPropertySpace": true,
}