§ 02. fox-ide下载、安装及配置

fox-ide基于微软公司的vscode二次封装,对于前端开发人员来说,上手难度极低。在vscode原有功能的基础之上,我们针对于fox前端框架,增加了fox模板商城,新建fox项目、模块、页面,fox代码片段提示,解析excel模板,代码格式化等一系列实用功能,让大家更加便捷的使用fox前端框架。

§ 1. fox-ide 下载、安装

如果你是第一次使用fox-ide,请点击下载最新版ide。fox-ide目前暂未提供安装版本,只提供有绿色版本,所以你只需要把下载下来的zip压缩文件,解压到你电脑上的任意位置,即可使用。

点击FoxIDE.exe,看看能不能打开吧。为了方便后续使用,你可以在上述图标上面单击击右键,选择“发送到》桌面快捷方式”在桌面新建快捷方式图标。

guide-02_01

§ 2. fox-ide 配置

下载解压后,你的fox-ide已经安装完毕,就是这么简单。但是,为了更好的使用,以及确保我们在团队开发时候代码风格的一致性,我们还需要一些简单的配置,不要着急,只需要两步。

注意:新版本配置文件夹为FoxIDE,旧版本配置文件夹为 Fox - IDE,请仔细查看,如果旧版客户端已经不用,可以将旧版配置文件夹删除。`

§ 2.1. 配置 settings.json

settings.json里面是fox-ide及插件的一些配置信息,将下载好的settings.json(点击下载 (opens new window))文件,复制到C:\Users\(当前用户名,一般为zjrcu)\AppData\Roaming\FoxIDE\User下即可(该目录为隐藏目录,如果不显示,请打开“查看隐藏项目”),如果已经存在,请覆盖。

guide-02_02

§ 2.2. 配置 fox-3.0.0.code-snippets

fox-3.0.0.code-snippets是针对fox前端的一些代码提示,可以让你更便捷的输入,将下载好的fox-3.0.0.code-snippets(点击下载 (opens new window))文件,C:\Users\(当前用户名,一般为zjrcu)\AppData\Roaming\FoxIDE\User\snippets下即可。

guide-02_03

好了,上述步骤做完以后,请重启一次fox-ide。现在,你可以尽情享受代码带给你的快乐了!!!

注意事项

  1. 除了上述提到的修改之外,请尽量不要修改配置文件,尤其是工程中的.babelrc、.eslintrc.js等,否则可能会造成大家代码格式不一致影响git提交等;
  2. 按照上述步骤操作完毕之后,你的fox-ide应具备保存代码自动格式化,在template中输入<fox会提示出来fox框架相关组件,在script中输入fox.会提示fox框架相关方法。
最后更新于: 7/26/2022, 3:32:44 PM