sublime text3 --前端工程师必备神器

　　导读目录：

• 下载与Emmet插件安装

• sublime text3 中cssrem安装与使用

• sublime Text 3的中文文件名显示为方框的问题解决方案

• 如何使用自定义的快捷键快速在浏览器中打开html文件

sublime text3 下载安装与 Emmet插件的安装 

　　对于前端工程师来说，sublime text3绝对是神器，Emmet插件通过自动补齐可以大大提高我们的开发效率。

　　第一步：进入 官网 下载sublime text3。比如对于我的64位windows系统，我选择了如下所示的一项：

（注意：截图工具我使用的是 FastStoneCapture，百度即可，非常方便）

　 第二步：打开sublime text 3，按下ctrl+~ 或者 view--show Console调出命名控制行。

　　复制下面代码粘贴到其中：

import urllib.request,os,hashlib; h = ‘df21e130d211cfc94d9b0905775a7c0f‘ + ‘1e3d39e33b79698005270310898eea76‘; pf = ‘Package Control.sublime-package‘; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://packagecontrol.io/‘ + pf.replace(‘ ‘, ‘%20‘)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install‘ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb‘ ).write(by)

　　回车即可。这时可以看到preferrence下出现了Package Control.

　　第三步：打开package control，输入install package，回车, 然后再输入Emmet,点击即可完成安装。

　　然而，仅仅是下载还是不够的，下面提供破解方法。

　　点击help--enter lisence：复制粘贴下面三种注册码的任何一种，回车即可破解。

—– BEGIN LICENSE —–Michael BarnesSingle User LicenseEA7E-8213858A353C41 872A0D5C DF9B2950 AFF6F667C458EA6D 8EA3C286 98D1D650 131A97ABAA919AEC EF20E143 B361B1E7 4C8B7F04B085E65E 2F5F5360 8489D422 FB8FC1AA93F6323C FD7F7544 3F39C318 D95E6480FCCC7561 8A4A1741 68FA4223 ADCEDE07200C25BE DBBC4855 C4CFB774 C5EC138C0FEC1CEF D9DCECEC D3A5DAD1 01316C36—— END LICENSE ——

—– BEGIN LICENSE —–Nicolas HennionSingle User LicenseEA7E-8660758A01AA83 1D668D24 4484AEBC 3B04512C827B0DE5 69E9B07A A39ACCC0 F95F5410729D5639 4C37CECB B2522FB3 8D37FDC172899363 BBA441AC A5F47F08 6CD3B3FECEFB3783 B2E1BA96 71AAF7B4 AFB61B1D0CC513E7 52FF2333 9F726D2C CDE53B4A810C0D4F E1F419A3 CDA0832B 8440565A35BF00F6 4CA9F869 ED10E245 469C233E—— END LICENSE ——

—– BEGIN LICENSE —–Anthony SansoneSingle User LicenseEA7E-87856328B9A648 42B99D8A F2E3E9E0 16DE076EE218B3DC F3606379 C33C1526 E8B58964B2CB3F63 BDF901BE D31424D2 082891B5F7058694 55FA46D8 EFC11878 0868F093B17CAFE7 63A78881 86B78E38 0F146238BAE22DBB D4EC71A1 0EC2E701 C7F9C6485CF29CA3 1CB14285 19A46991 E9A9867614FD4777 2D8A0AB6 A444EE0D CA009B54—— END LICENSE ——

sublime text3 中cssrem安装与使用

　　我们在移动端开发时，使用rem布局是一个不错的选择，及将所有元素的尺寸使用rem来设置，但是我们每次都需要先用设计稿中的值除以rem值然后才能得到最终的以rem为单位的数字，这时，cssrem插件就可以很好的解决我们遇到的问题了。 （注：对于移动端布局，见我的另一篇博文《探究移动端开发》）

　　第一步：下载github中的cssrem，然后将名为cssrem-master文件夹移动到Preferences下的Browse Packages...

　　　　　　如下图所示：

　　第二步：重启sublime text3，即可使用。但我们可以发现，实际上cssrem将1rem默认为40px。

面临的问题1：

　　但是如果我们不希望使用这样的默认项呢？ 下面介绍方法：

　　进入preference--browse packages,然后进入cssrem-master，并以记事本的方式打开cssrem.sublime-settings，发现下面数据：

　　也就是说，默认px到rem的转化为40， 数字的最大长度为6位等等。于是我们在这里编辑就可以使用自己想要的rem了，是不是很简单呢！！

面临的问题2：

　　如果我们不需要移动端rem布局，那么每次输入px都会重复的提醒，这是令人厌烦的，这时我们可以将preference--browse packages里的cssrem-master加一个后缀名，比如.txt，这样重启sublime text就会发现不会有这种情况了。 当我们再需要使用时就把这个后缀删去即可。

面临的问题3：

　　如果我们在html文件中的style标签下写css而不是在后缀名为.css的文件下写css那个这个工具就是没有用的。

　　结论：必须在 css文件中使用cssrem插件才有效。

sublime Text 3的中文文件名显示为方框的问题解决方案

　　问题情况如下所示，中文文件名被修改成了方框：

　　解决方法：

　　　　进入 Preferences --settings。

　　　　得到下面的结果：

在右边的settings-user，下面添加

　　　　"dpi_scale":1.0

它类似于JSON数据格式，注意：这个名值对的上一句结束应当再加一个英文状态下的逗号，如下所示：

按下 Ctrl+s保存，重启Sublime Text 3编辑器。效果如下所示；

成功显示中文文件名，但是对比发现，下面代码的字体变小了，只要按下 Ctrl+鼠标滚轮即可缩放字体，或在 setting-user下自己修改font-size的值即可。如下所示：

如何使用自定义的快捷键快速在浏览器中打开html文件

　　如果每次打开文件都要找到该文件点击打开一定是很麻烦的事情。下面我将展示如果快速打开文件。

　　第一步：在没有文件打开的情况下进入（不会出现问题）Preference--package control（若没有此项，请参看博文第一部分的介绍），并输入：Install Package,这时可以发现编辑器左下角正在处理此请求，一分钟左右处理完毕。输入View In Browser，片刻即可安装完成。（注意：对于你之前安装过的插件，再次搜索时是找不到的。）

　　第二步:进入Preference--KeyBuildings，打开下面的对话框。

在右边的user框的【】中输入下面的JSON数据：

{ "keys": ["ctrl+b"], "command": "open_in_browser" }

这句话是说，按下ctrl+b,即可在浏览器中打开文件，快捷键可以根据你的习惯修改。注意：这里的浏览器是默认浏览器（可以在设置－－系统－－默认应用－－默认浏览器下进行修改默认浏览器）。

sublime text3 --前端工程师必备神器