微信开发者工具默认竟然没有打开文件保存格式化功能,正确的打开姿势请看这里

前言

代码格式化对于程序员来说,是个高频使用的功能。直接影响编程体验,如果每次写完代码后,还要手动排版,那写代码得多费力,编程效率得多低。然而我惊讶的发现,微信开发者工具默认没有打开文件保存自动化格式开关,需要开发者自己去打开,打开之后,保存js和json文件时,会提示有两个格式化扩展可以选择,然而开发者对这些格式化扩展的功能不太了解,不知道有哪些配置项。不知道应该选择哪个格式化扩展。本文带你了解一下微信开发者工具自带的格式化扩展的美化规则。让你选择时不再茫然,现在我们进入主题。

这是微信开发者工具的初始配置:

json 复制代码
 {
    "editor.fontFamily": "Consolas",
    "editor.fontSize": 14,
    // 设置代码行间距
    "editor.lineHeight": 0,
    "files.autoSave": "off",
    // 是否自动换行
    "editor.wordWrap": "on",
    // 控制是否显示缩略图。
    "editor.minimap.enabled": false,
    // 按tab时插入空格
    "editor.insertSpaces": true,
    "editor.tabSize": 4,
    // 单击文件,在工作区已经打开的tab区域展示文件内容而不是新开tab展示单击文件内容
    "workbench.editor.enablePreview": true,
    // 通过ctrl+p搜索打开的文件,在原来的tab区域展示文件而不是新开tab展示
    "workbench.editor.enablePreviewFromQuickOpen": true
}

对这些配置有修改或者添加新配置,都属于自定义配置。

当你在setting.json中配置了下面这一句的时候,文件保存的时候,就会自动进行格式化。

json 复制代码
"editor.formatOnSave": true,

你会发现,当格式化js和json文件时,js和json文件默认都有两个开发工具自带的格式化扩展。

js的两个默认格式化扩展是: Beautify和TypeScript and JavaScript Language Features

json两个默认的格式化扩展是: Beautify和JSON Language Features

开发工具遇到这两种文件,对它们进行格式化时,就比较犯难了。不知分别采用哪种格式化扩展。其实使用者也比较纠结,因为我们不太了解这几个格式化扩展,所以无从选择。为了让我们的选择有理有据。我们了解一下这三个微信开发者工具自带的格式化扩展。

1. 先看第一个 Beautify HookyQR.beautify

它可以美化js,json,css,sass,html代码,这个美化扩展是VSCode默认使用的美化扩展, 可以创建一个.jsbeautifyrc文件配置美化规则,也可以在VSCode的setting.json文件中配置美化规则。注意同样的规则,在.jsbeautifyrc和VSCode setting.json中配置,规则名称书写不一样。

有的美化规则是通用的,有的美化只适用html, js|html, css, js。

.jsbeautifyrc VSCode
eol files.eol (all)
end_with_newline html.format.endWithNewline(html)
end_with_newline file.insertFinalNewLine(css,js)
space_in_paren javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis(js)

下面是具体的美化规则

完整配置点击这里查看

