Cocos Creator 实用教程:优化代码编辑器

来源：公众号（奎特尔星球）

作者： ShawnZhang

版权归原作者所有！

Cocos Creator 游戏开发主要是使用 JavaScript 语言，这里向大家推荐 Visual Studio Code 和 Webstorm 两款 JavaScript 神级编辑器。这两款编辑器的安装都很简单，这里主要介绍在 Cocos Creator 项目中如何调整编辑器配置，以提升开发效率。

1. 排除干扰文件

我们知道 Cocos Creatror 会为项目资源文件生成同名的 meta 文件，在代码编辑器中很是碍眼，而且也不能更改里面的内容，严重干扰我们在代码编辑器中浏览文件，请看下图：

我这们里介绍在 VSCode 和 Webstorm 如何屏蔽干扰文件。

VSCode

首先用 VSCode 打开 Cocos Creator 项目，使用 shift + ctrl + p / shift+ cmd + p 打开命令控制台。

在命令行中输入 settings，在过滤出的选项中选择打开用户设置，在用户设置编辑区配置文件排除规则：

"files.exclude": {     "**/*.meta": true }

尝试保存此文件，你会看到 VSCode 的资源管理器中所有 meta 文件都不在了，下图是我惯用的文件排除配置：

除了过虑meta文件外，同时把git、svn和Cocos Creator的临时目录出排除了，这样可以通过ctrl+p/cmd+p在编辑器中快速准确地定位文件。

Webstorm

接下来我们看在Webstorm中怎么排除干扰文件，先在Webstorm中打开Cocos Creator项目，使用快捷键ctrl+,/cmd+,打开Preferences窗口，在左上角过滤框输入：File Types

注意选中下方列表File Types选项，在右侧下方Ignore files and folder输入框中增加*.meta、.DS_Store等需要过滤的文件类型以分号隔开，然后点击下方Apply按钮，观察最左侧资源浏览器窗口，会看到相应要排除的文件不在了。

2. 代码补全增强

代码补全是开发中提高效率的重要功能，对于 JavaScript 动态语言来说，代码补全确实要比 c/c++、Java 要差很多。但是经过配置 VSCode 和 Webstorm 也能提高不少我们的生产效率。

VSCode

Cocos Creator 集成有 VSCode 智能提示数据，可以通过 Cocos Creator 的主菜单：开发者－＞VS Code 工作流－＞更新 VS Code 智能提示数据，请看下图：

执行菜单命令后，Cocos Creator 会在当前工程中添加一个 creator.d.ts 文件，此文件也是我们熟悉 Cocos Creator API 接口的重要文件，而且是中英两语的哦！

Webstorm

Webstorm 除了像上述安装 creator.d.ts 文件外，还需要设置 JavaScript 语法为 ES6，不然你可能会在 IDE 中看看到一大片红色的语法错误。进入 Preferences 设置窗口，在最左上角过滤框中输入 JavaScript，定位到 Languages & Frameworks 下的 JavaScript 选项，在右边 JavaScript language version 选择 ECMAScript 6，看下图：

配置上 Cocos Creator 的源码路径，可以进一步提高 Webstorm代码 提示精度，见下图：

点击 Add…按钮，添加 Cocos Creator 源码路径：

• 首先为导入的库设置名字

• 选择应用范围为 Global 所有工程有效

• 点击 + 按钮，选择 Attach Directories… 浏览到 Cocos Creator 源码目录我用的是 Mac 系统设置的路径是：   /Applications/CocosCreator.app/Contents/Resources/engine/cocos2d

• 点击 OK 保存

对于高精度的代码补全来说使用 TypeScript 才是更好的选择，可惜 Shawn 使用 TypeScript 的经验不多，如果你有这方面的经验且乐意分享，欢迎发稿到奎特尔星球公众号。

3.小结

代码编辑器是程序员的一把利剑，本篇介绍在 VSCode 和 Webstorm 中如何排除干扰文件、优化代码提示，以提高开发效率。细心觉察开发过程中影响效率的地方，从小事做起，享受编程带来的乐趣吧！

---

「奎特尔星球」微信公众号，经常分享 Cocos Creator 游戏开发相关技术、经验以及奇幻故事教程，Cocos 前阵子转载的《Creator实用教程:你真的了解meta吗？》也是出自这位作者，欢迎感兴趣的开发者关注。

最后，祝各位码农小哥哥七夕快乐，或者加班快乐哈哈哈哈哈~

更多精彩