前端开发必备神器！史上最全的 Sublime Text 汉化、插件安装合集

Sublime Text 介绍

首先在开始前，先来介绍一下 Sublime Text。

Sublime Text 是一个代码编辑器（Sublime Text 是收费软件，但可以无限期试用），也是HTML和散文先进的文本编辑器。

Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来，它最初被设计为一个具有丰富扩展功能的Vim。

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。

还可自定义键绑定，菜单和工具栏。

Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。

Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

用过电脑，搞过开发的人都知道，一个好用的 IDE 能省多少事，但是很多时候我们需要的仅仅是一些简单的基础开发，我们就可以去使用我们的 Sublime Text 了。

除此之外，还有几款开发工具也非常推荐。

ATOM（https://atom.io/）

WebStorm（https://www.jetbrains.com/webstorm/）

当然，也不能少了我们今天的主角。

需要注意，如果你需要下载，请下载符合你当前电脑的对应版本。

到官网下载好Sublime编辑器，直接官网下载就行了，不用钱的，不要去下载别的乱七八糟的版本。

安装package control

Sublime是之所以受到那么多程序员追捧的原因就是因为其灵活。

而其中自有的插件安装更是其灵活的主要原因。

安装插件必不可少的是先安装package control。

如果你的sublime还没安装package control，那先安装好了再开始汉化吧！

安装好了之后，先打开编辑器，然后找到顶部菜单的Tools菜单，如下图所示

然后选择Tools菜单下面的Command Paletter选项，如下图所示

在打开的命令行模式输入框中，输入pac，然后回车安装，如下图所示

稍等片刻以后，软件会提示以下的信息，证明工具已经安装好了，如下图所示

安装完了以后需要关闭软件，然后重新启动软件。

重启以后，在菜单栏的preferences菜单下你会看到Package Settings和Package Control两个选项，以后会用到他们

使用官方汉化插件实现汉化

打开sublime，找到preference 下的package control

点击package control ，弹出如下框搜索install

找到install package点击进入

稍等一会，弹出如下界面

搜索localiza，找到如下选项，极为中文插件，点击安装

出现如下界面即完成安装

安装完成了，这是汉化好的界面

在设置里面也可以直接更换语言

就这样汉化就完成了。

自动补全提示

其实这个步骤，用英文版会简单一点，介于有一部分学员喜欢用英文版的，在企业也是英文版更加专业，所以我用英文版演示

然后在大括号输入以下两项设置，可以直接复制就行了：

"auto_complete": true,

"auto_match_enabled": true

设置完先保存，再关掉sublime text ;

重启，新建一个HTML文件，就会有提示了。

英文界面：menu-》Preferences-》Setting-User-》加上这一句 ,"auto_complete": true,"auto_match_enabled": true-》保存-》关闭编辑器-》重新打开-》完成

中文界面：菜单栏-》首选项-》设置-用户-》加上这一句 ,"auto_complete": true,"auto_match_enabled": true-》保存-》关闭编辑器-》重新打开-》完成

Sublime Text 的插件推荐

Emmet

功能：编码快捷键，前端必备

简介：Emmet作为zen coding的升级版，对于前端来说，可是必备插件，如果你对它还不太熟悉，可以在其官网上看下具体的演示视频。

使用教程： http://docs.emmet.io/cheat-sheet/

html-css-jsprettify

功能：对Html，css，js文件进行格式化

简介：代替了JsFormat 和 CSSFormat

使用：快捷键Windows: ctrl+shift+i

快捷键配置：在Preferences / Key Bindings – User加上代码（数组内）

{“keys”: [“ctrl+shift+i”],”command”: “htmlprettify”},

CSSComb

功能：用来给CSS属性进行排序的格式化（处女座必备）

简介：按一定的顺序排列

使用：到https://github.com/csscomb/sublime-csscomb下载插件包，放到sublime text文件夹的\Data\Packages\User目录里

快捷键：ctrl+shift+c

ColorHighlighter

功能：方便调色

