Sublime Text 3使用教程

更新注册码！（2018.11.13）

首先加入到hosts文件

accesslog

1	127.0.0.1 www.sublimetext.com
2	127.0.0.1 license.sublimehq.com

hosts文件所在位置：

Windows：C:/windows/system32/drivers/etc/hosts

Linux：/etc/hosts

Mac：/Private/etc/hosts

注册码：

angelscript

----- BEGIN LICENSE -----
sgbteam
Single User License
EA7E-1153259
8891CBB9 F1513E4F 1A3405C1 A865D53F
115F202E 7B91AB2D 0D2A40ED 352B269B
76E84F0B CD69BFC7 59F2DFEF E267328F
215652A3 E88F9D8F 4C38E3BA 5B2DAAE4
969624E7 DC9CD4D5 717FB40C 1B9738CF
20B3C4F1 E917B5B3 87C38D9C ACCE7DD8
5F7EF854 86B9743C FADC04AA FB0DA5C0
F913BE58 42FEA319 F954EFDD AE881E0B
------ END LICENSE ------

前言

作为一名web前端工程师，平时接触最多的就是各种编辑器和IDE，虽然都说有个记事本就可以写编程，但是一个顺手的编辑器能大大提高代码编写的效率。

我使用过很多的编辑器，有功能齐全的Webtrom，号称代码如飞的Hbuilder，还有Github下Atom，Microsoft的VS Code，相对于IDE的臃肿，还是比较喜欢使用高度自定义化的编辑器，所以现在本人使用vscode和sublime text 3,但是在使用mac的时候，发现vscode及其的占用资源，cpu达到了20%以上，所以现在主要使用sublime了。

对于vscode的配置请见我的另一篇文章：vscode个人配置和插件

这篇主要介绍自己在使用sublime时的一些个人配置和插件。

前期下载和安装

下载

Sublime Text 3下载地址： http://www.sublimetext.com/3，根据自己的电脑版本下载对应的安装包

序列号

Sublime Text 3并不是免费的，如果有钱还是买一个吧，没钱只能去找共享了。

首先先知道自己下载的版本是什么，在下载页面上有提示，也可以安装后在Help>About Sublime Text中查询

本次下载的版本是B3176

然后就去网上搜索对应版本的序列号

由于Sublime Text 3新增了注册码验证功能，所以在使用的时候会提示注册码失效，但是依旧可以正常激活。

注册方法在文首！！！

汉化

虽然使用英文页面对于编程是非常有利的，而且可能翻译也会出现差错，导致会出现一些问题，不过由于第一次使用软件，还是换成自己相对熟悉的语言比较好。

Sublime Text 3已经支持中文编译了，不用再像以前去找一些汉化版使用，还是原版用的让人舒心。

启动Sublime 主页面

可以看到工具栏都是英文
点击菜单栏中的Preferences，弹出选项中选择Package Control

刚刚安装Sublime Text 3是没有这项功能的，以前安装需要在终端复制一长串的代码进行下载，不过现在Sublime Text 3安装非常的方便，
1. 首先使用快捷键Ctrl + Shift + P调出搜索框。
2. 在输入框中输入Install，就可以在下方看见Install Package Control
3. 点击安装，成功会有提示的。
输入关键字install，点击显示出来的Install Package安装插件功能
输入设置语言插件包localiz关键字即可显示出我们需要的插件ChineseLocalizations
安装成功

美化

sublime text的默认界面非常的简洁，虽然不花里胡哨但也不容易一眼就分辨出，所以准备一个良好的工作环境会让人更加乐于工作，现代的程序猿都有一颗geek的心，无法忍受在一个丑陋的UI下整天Coding

侧边栏文件图标美化

A File Icon （原名zz File Icons）

主题

以前一直使用默认的主题，并没有改过，不过因为Mac出了暗黑模式，所以想统一一下风格，所以使用了很流行的Boxy Theme主题，里面可以选择几种主题，我比较喜欢Boxy tomorrow这款，其他配色太亮了，

最终效果

插件

插件也是通过Package Control进行安装，Ctrl(Cmd)+shift+P打开命令，

输入Package Control: Install Package安装插件

输入Package Control: List Package查询已安装的插件

输入Package Control: Remove Package删除已安装的插件

AutoFileName - 文本路径补全

自动填充文件路径，不需要再记住繁杂的文件名称和文件路径

Babel - ES6、React.js、jsx代码语法高亮

css3 - 最完整的css支持

安装完插件后，在settings内开启

1	"auto_complete_commit_on_tab": true,
2	"auto_complete_with_fields": true,

