Hbuilder X

Hbuilder X (opens new window) 建议使用最新版本

Prettier 格式化代码

为什么使用 Prettier 格式化代码？

• 按保存键时，代码就被格式化了
• 代码评审时无须争论代码样式
• 节省时间和精力

安装

1. 工具 --> 插件安装 --> Prettier 安装
2. 工具 --> 设置 --> 插件配置，启用 prettier，并修改 prettier.config.js 配置如下：

// Prettier配置文档：https://prettier.io/docs/en/options.html
module.exports = {
  printWidth: 200, // 每行代码的最大长度限制
  tabWidth: 4, // 选项用于控制制表符的宽度
  useTabs: false, //指定是否使用制表符代替空格
  semi: false, // 指定是否在语句的末尾添加分号
  singleQuote: true, //指定是否使用单引号定义字符串
  quoteProps: "as-needed", //指定对象字面量的键是否需要引号。设置为 "as-needed" 表示只有在必要时才添加引号
  jsxSingleQuote: false, // 指定在JSX中是否使用单引号或双引号来定义字符串
  trailingComma: "all", //指定在多行数组或对象字面量中是否添加尾随逗号
  bracketSpacing: true, // 指定是否在对象字面量中的大括号前后添加空格
  bracketSameLine: false, //指定大括号是否与声明在同一行
  arrowParens: "avoid", // 指定箭头函数的参数是否添加括号
  proseWrap: "preserve", // 指定是否在Markdown文件中启用折行
  htmlWhitespaceSensitivity: "ignore", // 指定HTML文件中空格处理的敏感度
  vueIndentScriptAndStyle: true, //指定Vue文件中的脚本和样式标签是否缩进
  embeddedLanguageFormatting: "auto", // 指定在嵌入语言（如HTML或JSX）中的代码格式化方式
  singleAttributePerLine: false, // 强制在 HTML、Vue 和 JSX 中每行执行一个属性
  endOfLine: "lf",
  //自定义文件后缀对应的parser
  parsers: {
    ".nvue": "vue",
    ".ux": "vue",
    ".uvue": "vue",
    ".uts": "typescript",
  },
};

3. 自定义 Prettier 的生效文件范围

**/*.vue,**/*.nvue,**/*.ux,**/*.ts,**/*.tsx,**/*.less,**/*.sass,**/*.scss,**/*.js

4. 工具 --> 设置 --> 编辑器配置；启用保存时自动格式化

然后测试一下是否生效，如不生效，检查下 工具 --> 设置 --> 源码试图，在用户设置中加入如下配置即可。

"defaultFomat.vue": "formator-prettier",

自定义快捷键

工具 -> 自定义快捷键

[
  //删除行
  // {"key":"ctrl+d","command":"editor.action.deleteLines"},
  //选择当前词或下一个相同词
  // {"key":"ctrl+e","command":"editor.action.addSelectionToNextFindMatch"}
  { key: "ctrl+alt+down", command: "editor.action.duplicate", override: true },
];

代码块设置

工具 -> 代码块设置

javascript 自定义代码块

{
    // 注意：本文档仅支持单行注释，并且'//'前不能有任何非空字符！！！
    //
    // HBuilderX使用json扩展代码块，兼容vscode的代码块格式
    // 本文档修改完毕，保存即可生效，无需重启。
    // 本文档用于用户自定义{1}代码块。
    // 每个配置项的说明如下：
    // 'key'    ：代码块显示名称，显示在代码助手列表中的名字，以下例子中'console.log'就是一个key。
    // 'prefix' ：代码块的触发字符，就是敲什么字母匹配这个代码块。
    // 'body'   ：代码块的内容。内容中有如下特殊格式
    //          $1 表示代码块输入后光标的所在位置。如需要多光标，就在多个地方配置$1,如该位置有预置数据，则写法是${1:foo1}。多选项即下拉候选列表使用${1:foo1/foo2/foo3}
    //          $2 表示代码块输入后再次按tab后光标的切换位置tabstops（代码块展开后按tab可以跳到下一个tabstop）
    //          $0代表代码块输入后最终光标的所在位置（也可以按回车直接跳过去）。
    //          双引号使用\\'转义
    //          换行使用多个数组表示，每个行一个数组，用双引号包围，并用逗号分隔
    //          缩进需要用\\t表示，不能直接输入缩进！
    // 'triggerAssist' ：为true表示该代码块输入到文档后立即在第一个tabstop上触发代码提示，拉出代码助手，默认为false。
    // 每个代码块以key为主键，多个代码块需要逗号分隔。
    // 如果json语法不合法，底部会弹出错误信息，请注意修正。
    // 例子:
    // "console.log": {
    //  "prefix": "logtwo",
    //  "body": [
    //      "console.log('$1');",
    // 	    "\tconsole.log('$2');"
    // 	],
    // 	"triggerAssist": false,
    // 	"description": "Log output to console twice"
    // }
	"function": {
		    "body": [
		        "function () {",
		        "\t$1",
		        "}"
		    ],
		    "prefix": "fc",
		    "scope": "source.js"
		},
		"init = function": {
		    "body": [
		        "init = function () {",
		        "\t$1",
		        "}"
		    ],
		    "prefix": "init",
		    "scope": "source.js"
		},
		"init = myApp": {
		    "body": [
		        "myApp.$1"
		    ],
		    "prefix": "my",
		    "scope": "source.js"
		},
		"setTimeout function": {
		    "body": [
		        "setTimeout(function() {$0}, ${1:10});"
		    ],
		    "prefix": "settout",
		    "scope": "source.js"
		}
}