简介：它可以展示你所选择的颜色代码（像“#FFFFFF”, “rgb(255,255,255)”, “white”）的真正颜色。同时它还包含一个颜色选择器让你可以方便地更改颜色。

使用：快捷键Windows: ctrl+shift+w

快捷键配置：在Preferences / Key Bindings – User加上代码（数组内）

{ “keys”: [“ctrl+shift+w”],”command”: “color_picker”,”context”: [{“key”: “color_highlighter.color_picker”}]},

Trailing spaces

功能：检测并一键去除代码中多余的空格

简介：还在纠结代码中有多余的空格而显得代码不规范？或是有处女座情节？次插件帮你实现发现多余空格、一键删除空格、保存时自动删除多余空格，让你的代码规范清爽起来

快捷键配置：在Preferences / Key Bindings – User加上代码（数组内）{ “keys”: [“ctrl+shift+t”], “command”: “delete_trailing_spaces” },

auto-save

功能：自动保存文件

简介：为保存提供了方便

使用：默认是不会自动保存，按快捷键Ctrl+Shift+S开启。

快捷键配置方法：首选项-快捷键设置，在数组内添加{ “keys”: [“ctrl+shift+s”], “command”: “auto_save” },如需自动启用，首选项-插件-auto-save—settings-usre粘帖一下配置

{

“auto_save_on_modified”: true,

“auto_save_delay_in_seconds”: 10,

“auto_save_all_files”: true,

“auto_save_current_file”: “”,

“auto_save_backup”: false,

“auto_save_backup_suffix”: “autosave”

}

view in browser

功能：通过默认浏览器打开文件

简介：方便打开浏览器检查编译效果

使用：快捷键配置方法：首选项-快捷键设置，在数组内添加快捷键：F12{ “keys”: [“f12”], “command”: “open_in_browser” },

autoprefixer(下载超慢)

功能：CSS添加私有前缀

简介：CSS还未标准化，所以要给各大浏览器一个前缀以解决兼容问题

使用：快捷键配置方法：首选项-快捷键设置，在数组内添加{ “keys”: [“ctrl+shift+enter”], “command”: “autoprefixer” },

快捷键：ctrl+shift+enter

CSS Extended Completions

功能：关联CSS文件，智能提示css文件中的类名，非常好用

JavaScript Completions

功能：支持javascript原生语法提示，妈妈再也不用担心我输入document.getElementById(id)

jQuery

功能：jQ函数提示

简介：快捷输入jQ函数，是偷懒的好方法

AutoFileName

功能：快捷输入文件名

简介：自动完成文件名的输入，如图片选取

使用：输入”/”即可看到相对于本项目文件夹的其他文件

SublimeLinter

功能：代码检查

简介：支持JavaScript、CSS、HTML、Java、PHP、Python、Ruby等十多种开发语言

使用：需要配置相应语言的环境，要检查JavaScript代码需要安装node.js，检查PHP代码需要安装PHP并配置环境等。

SideBarEnhancements

功能：扩充边栏菜单的功能

简介：包括在当前工程文件夹中新建文件，移动文件或文件夹，产生文件或文件夹的副本，在新窗口或浏览器中打开，刷新等。

Bracket Highlighter

功能：代码匹配

简介：可匹配[], (), {}, “”, ”, ，高亮标记，便于查看起始和结束标记

Monokai Extended

功能：主题

简介：如果你喜欢 Soda Dark 和 Monokai，我建议你使用 Monokai Extended

使用：首选项-> 配色方案 -> User -> Monokai Extended

全文快捷键配置

[ { "keys": ["ctrl+shift+t"], "command":"delete_trailing_spaces"}, { "keys": ["ctrl+shift+s"], "command":"auto_save"}, { "keys": ["f12"], "command":"open_in_browser"}, { "keys": ["ctrl+shift+enter"], "command":"autoprefixer"}, { "keys": ["ctrl+shift+i"],"command":"htmlprettify"},{ "keys": ["ctrl+shift+w"],"command":"color_picker","context": [{"key":"color_highlighter.color_picker"}]},]

点个赞吧！