0
点赞
收藏
分享

微信扫一扫

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​​明确设置:Vetur ​​vetur.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,
}

 

更多内容请关注:​​​GitHub​​​、​​gitee​​

举报

相关推荐

0 条评论