VSCode 代码格式化

VsCode 代码格式化

文件格式化

  Ctrl +Alt + L 是格式化当前文件的快捷键，可以手动设置为其它的组合键，但是一般情况没必要修改。
  在文件中右键之后，点击选择黄色箭头指向的部分，可以手动选择格式化当前文档使用的插件。同时也可以设置默认值，要先安装对应的插件。我是用的是 Prettier - Code formatter 插件。

更多关于 Prettier
根据推荐：
Prettier 用来格式化 JavaScript / TypeScript / CSS
VS Code package to format your JavaScript / TypeScript / CSS using Prettier.

  修改 setting.json 文件的时候，输入完属性名，再输入冒号会提示可以输入的值。setting.json 中按下Ctrl键鼠标移动到配置项上面。就会出现对该配置的具体解释。

文件类型关联

  让 VsCode 把指定后缀的文件视为另外一种指定的文件类型处理。方便其调用各种插件完成智能补全、格式化等功能。

 // 文件之间关联，给指定的文件后缀 指定类型方便其去根据类型调用相关插件等等
  "files.associations": {
    "*.tpl": "html",   // 把tpl后缀的文件同样视为html文件处理。
  },

HTML

格式化*.html 文件

  html的格式化是vscode原生支持的。调整配置下就可以使用了。一般情况不需要换插件来格式化。如果需要修改格式化 html 使用的插件，在的 settings.json 中的配置项为：

  "[html]": {
      "editor.defaultFormatter": "vscode.html-language-features" // 使用功能vscode 自带的格式化功能
  },

相关配置，下面的配置是对vscode内置的html格式化功能生效的。

{
  "html.format.wrapAttributes": "force", // html 属性强制换行
  "html.format.unformatted": "wbr,head", // head标签中的内容不会被格式化
}

具体的配置详见：html格式化配置
  如果要使用其他的插件来格式化html文件要先使用 “html.format.enable”: false 关闭内置的格式化功能。具体的格式化配置要看具体插件的使用。

格式化*.vue 文件中的 template 标签中的 html 代码

  安装 Vetur 插件。然后在 setting.json 中配置，指定格式化这部分 html 使用的插件。也可不指定，会使用默认值。

{
  "vetur.format.defaultFormatter.html": "js-beautify-html"
}

JavaScript

格式化*.js 文件

设置格式化 JavaScript 使用的默认插件，对应的 settings.json 中的配置项为：

  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

格式化*.vue 文件中的 script 标签中的 JavaScript 代码

  同样使用 Vetur 插件，setting.json 中的配置为：

默认的就不错，不怎么需要修改，

{
  "vetur.format.defaultFormatter.js": ***,
}

相关的配置：

  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true,  //javascript 显示为单引号
      "semi": true,         //javascript 行尾加分号
    }
  },