身为一个合格的前端人, 编辑器不可能只使用一个。 这篇文章就总结一些HBuilderX编辑器的一些使用心得。 让大家使用这款编辑器的时候更加的得心应手。
1. 用HBuilderX自带的格式化，只要识别到花括号就换行，怎么配置才能不换行
解决方案: 修改编辑器格式化的配置文件。
- 依次选择
工具 - 插件配置 - format - jsbeautifyrc.js文件 - 修改
jsbeautifyrc.js中的brace_style属性值为collapse,preserve-inline。
2. 使用代码片段snippets
HBuilderX的代码片段配置规则，跟vscode的代码片段配置规则基本一致。 区别是由于HBuilderX自动分成了HTML代码块， css代码块等模块。 所以配置项的
json中scope属性就失效了。 将vscode中的代码片段原封不动的粘贴进来就会失效。如果是想使用vscode的代码片段。 解决办法是，把scope这一行属性去掉就可以了。
-
想学习snippets的语法配置的可以看我这篇文章的总结 添加自定义代码片段snippet
-
这是我平常使用的js代码块配置
{
// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// ${1:defaultVal}, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
/* 自定义$.ajax方法 */
"ajax quick generate": {
"prefix": "ajax",
"body": [
"$.ajax({",
"\ttype : '${1|GET,POST,PUT,DELETE,UPDATE|}',",
"\tcontentType: '${2:application/json;charset=UTF-8}',",
"\turl: '${3: http://127.0.0.1/admin/list}',",
"\tdata: ${4|[],{}|},",
"\tsuccess: (${5:res}) => {",
"\t\tconsole.log(${5:res}, '$5');",
"\t},",
"\terror: (${6:err}) => {",
"\t\tconsole.error(${6:err}, '${6:err}');",
"\t},",
"});",
"$0"
],
"description": "$.ajax quick generate"
},
/* console.log 包含当前时间 */
"log with time": {
"prefix": "clt",
"body": [
"console.log(${1:defaultVal}, '${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}');",
"$0"
],
"description": "log with time"
},
/* console.log double */
"log double": {
"prefix": "cll",
"body": [
"console.log(${1:'测试数据'})$0"
],
"description": "console.log double加变量名"
},
/* console.error double */
"log error double": {
"prefix": "cee",
"body": [
"console.error(${1:defaultVal}, '${1:defaultVal}')$0"
],
"description": "console.error double加变量名"
},
/* console.warn double */
"log warn double": {
"prefix": "cww",
"body": [
"console.warn(${1:defaultVal}, '${1:defaultVal}')$0"
],
"description": "console.warn double加变量名"
},
/* 给console.log加当前时分秒时间戳 */
"log time": {
"prefix": "clt",
"body": [
"console.log(${1:'defaultVal'}, `${parseInt((Date.now() % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))}:${parseInt((Date.now() % (1000 * 60 * 60) / (1000 * 60)))}:${parseInt(Date.now() % (1000 * 60) / 1000)}`);$0"
],
"description": "console.log时分秒时间戳"
},
/* 醒目的色彩提示console.log 蓝色 */
"log color": {
"prefix": "clc",
"body": [
"console.log('%c ${1:defaultVal} ', 'background-image:color:transparent;color:blue;font-size:2em');",
"console.log(${1:defaultVal});$0"
],
"description": "log蓝色代码"
},
/* console.table 快捷实现 */
"log table": {
"prefix": "cltb",
"body": [
"console.log('${1:defaultVal}');",
"console.table(${1:defaultVal});$0"
],
"description": "log彩色代码"
},
/* 醒目的色彩提示console.log 红色 */
"log red color": {
"prefix": "clr",
"body": [
"console.log('%c ${1:defaultVal} ', 'background-image:color:transparent;color:red;font-size:2em');",
"console.log(${1:defaultVal});$0"
],
"description": "log红色代码"
},
/* 醒目的色彩提示console.log 绿色 */
"log green color": {
"prefix": "clg",
"body": [
"console.log('%c ${1:defaultVal} ', 'background-image:color:transparent;color:green;font-size:2em');",
"console.log(${1:defaultVal});$0"
],
"description": "log绿代码"
},
/* 醒目的色彩提示console.log */
"log yellow color": {
"prefix": "cly",
"body": [
"console.log('%c ${1:defaultVal} ', 'background-image:color:transparent;color:yellow;font-size:2em');",
"console.log(${1:defaultVal});$0"
],
"description": "log彩色代码"
},
/* 醒目的色彩提示console.log */
"log blue": {
"prefix": "cli",
"body": [
"console.log('%c${1:defaultVal}','color:transparent;color:blue;','=====');",
"console.log(${1:defaultVal});$0"
],
"description": "log_blue"
},
"log 1": {
"prefix": "cl1",
"body": [
"console.log('11111------ ${1:defaultVal} -----11111');",
"console.log(${1:defaultVal});$0"
],
"description": "console 1"
},
"log 2": {
"prefix": "cl2",
"body": [
"console.log('22222------ ${1:defaultVal} -----22222');",
"console.log(${1:defaultVal});$0"
],
"description": "console 2"
},
"log 3": {
"prefix": "cl3",
"body": [
"console.log('33333------ ${1:defaultVal} -----33333');",
"console.log(${1:defaultVal});$0"
],
"description": "console 3"
},
"log 4": {
"prefix": "cl4",
"body": [
"console.log('44444------ ${1:defaultVal} -----44444');",
"console.log(${1:defaultVal});$0"
],
"description": "console 4"
},
"log 5": {
"prefix": "cl5",
"body": [
"console.log('55555------ ${1:defaultVal} -----55555');",
"console.log(${1:defaultVal});$0"
],
"description": "console 5"
},
"log 6": {
"prefix": "cl6",
"body": [
"console.log('66666------ ${1:defaultVal} -----66666');",
"console.log(${1:defaultVal});$0"
],
"description": "console 6"
},
"log 7": {
"prefix": "cl7",
"body": [
"console.log('77777------ ${1:defaultVal} -----77777');",
"console.log(${1:defaultVal});$0"
],
"description": "console 7"
},
"log 8": {
"prefix": "cl8",
"body": [
"console.log('88888------ ${1:defaultVal} -----88888');",
"console.log(${1:defaultVal});$0"
],
"description": "console 8"
},
"log 9": {
"prefix": "cl9",
"body": [
"console.log('99999------ ${1:defaultVal} -----99999');",
"console.log(${1:defaultVal});$0"
],
"description": "console 9"
},
}
