保存时格式化代码风格
在使用VSCode时，我们经常会利用一些工具来帮我们做一些事情，比如统一团队成员的代码风格。
下面列举几种可以在保存文件时按照固定的代码风格格式化文件的方法
- 使用Formatting
- 使用lintOnSave
- 使用ESlint插件
使用
VSCode中的Editor默认提供了基本的代码格式化功能, 可以通过editor.formatOnSave来开启在保存时格式化文件。
Editor中默认支持配置的语言有以下：
- HTML
- JSON
- Markdown
- PHP
- TypeScript
- CSS
- LESS
- SCSS (Sass)
这些语言格式化的配置都可以很容易在中找到，并通过User Setting来修改，并且可以通过安装插件的形式支持其他语言的格式化处理.
来看一下html的默认配置
{ // Enable/disable autoclosing of HTML tags. "html.autoClosingTags": true, // List of tags, comma separated, where the content shouldn't be reformatted. 'null' defaults to the 'pre' tag. "html.format.contentUnformatted": "pre,code,textarea", // Enable/disable default HTML formatter. "html.format.enable": true, // End with a newline. "html.format.endWithNewline": false, // List of tags, comma separated, that should have an extra newline before them. 'null' defaults to "head, body, /html". "html.format.extraLiners": "head, body, /html", // Format and indent { {#foo}} and { {/foo}}. "html.format.indentHandlebars": false, // Indent and sections. "html.format.indentInnerHtml": false, // Maximum number of line breaks to be preserved in one chunk. Use 'null' for unlimited. "html.format.maxPreserveNewLines": null, // Controls whether existing line breaks before elements should be preserved. Only works before elements, not inside tags or for text. "html.format.preserveNewLines": true, // List of tags, comma separated, that shouldn't be reformatted. 'null' defaults to all tags listed at https://www.w3.org/TR/html5/dom.html#phrasing-content. "html.format.unformatted": "wbr", // Wrap attributes. // - auto: Wrap attributes only when line length is exceeded. // - force: Wrap each attribute except first. // - force-aligned: Wrap each attribute except first and keep aligned. // - force-expand-multiline: Wrap each attribute. // - aligned-multiple: Wrap when line length is exceeded, align attributes vertically. "html.format.wrapAttributes": "auto", // Maximum amount of characters per line (0 = disable). "html.format.wrapLineLength": 120, // Controls whether the built-in HTML language support suggests Angular V1 tags and properties. "html.suggest.angular1": false, // Controls whether the built-in HTML language support suggests HTML5 tags, properties and values. "html.suggest.html5": true, // Controls whether the built-in HTML language support suggests Ionic tags, properties and values. "html.suggest.ionic": false, // Traces the communication between VS Code and the HTML language server. "html.trace.server": "off", // Controls whether the built-in HTML language support validates embedded scripts. "html.validate.scripts": true, // Controls whether the built-in HTML language support validates embedded styles. "html.validate.styles": true,} 一般情况下，当你需要VSCode对某种程序语言的支持高亮，格式化等只需要安装相关插件即可，插件就会对文件进行关联，如果我们想要对一些特殊格式文件进行关联已有的语言，
我们可以使用"files.associations"配置项来把一个扩展名结尾的文件与一种程序语言（需要安装对应的）建立起关联 比如：
"files.associations": { "*.vue": "vue" // 把以.vue结尾的文件和vue的语言关联起来} 使用
在VueCLI3脚手架项目中可以通过项目的自定义配置文件vue.config.js来开启
// vue.config.jsmodule.exports = { lintOnSave: true // default false} 使用该配置选项开启保存时格式化代码文件，需要安装开发依赖 和 俩个
yarn add eslint-loader @vue/cli-plugin-eslint -D
这俩个包都允许你指定一定的规则去格式化代码,下面我们来做一些简单的引导。
配置规则
- eslint-loader
通过eslint-loader可以在webpack的打包规则中对js文件进行检查：
{ test: /\.js$/, exclude: /node_modules/, loader: "eslint-loader", options: { // eslint options (if necessary) emitError: true, // 以错误的形式显示 emitWarning: true, // 以警告的形式提示 quiet: true, // 仅仅显示错误，忽略警告 failOnWarning: true, //警告会导致编译失败 }} - @vue/cli-plugin-eslint
该插件配置代码格式通过 .eslintrc 文件 或者 package.json 中的 eslintConfig 项来进行指定的配置。
使用ESlint
按照下面几个步骤
- 安装VSCode的扩展
-
全局安装或者项目安装
eslint# 在项目中安装 npm install eslint # 全局安装 npm install -g eslint
- VSCode中Settings里面找到ESlint的配置
eslint.autoFixOnSave设置为true - 使用配置
eslint.nodePath设置node环境（mac下可以使用 which node 查看node的位置, windows的话找到node的安装位置，复制路径字符串到该配置） -
更改配置"eslint.validate"的值为
"eslint.validate": [ "javascript", "javascriptreact", { "language": "html", "autoFix": true }, { "language": "vue", "autoFix": true}] - 安装vetur扩展
