目录

一、HBuilder X下载安装

 二、下载安装scss/sass

三、HBuilderX个性化配置

3.1 快捷键方案切换

3.2 修改编辑器的基本设置


一、HBuilder X下载安装

(1)进入官网HBuilderX-高效极客技巧

Hbuild 怎么安装yarn hbuilderx压缩包怎么安装_下载安装

(2)根据自己的电脑来选择版本的压缩包,等待下载完成。

我在此处选择的是“Alpha版”。

(3)打开已经下载好的zip压缩包,将下载的zip压缩包进行解压缩,

注意:解压的路径中是英文,不能包含括号等特殊字符。

Hbuild 怎么安装yarn hbuilderx压缩包怎么安装_scss_02


(4)解压成功之后,打开文件夹,找到HBuilderX.exe,双击运行,

Hbuild 怎么安装yarn hbuilderx压缩包怎么安装_下载安装_03


 (5)双击运行之后,就会出现下面这个界面,可以选择喜欢的主题。

Hbuild 怎么安装yarn hbuilderx压缩包怎么安装_sass_04


 (6)当我们退出时,它检测到桌面没有快捷方式,会进行提示是否创建快捷方式。

Hbuild 怎么安装yarn hbuilderx压缩包怎么安装_sass_05


 点击“是”之后,此时桌面上就会出现快捷方式了。

Hbuild 怎么安装yarn hbuilderx压缩包怎么安装_Hbuild 怎么安装yarn_06

HBuilderX已经安装完成了。

 二、下载安装scss/sass

(1)为了方便编写样式(例如:

<style lang="scss"></style>

),建议安装插件。

插件下载地址:

https://ext.dcloud.net.cn/plugin?name=compile-node-sass

(2)打开插件下载地址,我们需要先进行注册登录网站之后,才能进行下载,

Hbuild 怎么安装yarn hbuilderx压缩包怎么安装_scss_07

(3)点击“使用HBuilderX 导入插件”之后,会出现一个提示,

Hbuild 怎么安装yarn hbuilderx压缩包怎么安装_sass_08

 点击“继续”之后,又会出现一个提示,

Hbuild 怎么安装yarn hbuilderx压缩包怎么安装_下载安装_09

 点击“打开HBuilderX”之后,会自动打开HBuilderX,在HBuilderX中会出现提示,

Hbuild 怎么安装yarn hbuilderx压缩包怎么安装_下载安装_10

(4) 点击“是”,开始进行安装,我们可以在HBuilderX的右下角看到安装进程,

Hbuild 怎么安装yarn hbuilderx压缩包怎么安装_下载安装_11

 等待安装完成,显示“安装成功”。

Hbuild 怎么安装yarn hbuilderx压缩包怎么安装_sass_12

三、HBuilderX个性化配置

3.1 快捷键方案切换

操作步骤:工具 -> 预设快捷键方案切换 -> VS Code 

Hbuild 怎么安装yarn hbuilderx压缩包怎么安装_下载安装_13

3.2 修改编辑器的基本设置

操作步骤:工具 -> 设置 -> 打开 Settings.json 按需进行配置

(1)工具 -> 设置,

Hbuild 怎么安装yarn hbuilderx压缩包怎么安装_sass_14

(2)我们可以打开 Settings.json 按需进行配置。

Hbuild 怎么安装yarn hbuilderx压缩包怎么安装_Hbuild 怎么安装yarn_15

一些常用的配置:

{
  "editor.colorScheme": "Default",
  "editor.fontSize": 12,
  "editor.fontFamily": "Consolas",
  "editor.fontFmyCHS": "微软雅黑 Light",
  "editor.insertSpaces": true,
  "editor.lineHeight": "1.5",
  "editor.minimap.enabled": false,
  "editor.mouseWheelZoom": true,
  "editor.onlyHighlightWord": false,
  "editor.tabSize": 2,
  "editor.wordWrap": true,
  "explorer.iconTheme": "vs-seti",
  "editor.codeassist.px2rem.enabel": false,
  "editor.codeassist.px2upx.enabel": false
}

(3)按需进行配置时,打开Settings.json-->源代码视图-->在用户设置里进行粘贴,

Hbuild 怎么安装yarn hbuilderx压缩包怎么安装_scss_16

 (4)将上文提到的常用配置粘贴到“用户设置”,保存之后,我们看一看的左侧的“默认配置”也发生了改变,

Hbuild 怎么安装yarn hbuilderx压缩包怎么安装_scss_17