取消Emmet的css提示

emmet的代码提示会覆盖此插件，所以需要禁用此功能，在emmet设置中添加
1
"show_css_completions": false
将CSS3设置为.css文件的默认语言
- 打开一个.css文件
- 视图 => 语法 => CSS3

DocBlockr - 注释插件

生成优美的注释。标准的注释，包括函数名、参数、返回值等，并以多行显示，省去手动编写。

Emmet - 编码快捷神器

配置：打开菜单Preferences-->Package Settings-->Emmet-->Key Bindings - User，将下面代码贴进去保存。更详细的规则可以参考emmet-sublime文档

json

[{
    "keys": ["tab"],
    "command": "expand_abbreviation_by_tab",

    // put comma-separated syntax selectors for which 
    // you want to expandEmmet abbreviations into "operand" key 
    // instead of SCOPE_SELECTOR.
    // Examples: source.js, text.html - source
    "context": [{
            "operand": "source.js",
            "operator": "equal",
            "match_all": true,
            "key": "selector"
        },

        // run only if there's no selected text
        {
            "match_all": true,
            "key": "selection_empty"
        },

        // don't work if there are active tabstops
        {
            "operator": "equal",
            "operand": false,
            "match_all": true,
            "key": "has_next_field"
        },

        // don't work if completion popup is visible and you
        // want to insert completion with Tab. If you want to
        // expand Emmet with Tab even if popup is visible -- 
        // remove this section
        {
            "operand": false,
            "operator": "equal",
            "match_all": true,
            "key": "auto_complete_visible"
        }, {
            "match_all": true,
            "key": "is_abbreviation"
        }
    ]
}]

HTML-CSS-JS Prettify - 代码格式化插件

HTML, CSS, JavaScript, JSON, React/JSX and Vue code formatter for Sublime Text 2 and 3 via node.js

并不像插件名字那样，只对html、css、js进行代码格式化，其实包括了HTML, CSS, JavaScript, JSON, React/JSX and Vue的代码都可以

按下ctrl(cmd)+shift+h来完成代码的自动排版

注意：需要安装nodejs来配合使用（请看作者的nodejs版本管理器nvm安装教程完成node的安装）

小技巧：在使用nvm安装node后使用该插件会出现报错，提示在指定地址没有找到node，这是在sublime的工具栏中找到preference-->package settings-->HTML/CSS/JS Prettify-->set node Path,在打开的文件中修改windows字段的值为”C:/dev/nodejs/node.exe”，如果不知道自己node安装路径，可以在终端输入

zsh

1	which node

就会查到自己node的安装路径

HTML5 - HTML5代码规范

支持html5规范的插件包，与Emmet插件配合使用

使用方法：新建html文档 => 输入html5 => 敲击Tab键 => 补全html5规范文档

htmlattributes

less

local History

scss

SideBarEnhancements - 右侧文件栏增强插件

这个在package control中安装的是英文版，如果需要中文版，需要前往github上下载，并且也有详细的使用文档。

此插件不再支持sublime text 2，所以想要使用请升级到sublime text 3版本

Sidebar Enhancements是增强Sublime Text的侧边栏文件和文件夹操作的一款插件

一大亮点是提供了“删除”、“打开”和“剪贴板”操作。
关闭、移动、打开、恢复受重命名/移动命令的缓冲区。
基本功能：新建文件/文件夹、编辑、打开/运行、打开文件位置、查找所选/父文件夹/项目、剪切、复制、粘贴、粘贴到父目录、重命名、移动、删除、刷新……
高级功能：可选URI/URL编码复制路径、UTF-8、base64（非常适合嵌入css）编码复制内容、复制img/a/script/style等标签
当删除操作受影响时，使用“首选项”来控制是否关闭缓冲区
允许在状态栏上显示“文件修改日期”和“文件大小”。

下载完成后重启（如果没有效果，就找一个js文件按下ctrl+shift+space下载对应的类库）

standardformat

sublimelinter

一个支持Lint语法的插件，可以高亮linter认为有错误的代码行，也可以高亮一些特别的注释，比如“TODO“，可以快速定位

sublimelinter-contrib-standard

sublimelinter-eslint

trailingspaces - 空格突出

在保存文件的时候自动删除末尾空格，根据自己的设置，可以随时突出显示或手动删除

Vue Syntax Highlight - Vue语法高亮

参考

sublime美化 - 【高效工作】Sublime Text 3 美化

更新注册码！（2018.11.13）

前言

前期下载和安装

下载

序列号

汉化