目录
一、HBuilder X下载安装
二、下载安装scss/sass
三、HBuilderX个性化配置
3.1 快捷键方案切换
3.2 修改编辑器的基本设置
一、HBuilder X下载安装
(1)进入官网HBuilderX-高效极客技巧
(2)根据自己的电脑来选择版本的压缩包,等待下载完成。
我在此处选择的是“Alpha版”。
(3)打开已经下载好的zip压缩包,将下载的zip压缩包进行解压缩,
注意:解压的路径中是英文,不能包含括号等特殊字符。
(4)解压成功之后,打开文件夹,找到HBuilderX.exe,双击运行,
(5)双击运行之后,就会出现下面这个界面,可以选择喜欢的主题。
(6)当我们退出时,它检测到桌面没有快捷方式,会进行提示是否创建快捷方式。
点击“是”之后,此时桌面上就会出现快捷方式了。
HBuilderX已经安装完成了。
二、下载安装scss/sass
(1)为了方便编写样式(例如:
<style lang="scss"></style>
),建议安装插件。
插件下载地址:
https://ext.dcloud.net.cn/plugin?name=compile-node-sass
(2)打开插件下载地址,我们需要先进行注册登录网站之后,才能进行下载,
(3)点击“使用HBuilderX 导入插件”之后,会出现一个提示,
点击“继续”之后,又会出现一个提示,
点击“打开HBuilderX”之后,会自动打开HBuilderX,在HBuilderX中会出现提示,
(4) 点击“是”,开始进行安装,我们可以在HBuilderX的右下角看到安装进程,
等待安装完成,显示“安装成功”。
三、HBuilderX个性化配置
3.1 快捷键方案切换
操作步骤:工具 -> 预设快捷键方案切换 -> VS Code
3.2 修改编辑器的基本设置
操作步骤:工具 -> 设置 -> 打开 Settings.json 按需进行配置
(1)工具 -> 设置,
(2)我们可以打开 Settings.json 按需进行配置。
一些常用的配置:
{
"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-->源代码视图-->在用户设置里进行粘贴,
(4)将上文提到的常用配置粘贴到“用户设置”,保存之后,我们看一看的左侧的“默认配置”也发生了改变,