保存html代码格式化,保存代码时格式化代码风格

保存时格式化代码风格

在使用VSCode时，我们经常会利用一些工具来帮我们做一些事情，比如统一团队成员的代码风格。

下面列举几种可以在保存文件时按照固定的代码风格格式化文件的方法

使用Formatting

使用lintOnSave

使用ESlint插件

VSCode中的Editor默认提供了基本的代码格式化功能, 可以通过editor.formatOnSave来开启在保存时格式化文件。

Editor中默认支持配置的语言有以下：

HTML

JSON

Markdown

PHP

TypeScript

CSS

LESS

SCSS (Sass)

这些语言格式化的配置都可以很容易在setting中找到，并通过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.js

module.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的配置。

默认情况使用codeframe这个formatter来格式化代码和提示错误，

使用ESlint

按照下面几个步骤

安装VSCode的ESlint扩展

全局安装或者项目安装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扩展

值得一提的是，.eslintrc文件可以为依赖eslint格式化代码的所有方式提供配置设置，而且优先级最高。