DCloud_heavensoft
DCloud_heavensoft
  • 发布:2018-08-01 12:42
  • 更新:2021-10-27 19:36
  • 阅读:55782

HBuilderX的nodejs插件配置

分类:HBuilder

HBuilderX支持多种插件,比较重要的一大类插件就是nodejs插件。
市场上存在大量的基于nodejs的工具,包括格式化、语法验证、编译器等等。
这类插件往往使用一个package.json来做插件配置。
在HBuilderX中使用这类插件说明如下。

  1. 在菜单工具-插件中选择要安装的插件。
  2. 插件安装后,有时会有三方依赖的module在继续安装,如果npm连不上,可能会安装失败。
  3. 安装成功后,对文件点右键-外部命令,展开的菜单里会有可用插件菜单。注意如果是语言依赖插件,比如less编译插件,必须对less文件点右键-外部命令,才会出现对应插件。在其他语言文件的右键里不会出现less编译插件。
  4. 除了命令本身的菜单,插件下还有配置菜单,点击会打开package.json文件,可以在里面设置快捷键、编译路径等,其中的command节点可用于自定义,说明如下:
{  
        //名称,用于在“工具-运行外部命令”菜单中显示  
        "name":"Echo",  
  
        //需要执行的外部命令及参数:  
        "command": [  
		"${programPath}",  
		"${file}",  
		"${fileBasename}.css" //以less为例,如果在aa.less文件上执行编译插件,{fileBasename}的值即为aa。  
	],  
        "extensions": "less", //设定在何种后缀名的文件中生效。即在非*.less文件的外部命令菜单里不会出现less编译选项。  
        "key": "ctrl shift r",  //快捷键, 可通过此快捷键直接运行此外部命令  
	"showInParentMenu": false, //是否显示在外部命令顶级菜单,如果该命令较常用且希望点击层次更少,可以使用此选项  
	"onDidSaveExecution": false //是否在保存时自动触发。如配为true,就会在保存时自动触发  
}  
    //------------外部命令 变量说明------------//  
    //"command"、"workingDir"中可使用预定义的变量来获取当前文件的路径信息  
    // - ${file}	当前文件的完整路径,比如 D:\files\test.txt  
    // - ${fileName}	当前文件的文件名,比如 test.txt  
    // - ${fileExtension}	当前文件的扩展名,比如 txt  
    // - ${fileBasename}	当前文件仅包含文件名的部分,比如 test  
    // - ${fileDir} 当前文件所在目录的完整路径,比如 D:\files  
    // - ${projectDir} 当前文件所在项目的完整路径,只有当前文件是项目管理器中某个项目下的文件时才起作用  

注意以上文件的注释仅作为教程说明,真实的package.json里无法编写注释。
5. eslint配置
对于eslint的语法校验插件,外部命令里还会有个.eslintrc.js配置。
打开后里面的文件有教程链接,这个是eslint的官方配置文件,请自定参考其教程配置。
6. jsbeautify、jshint配置
jsbeautify格式化插件和jshint语法校验插件属于HBuilderX的内置插件,这些配置文件在HBuilderX的setting里,点菜单工具设置,里面有beautify.和jshint.开头的节点,复制并在右侧用户设置里粘贴,然后修改保存即可生效。
7. 插件卸载
HBuilderX的插件均安装在HBuilderX所在目录的plugin目录下,不像很多其他软件安装在user目录下占用大量空间。
插件卸载其实就是删除plugin目录下的文件。
但很多nodejs插件的module文件数量非常多,这确实也是nodejs为人诟病的地方。os一般都有每次删除文件的上限,过多的文件会导致插件卸载失败。此时需要手动去node_modules目录里分批次删除文件。

5 关注 分享
Trust h***@qq.com e***@163.com 2***@qq.com yijiespace

要回复文章请先登录注册

1***@qq.com

1***@qq.com

修改了onDidSaveExecution之后重启并不能自动编译less
2021-10-27 19:36
9***@qq.com

9***@qq.com

配了一大堆 ,还是不能直接运行node.js,只能命令行运行
2020-12-15 11:10
2***@qq.com

2***@qq.com

回复 2***@qq.com :
https://jingyan.baidu.com/article/3c48dd34a4fe2ce10be358d5.html
2020-10-13 11:40
2***@qq.com

2***@qq.com

回复 随风行 :
使用node运行文件
2020-10-13 11:40
随风行

随风行

回复 没有的没有 :
请问你解决了吗
2020-09-27 01:37
没有的没有

没有的没有

请问怎么直接在HBuliderX中运行nodejs文件
2020-06-30 23:10
DCloud_HB_WDL

DCloud_HB_WDL

回复 lastspring :
感谢反馈,后期修复。
2020-05-29 11:17
lastspring

lastspring

app.consumer.less 编译的时候会省略中间拓展部分
2020-05-26 17:53
lastspring

lastspring

app.consumer.less 编译的时候会省略中间拓展部分
2020-02-05 16:25
blueSky

blueSky

回复 pengjm1121 :
1、安装node
2、全局安装less less-plugin-clean-css
3、HX安装less插件compile-less
npm install -g less less-plugin-clean-css
4、从C:\Users\XXX(你的用户名)\AppData\Roaming\npm\node_modules复制less-plugin-clean-css文件夹到HBuilderX\plugins\compile-less\node_modules目录
5.配置compile-less插件的package.json
{
"name": "less",
"id": "compile-less",
"version": "1.0.1-2018103019",
"external": {
"type": "node",
"programPath": "${pluginPath}",
"executable": "/node_modules/.bin/lessc",
"programName": "less",
"commands": [
{
"id": "LESS_COMPILE",
"name": "编译less",
"command": [
"${programPath}",
"${file}",
"${fileBasename}.min.css",
"-clean-css"
],
"extensions": "less",
"key": "",
"showInParentMenu": false,
"onDidSaveExecution": true
}
]
},
"dependencies": {
"less": "3.9.0"
},
"extensionDependencies": [
"npm"
],
"description": "less插件用于less文件编译"
}
6、重启HX,less保存less文件将会自动编译并压缩为.min.css
2019-12-11 17:59