Shopify官方并未提供专门的Liquid模板开发工具,使用PhpStorm虽然也可以修改代码,但是没有高亮显示,很不习惯。 这里推荐使用WebStorm,因为跟PhpStorm是同个公司的,各种设置基本一致,入手简单。 WebStorm默认也不支持高亮,需要通过插件。 插件安装方法: 1、打开Shopify的主题项目,IDE会自动识别,并建议你安装Liquid插件。 2、自己搜索插件安装。 路径:File - Settings - Plugins ![](https://img.kancloud.cn/5a/ee/5aee2840704b6819da74f0a09d010a69_992x710.png) *** 安装完成后,可发现代码可以高亮显示了。 ![](https://img.kancloud.cn/95/03/95039928af241dfdcca4842e6d975806_1031x589.png)
Sublime就不用多解释了,下面推荐其几款非常实用的插件,特别好用哦! 1.GitGutter 这是一款非常有用的插件扩展,它标记了源代码的每一行,告诉你,它的 Git状态,还给出了你一个发生了的变更梗概。GitGutter还可以将,git的HEAD,origin,你选择的分支,或者甚至是某一次的提交与你的文件进行比较。 2. Side Bar Enhancement 此插件通过向右键菜单增加了超过20多个选项来改变了这一现状,其中就包括了在浏览器中打开(Open inbrowser),复制(duplicate),以及许多其它的实用功能。 3. ColorPicker 这是一个小巧实用的颜色拾取器,很容易上手,非常适合用来快速地抓取颜色的16进制值。插件会打开一个独立的窗口,你可以从一个调色板上选择一种颜色,或者使用滴管直接从屏幕上的任何位置拾取颜色。 4. Package Control 这个工具是 Sublime的插件管理器,可以为安装和删除软件包带来方便。如果你尚未安装此插件,建议先安装,以便于试用文中提及的其他插件。 5. Emmet 此工具是一组专门用来提高书写代码速度的便利工具,不同之处在于 Emmet适用于HTML和CSS。将它整合进文本编辑器,可以提供一些功能和快捷方式,加快开发速度。它提供包括Eclipse、IDEA、UltraEdit、SlickEdit等的插件。 6. Placeholders Sublime Text 3有一个内置 Lorem Ipsum生成器,可用于创建虚拟文本。Placeholders插件对这一功能进行了扩展,并允许 ST快速生成占位符图像,表单,列表和表格。 7. Minify 此插件是一个代码压缩器和美化器的二合一插件。Minify会用你目前正在打开的文件创建出一个新的 .min或者 .pretty版本,并且会放在同级目录之下。可用于 CSS, HTML,Java, JSON还有SVGs。它依赖外部的 node.js库来进行压缩和美化,所以你需要单独安装。 8. SublimeCodeIntel 此代码智能插件会对你的源代码文件进行索引,让你能快速的找到并跳转到函数的声明。该扩展对于流行较广以及不那么流行的编程语言都比较适用。 如果你喜欢本文的话,可以关注作者搜狐号,每天都会有网站开发干货与你分享哦!