保存html代码格式化,保存代码时格式化代码风格
在使用时,我们经常会利用一些工具来帮我们做一些事情,比如统一团队成员的代码风格。
下面列举几种可以在保存文件时按照固定的代码风格格式化文件的方法
使用
使用
使用插件
中的默认提供了基本的代码格式化功能, 可以通过.来开启在保存时格式化文件。
中默认支持配置的语言有以下:
HTML
JSON
PHP
CSS
LESS
SCSS (Sass)
这些语言格式化的配置都可以很容易在中找到,并通过User 来修改,并且可以通过安装插件的形式支持其他语言的格式化处理.
来看一下html的默认配置
// / of HTML tags.
"html.": true,
// List of tags, comma , where the 't be . 'null' to the 'pre' tag.
"html..": "pre,code,",
// / HTML .
"html..": true,
// End with a .
"html..": false,
// List of tags, comma , that have an extra them. 'null' to "head, body, /html".
"html..": "head, body, /html",
// and {{#foo}} and {{/foo}}.
"html..": false,
//
and .
"html..": false,
// of line to be in one chunk. Use 'null' for .
"html..": null,
// line be . Only works , not tags or for text.
"html..": true,
// List of tags, comma , that 't be . 'null' to all tags at #-.
"html..": "wbr",
// Wrap .
// - auto: Wrap only when line is .
// - force: Wrap each first.
// - force-: Wrap each first and keep .
// - force--: Wrap each .
// - -: Wrap when line is , align .
"html..": "auto",
// of per line (0 = ).
"html..": 120,
// the built-in HTML V1 tags and .
"html..": false,
// the built-in HTML HTML5 tags, and .
"html..html5": true,
// the built-in HTML Ionic tags, and .
"html..ionic": false,
// the VS Code and the HTML .
"html.trace.": "off",
// the built-in HTML .
"html..": true,
// the built-in HTML .
"html..": true,
一般情况下,当你需要对某种程序语言的支持高亮,格式化等只需要安装相关插件即可,插件就会对文件进行关联,如果我们想要对一些特殊格式文件进行关联已有的语言,
我们可以使用"files."配置项来把一个扩展名结尾的文件与一种程序语言(需要安装对应的语言插件扩展)建立起关联
比如:
"files.": {
"*.vue": "vue" // 把以.vue结尾的文件和vue的语言关联起来
在脚手架项目中可以通过项目的自定义配置文件vue..js来开启
// vue..js
. = {
: true // false
yarn add - @vue/cli-- -D
这俩个包都允许你指定一定的规则去格式化代码,下面我们来做一些简单的引导。
配置规则
-
通过-可以在的打包规则中对js文件进行检查:
test: /\.js$/,
: //,
: "-",
: {
// (if )
: true, // 以错误的形式显示
: true, // 以警告的形式提示
quiet: true, // 仅仅显示错误,忽略警告
: true, //警告会导致编译失败
@vue/cli--
该插件配置代码格式通过 . 文件 或者 .json 中的 项来进行指定的配置。
默认情况使用这个来格式化代码和提示错误,
使用
按照下面几个步骤
安装的扩展
全局安装或者项目安装
# 在项目中安装
npm
# 全局安装
npm -g
中里面找到的配置. 设置为true
使用配置.设置node环境(mac下可以使用 which node 查看node的位置, 的话找到node的安装位置,复制路径字符串到该配置)
更改配置"."的值为
".": [
"",
"",
{ "": "html", "": true },
{ "": "vue", "": true}
安装vetur扩展
值得一提的是,.文件可以为依赖格式化代码的所有方式提供配置设置,而且优先级最高。