SublimeText3入门

sublimeText3注册码

顶部菜单=》Help =》enter license
把下面的注册码输入。

----- 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 ------

安装插件

直接安装

把插件安装包放到【菜单->preferences->packages】目录下

使用PackageControl组件安装

按 Ctrl+` 调出console，粘贴以下代码到底部命令行并回车：

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

重启Sublime Text 3。如果在Perferences->package settings中看到package control这一项，则安装成功。按下Ctrl+Shift+P调出命令面板输入install 调出 Install Package 选项并回车，然后在列表中选中要安装的插件。

常用插件列表

Emmet⭐️⭐️⭐️⭐️⭐️

(Zen Coding)快速生成HTML代码段的插件，强大到无与伦比:可以超快速编写HTML/CSS/JS，当然这个插件还支持多种编译环境，如常见的：Eclipse/Aptana、Coda、Notepad++、Adobe Dreamweaver、TextMate等，web开发必备！！！。

SyncedSideBar⭐️⭐️⭐️⭐️⭐️

每次打开文件，侧边栏都会同步显示该文件所在目录树中的位置(如果打开的文件是目录树的子集，还能将目录树自动展开.
配合快捷键ctrl+p搜索文件，简直了

AutoFileName⭐️⭐️⭐️⭐️

快捷输入文件名，文件路径自动提示的。自动完成文件名的输入，如图片选取，输入”/”即可看到相对于本项目文件夹的其他文件

SublimeTmpl ⭐️⭐️⭐️⭐️

SublimeTmpl能新建html、css、javascript、php、python、ruby六种类型的文件模板，所有的文件模板都在插件目录的templates文件夹里，可以自定义编辑文件模板。

SublimeTmpl默认的快捷键:

trl+alt+h html
ctrl+alt+j javascript
ctrl+alt+c css
ctrl+alt+p php
ctrl+alt+r ruby
ctrl+alt+shift+p python

配置模板变量，依次点击
Preferences => Package Settings => SublimeTmpl => Settings — User
输入下面的配置项：

{
	"attr": {
		"version": "1.0.0",
	    "author": "YiKe" ,
	    "email": "[email protected]",
	    "link": "http://www.qdgithub.com/",
	}
}

那么js.tmpl文件和编译后的文件如下:

/**
 * 
 * @authors YiKe ([email protected])
 * @date    2018-09-28
 * @link    http://www.qdgithub.com/
 * @version 1.0.0
 */

HTML-CSS-JS-Prettify

html,css,js格式化

SublimeLinter插件

SublimeLinter 是前端编码利器——Sublime Text 的一款插件，用于高亮提示用户编写的代码中存在的不规范和错误的写法，支持 JavaScript、CSS、HTML、Java、PHP、Python、Ruby 等十多种开发语言。这篇文章介绍如何在 Windows 中配置 SublimeLinter 进行 JS & CSS 校验。

http://www.sublimelinter.com/en/latest/

一位前辈的配置方案：

{
    "sublimelinter": "save-only",
    "sublimelinter_popup_errors_on_save": true,
    "sublimelinter_executable_map": {
        "javascript": "http://www.cnblogs.com/xiaofeixiang/",
        "css": "http://www.cnblogs.com/xiaofeixiang/"
    },
    "jshint_options": {
        "strict": false,
        "quotmark": "single", //只能使用单引号
        "noarg": true,
        "noempty": true, //不允许使用空语句块{}
        "eqeqeq": false, //!==和===检查
        "undef": true,
        "curly": true, //值为true时，不能省略循环和条件语句后的大括号
        "forin": true, //for in hasOwnPropery检查
        "devel": true,
        "jquery": true,
        "browser": true,
        "wsh": true,
        "evil": true,
        "unused": "vars", //形参和变量未使用检查
        "latedef": true, //先定义变量，后使用
        "globals": {
            "grunt": true,
            "module": true,
            "window": true,
            "jQuery": true,
            "$": true,
            "global": true,
            "document": true,
            "console": true,
            "setTimeout": true,
            "setInterval": true
        }
    },
    "csslint_options": {
        "adjoining-classes": false,
        "box-sizing": false,
        "box-model": false,
        "compatible-vendor-prefixes": false,
        "floats": false,
        "font-sizes": false,
        "gradients": false,
        "important": false,
        "known-properties": false,
        "outline-none": false,
        "qualified-headings": false,
        "regex-selectors": false,
        "shorthand": false,
        "text-indent": false,
        "unique-headings": false,
        "universal-selector": false,
        "unqualified-attributes": false
    }
}