Setting Description Formatter Default
eol 行结尾字符 All "\n"
end_with_newline 文件结尾是否空出一行 All false
indent_char 缩进填充字符 All " "
indent_size 缩进大小 All 4
indent_with_tabs 用tab缩进,会覆盖缩进填充字符与缩进大小配置 All false
preserve_newlines 保留空行 All true
max_preserve_newlines 一次最多保留多少行的空行,默认是10 JS, HTML 10
wrap_line_length 一行最大的字符数 JS, HTML 0
extra_liners 标签前面加空行 HTML ["head", "body", "/html"]
indent_body_inner_html 缩进 标签 HTML true
indent_handlebars 格式化双括号里面的内容,如{{#foo}}或{{/foo}} HTML false
indent_head_inner_html 缩进 标签 HTML true
indent_inner_html 缩进 标签 HTML false
indent_scripts 缩进 HTML "normal"
inline 配置项是个数组,里面配置的html标签,不格式化时换行 HTML [ "a", "abbr", "area", "audio", "b", "bdi", "bdo", "br", "button", "canvas", "cite", "code", "data", "datalist", "del", "dfn", "em", "embed", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "map", "mark", "math", "meter", "noscript", "object", "output", "progress", "q", "ruby", "s", "samp", "select", "small", "span", "strong", "sub", "sup", "svg", "template", "textarea", "time", "u", "var", "video", "wbr", "text", "acronym", "address", "big", "dt", "ins", "strike", "tt" ]
wrap_attributes 每个属性是否单独一行 HTML "auto"
wrap_attributes_indent_size 每个属性的缩进大小,默认缩进字符数是indent_size设置的大小 HTML false
unformatted 不格式化的tag HTML []
content_unformatted 标签里面的内容不格式化 HTML ["pre", "textarea"]
void_elements 不格式化自闭合的标签 如 HTML ["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "menuitem", "meta", "param", "source", "track", "wbr", "!doctype", "?xml", "?php", "?=", "basefont", "isindex"]
newline_between_rules 在每个CSS规则之间增加一行 CSS false
selector_separator_newline 多个选择器之间增加一行 CSS true
space_around_combinator 在后代选择器 > 兄弟选择器 + ~ CSS false
brace_style 大括号的风格{} JS "collapse"
break_chained_methods 链式方法是否换行 JS false
comma_first 是否将逗号放在新行的开头而不是结尾 JS false
e4x e4x-可以把 XML 文档定义为 JavaScript 对象,保持原有定义格式,不做处理。 JS false
indent_level 初始缩进级别 JS 0
jslint_happy 开启启用jslint-stricter模式,强制在匿名函数之前的括号中加一个空格 JS false
keep_array_indentation 保留数组缩进 JS false
keep_function_indentation 保留函数缩进 JS false
operator_position 将运算符移到新行之前或之后,或者保持原样 JS "before-newline"
space_after_anon_function 在匿名函数的括号之前添加一个空格 JS false
space_after_named_function 在命名函数的括号之前添加一个空格 JS false
space_before_conditional 在条件语句前添加一个空格 JS true
space_in_empty_paren 在空的圆括号中留空格 JS false
space_in_paren 在有参数的括号内添加空格 JS false
unescape_strings 不转义 以\xNN 表示的可打印字符,示例 "\x65\x78\x61\x6d\x70\x6c\x65" JS false
unindent_chained_methods 不缩进链式方法 JS false

2.接着看TypeScript and JavaScript Language Features vscode.typescript-language-features

打包在VS Code中的typescript-language-features插件,它利用TypeScript Language Service提供了诸如下面罗列的编程式语言特性:

关于格式化的规则有如下这些:

这是翻译版

3.再看 JSON Language Features vscode.json-language-features

VSCode自带的json工具包配置项很少,想想json的语法格式比较简单,配置项很少,但是够用了。

这是翻译版

4.如果对微信自带的某种格式化扩展不满意,可以在VSCode应用市场,寻找其它的扩展。

比如你对微信开发者工具自带的格式化wxml文件效果不满意。那么你可以使用VSCode的wxConfig扩展格式wxml文件。在微信开发者工具中使用VSCode扩展的方法参见我的另外一篇文章 VSCode 微信小程序扩展开发

这是使用微信开发者工具自带的扩展vscode.html-language-features格式化wxml文件的效果

这是安装了wxmlConfig扩展,选择使用wxmlConfig格式化.wxml文件的效果

这是wxmlConfig默认的一些配置

json 复制代码
    "wxmlConfig.format": {
        "brace_style": "collapse",
        "end_with_newline": false,
        "indent_char": "",
        "indent_handlebars": false,
        "indent_inner_html": false,
        "indent_scripts": "keep",
        "indent_size": 2,
        "indent_with_tabs": true,
        "max_preserve_newlines": 1,
        "preserve_newlines": true,
        "wrap_attributes": "force-expand-multiline"
    },
    "wxmlConfig.tagNoActiveArr": [
        "view",
        "button",
        "text",
        "icon",
        "image",
        "navigator",
        "block",
        "input",
        "label",
        "template",
        "form",
        "camera",
        "textarea"
    ],
    "wxmlConfig.onSaveFormat": true,

5. 如果只使用微信开发者工具自带的格式化扩展,要实现对.js,.json,.wxss,.wxs,文件格式化,建议的配置如下:

json 复制代码
{
  "editor.insertSpaces": true,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": true,
  "editor.formatOnSave": true, // 打开代码格式化功能
  "editor.wordWrapColumn": 120, // 每行超过多少个字换行
  "editor.rulers": [120], // 最大列宽标尺
  "editor.foldingStrategy": "indentation", // 代码折叠时有缩进效果
  "editor.tabSize": 2, // tab使用2个空格
  "files.eol": "\n", // 文件结尾使用\n而不是\r\n换行
  "wxml.format.wrapAttributes": "aligned-multiple", // wxml超过一行最大字数属性垂直对齐
  "files.autoSave": "onFocusChange", // 文件失焦是自动保存
  "files.associations": { // 定义文件与格式化扩展之间的关联
    "*.json": "jsonc", // 在json文件中可以写注释
    "*.wxss": "css",
    "*.wxs": "javascript"
 },
  "[javascript]": { // 指定语言使用的格式化扩展,解决一类文件会触发多个格式化扩展引起的冲突问题
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[css]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[json]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  } 

将这些配置写入到项目根目录下的.vscode/settings.json文件中。

6.配置完之后,发现2个问题。

6.1 第一是HookyQR.beautify不支持命令行批量初始格式化整个项目。

不使用命令行,一个一个保存文件进行格式化,效率太低。而prettier虽然支持命令行,但却无法在微信开发者工具中使用。因此,最好的策略就是先用prettier把项目所有的文件格式化一遍,后续再用HookyQR.beautify在保存文件时格式化代码。

package.json配置

json 复制代码
{
  "scripts": {
    "format": "prettier --write  **/*.{wxml,js,wxss,wxs,json}"
  },
  "devDependencies": {
    "prettier": "^2.2.1"
  }
}

.prettierrc.js配置

js 复制代码
module.exports = {
  // 换行的宽度,默认80
  printWidth: 120,
  // Tab字符的空格数量,默认值2
  tabWidth: 2,
  // 使用tab替代空格缩进,默认值false
  useTabs: false,
  // 语句结尾添加分号,默认值true
  semi: true,
  // 使用单引号替代双引号,默认值false
  singleQuote: true,
  // 对象的属性(键)是否需要引号包裹,默认值as-needed(按需添加)
  quoteProps: 'as-needed',
  // 多行时是否添加尾随逗号,默认值从2.0版本开始使用es5
  trailingComma: 'es5',
  // 对象字面量的括号之间是否需要空格,默认值true
  bracketSpacing: true,
  // 箭头函数单独的参数是否需要括号包裹,默认值从2.0版本开始使用always
  arrowParens: 'always',
  // HTML文件的空格敏感度,默认值css
  htmlWhitespaceSensitivity: 'css',
  // 换行符,默认值从2.0版本开始使用lf
  endOfLine: 'lf',
  // 微信小程序自定义的文件格式 Prettier 无法识别,因此需要在重写配置里面 指定解析器处理。
  overrides: [
    {
      files: '*.wxml',
      options: { parser: 'html' },
    },
    {
      files: '*.wxss',
      options: { parser: 'css' },
    },
    {
      files: '*.wxs',
      options: { parser: 'babel' },
    },
  ],
};

.prettierignore配置

json 复制代码
.vscode
libs
node_modules
miniprogram_npm
yarn.lock
project.config.json

6.2 第二个问题是对.wxss文件格式化时,在.vscode/settings中配置的缩进2个空格不生效。

每个tab是2个空格,可是{}里面的属性缩进却是4个空格。在网上没找到如何在.vscode/settings.json配置wxss格式化缩进2个空格的方法,但是搜到在.jsbeautifyrc中配置wxss缩进2个空格的方法,在.jsbeautifyrc做如下配置即可。

json 复制代码
{
  "brace_style": "none,preserve-inline",
  "indent_size": 2,
  "indent_char": " ",
  "jslint_happy": true,
  "wrap_attributes": "auto",
  "keep_array_indentation": false,
  "selector_separator_newline": false,
  "unformatted": [""]
}

参考文章:

相关推荐
程序员入门进阶6 小时前
基于微信小程序的电子购物系统的设计与实现(lw+演示+源码+运行)
微信小程序·小程序
我很苦涩的10 小时前
微信小程序使用uni cli框架绘制echarts图表
微信小程序·小程序·echarts
慢慢雨夜13 小时前
uniapp发布到微信小程序,提示接口未配置在app.json文件中
微信小程序·小程序·uni-app
杨天天.17 小时前
微信小程序原生 canvas画布截取视频帧保存为图片并进行裁剪
微信小程序·小程序·音视频
一介青烟小生18 小时前
微信小程序自定义tabbar;禁用某个tab;修改某个tab的样式
微信小程序·小程序·notepad++
尘浮生18 小时前
Java项目实战II基于微信小程序的订餐系统(开发文档+数据库+源码)
java·开发语言·数据库·spring boot·后端·微信小程序·小程序
孩子 你要相信光20 小时前
HBuilderX运行微信小程序,编译的文件在哪,怎么运行
微信小程序·小程序
烤奶要加冰1 天前
uniapp解析蓝牙设备响应数据bug
前端·微信小程序·uni-app
Ares码农人生1 天前
vue.js组件和传值以及微信小程序组件和传值
vue.js·微信小程序·uniapp
尘浮生1 天前
Java项目实战II基于微信小程序的实习记录(开发文档+数据库+源码)
java·开发语言·数据库·spring boot·后端·微信小程序·小程序