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。运行prettiereslint --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-beautifyprettyhtml或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,
}

 

你可能感兴趣的:(Vue全家桶自学笔记,前端学习,工具)