sublime3下载地址:http://www.sublimetext.com/3
在sublime要安装插件或者汉化,都必须翻墙,不然会无法响应。
目录
1、sublime3的破解
2、sublime3的快捷键
3、sublime的汉化
4、sublime常用插件安装
5、sublime配置react.js环境
1、sublime3的破解
方法一:使用注册码(推荐)
1)修改hosts文件:
- hosts文件路径:Window:C:\Windows\System32\drivers\etc
- hosts文件是系统文件,所以修改需要系统管理员权限,可以右键选择 使用管理员打开;如果右键菜单没有,可以点击属性修改用户的权限,只要为普通用户加上修改权限就可以了。
- 添加以下内容
127.0.0.1 www.sublimetext.com 127.0.0.1 sublimetext.com 127.0.0.1 sublimehq.com 127.0.0.1 telemetry.sublimehq.com 127.0.0.1 license.sublimehq.com
- 刷新hosts文件:按
win+R
快捷键,输入" cmd ",输入ipconfig /flushdns
,成功如下图。
2)添加注册码
- 选择 " 菜单 " – “ Help " – " Enter License "
- 将下面的内容复制粘贴上去,保存即可。
ZYNGA INC.
50 User License
EA7E-811825
927BA117 84C9300F 4A0CCBC4 34A56B44
985E4562 59F2B63B CCCFF92F 0E646B83
0FD6487D 1507AE29 9CC4F9F5 0A6F32E3
0343D868 C18E2CD5 27641A71 25475648
309705B3 E468DDC4 1B766A18 7952D28C
E627DDBA 960A2153 69A2D98A C87C0607
45DC6049 8C04EC29 D18DFA40 442C680B
1342224D 44D90641 33A3B9F2 46AADB8F
如果注册码过期了,请参考https://blog.csdn.net/qq_29819449/article/details/80130327
方法二:修改exe
1)打开文件夹,先复制出一份sublime_text.exe作为备份,防止之后修改出现错误,一般默认路径为C:\Program Files\Sublime Text 3;
2)进入网站:https://hexed.it/;
3)点击“Open file”,然后选择“sublime_text.exe”;
4)选择右侧的“Search”,然后在“Search for”框输入“97 94 0D”,点击“Search Now”;
5)下方出现一个搜索结果,点击搜索结果,在键盘输入,修改搜索结果“97 94 0D”为“00 00 00”;
6)点击“Export”把修改好的exe程序下载并替换原来的sublime_text.exe;
7)打开sublime text3 (如果windows提示危险,继续运行),然后Help-Enter License-输入下方的license;
----- BEGIN LICENSE -----TwitterInc200 User LicenseEA7E-8900071D77F72E 390CDD93 4DCBA022 FAF6079061AA12C0 A37081C5 D0316412 4584D13694D7F7D4 95BC8C1C 527DA828 560BB037D1EDDD8C AE7B379F 50C9D69D B35179EF2FE898C4 8E4277A8 555CE714 E1FB0E43D5D52613 C3D12E98 BC49967F 7652EED29D2D2E61 67610860 6D338B72 5CF95C69E36B85CC 84991F19 7575D828 470A92AB------ END LICENSE ------
8)为了防止sublime text3检测,添加以下内容到你的host
127.0.0.1 www.sublimetext.com
127.0.0.1 sublimetext.com
127.0.0.1 sublimehq.com
127.0.0.1 telemetry.sublimehq.com
127.0.0.1 license.sublimehq.com
9)刷新hosts文件:按win+R
快捷键,输入" cmd ",输入 ipconfig /flushdns
,成功如下图。
查看是否破解成功
在sublime3的菜单栏 " Help " – " About Sublime Text ",出现类似如下图,说明破解成功。未破解前,能看到unregister的字样。
2、sublime3的快捷键
快捷键 | 作用 |
---|---|
Ctrl+L | 选择整行(按住-继续选择下行) |
Ctrl+K+K | 从光标处删除至行尾 |
Ctrl+Shift+K | 删除整行 |
Ctrl+Shift+D | 复制光标所在整行,插入在该行之前 |
Ctrl+J | 合并行(已选择需要合并的多行时) |
Ctrl+K+U | 改为大写 |
Ctrl+KL | 改为小写 |
Ctrl+D | 选词 (按住-继续选择下个相同的字符串) |
Ctrl+M | 光标移动至括号内开始或结束的位置 |
Ctrl+Shift+M | 选择括号内的内容(按住-继续选择父括号) |
Ctrl+/ | 注释整行(如已选择内容,同“Ctrl+Shift+/”效果) |
Ctrl+Shift+/ | 注释已选择内容 |
Ctrl+Z | 撤销 |
Ctrl+Y | 恢复撤销 |
Ctrl+M | 光标跳至对应的括号 |
Alt+. | 闭合当前标签 |
Ctrl+Shift+A | 选择光标位置父标签对儿 |
Ctrl+Shift+[ | 折叠代码 |
Ctrl+Shift+] | 展开代码 |
Ctrl+KT | 折叠属性 |
Ctrl+K+0 | 展开所有 |
Ctrl+U | 软撤销 |
Ctrl+T | 词互换 |
Tab | 缩进 自动完成 |
Shift+Tab | 去除缩进 |
Ctrl+Shift+↑ | 与上行互换 |
Ctrl+Shift+↓ | 与下行互换 |
Ctrl+K Backspace | 从光标处删除至行首 |
Ctrl+Enter | 光标后插入行 |
Ctrl+Shift+Enter | 光标前插入行 |
Ctrl+F2 | 设置书签 |
F2 | 下一个书签 |
Shift+F2 | 上一个书签 |
3、sublime的汉化
注:记得翻墙。
1)安装Package Control
Package Control 是 Sublime Text的插件管理工具,相当于是安装了Package Control 之后,它就可以帮你管理你的插件了。
- 在sublime text3中 Ctrl+Shift+P打开命令面板,找到
Install Package Control
。
- 成功后,提示如下。
2)安装汉化插件ChineseLocalizations - Ctrl+Shift+P打开命令面板,找到Install Package 点击打开,会加载好一会,一定要耐心等待~~
- 点击等待安装,加载中。。。。。。。。要等好久呢~~
可以看有没有在安装~ - 成功后会出现下图,然后你可以根据需要切换语言啦
4、sublime常用插件安装
注:跟汉化步骤中安装插件ChineseLocalizations的安装方式相同。
1)Alignment (代码对齐)
一个非常简单和易于使用的插件,使你的代码组织和美观。当您重温代码时候非常有用。
使用方法:选中要调整的行,按 Ctrl+ Alt + A
2)JSFormat(js代码格式化)
功能:JavaScript的代码格式化插件
简介:很多网站的js代码都进行了压缩,一行式的甚至混淆压缩,这让我们看起来很吃力。而这个插件能帮我们把原始代码进行格式的整理,包括换行和缩进等等,是代码一目了然,更快读懂~
使用:在已压缩的JS文件中,右键选择jsFormat或者使用默认快捷键(Ctrl+Alt+F)
3)Bracket Highlighter(括号标签匹配)
功能:代码匹配
简介:可匹配[], (), {}, “”, ”, ,高亮标记,便于查看起始和结束标记
使用:点击对应代码即可
4)jQuery(jq输入提示)
功能:jQ函数提示
简介:快捷输入jQ函数,是偷懒的好方法
5)DocBlockr
功能:生成优美注释
简介:标准的注释,包括函数名、参数、返回值等,并以多行显示,手动写比较麻烦
使用:输入/*、/**然后回车,还有很多用法,请参照
https://sublime.wbond.net/packages/DocBlockr
6)Emmet(原名 Zen Coding)
介绍:Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具。基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为“片段”。虽然片段能很好地推动你的生产力,但大多数的实现都有这样一个缺点:你必须先定义你的代码片段,并且不能在运行时进行拓展。Emmet把片段这个概念提高到了一个新的层次:你可以设置CSS形式的能够动态被解析的表达式,然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发工具,但也可以用于编程语言。
技巧:
(emmet可以直接在编辑器中输入HTML或CSS的代码的缩写,然后按tab键就可以拓展为完整的代码片段。)
乘法符号:*
缩写:ul>li*2 点击Tab ---
<ul>
<li></li>
<li></li>
</ul>
加法符号:+
缩写:div+p+bq 点击Tab ---
<div></div>
<p></p>
<blockquote></blockquote>
自增符:$
缩写:ul>li.item$*3
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
缩写:h$[title=item$]{Header $}*3
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
缩写:ul>li.item$$$*2
<ul>
<li class="item001"></li>
<li class="item002"></li>
</ul>
缩写:ul>li.item$@-*3
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
</ul>
缩写:ul>li.item$@3*2
<ul>
<li class="item3"></li>
<li class="item4"></li>
</ul>
缩写:div+div>p>span+em^bq
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
缩写:div+div>p>span+em^^bq
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
分组:使用()
缩写:div>(header>ul>li*2>a)+footer>p
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
缩写:(div>dl>(dt+dd)*3)+footer>p
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
ID和类属性
缩写:#header
<div id="header"></div>
缩写:.title
<div class="title"></div>
缩写:form#search.wide
<form id="search" class="wide"></form>
缩写:p.class1.class2.class3
<p class="class1 class2 class3"></p>
自定义属性:[ ]
缩写:p[title="Hello world"]
<p title="Hello world"></p>
缩写:td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>
缩写:[a='value1' b="value2"]
<div a="value1" b="value2"></div>
文本:{}
缩写:a{Click me}
<a href="">Click me</a>
缩写:p>{Click }+a{here}+{ to continue}
<p>Click <a href="">here</a> to continue</p>
隐式标签
缩写:.class
<div class="class"></div>
缩写:em>.class
<em><span class="class"></span></em>
缩写:ul>.class
<ul>
<li class="class"></li>
</ul>
缩写:table>.row>.col
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
5、sublime配置react.js环境
1)先安装sublime3,再安装Package Control,具体参考以上sublime的汉化内容;
2)安装插件Babel(具体操作按汉化步骤中安装ChineseLocalizations插件方式相同)
功能:Sublime3才有的插件,支持ES6、JSX语法高亮。
是否成功:查看菜单 -> View -> Syntax -> Open all with current extension as... -> Babel -> JavaScript(Babel)
是否高亮
3)安装插件JsFormat
安装完后,为了能支持JSX语法格式化,在菜单 -> Preferences -> Package Settings -> JsFormat -> Settings-User
加入以下代码
{
"e4x": true,//支持jsx格式化
"format_on_save": true//保存立即格式化,看个人喜好
}
4)安装插件Emmet(实现自动补全)
-
安装完Emmet后会自动安装一个PyV8的依赖插件,但网络不稳定会失败,可以通过自行下载。
-
下载完后新建一个PyV8文件夹,把下载的包解压到该文件夹中,放到 C:\Users\yourname\AppData\Roaming\Sublime Text 3\Installed Packages下,与Emmet同一个文件夹下(Emmet安装完是在Installed Packages下而不是Packages) 。
-
安装完后,
菜单 -> Preferences -> Key Bindings - User
加上以下代码(keys就是触发自动补全的按键,可自定义)
[{
"keys": [
"tab"
],
"args": {
"action": "expand_abbreviation"
},
"command": "run_emmet_action",
"context": [{
"key": "emmet_action_enabled.expand_abbreviation"
}]
}, {
"keys": ["tab"],
"command": "expand_abbreviation_by_tab",
"context": [{
"operand": "source.js",
"operator": "equal",
"match_all": true,
"key": "selector"
}, {
"key": "preceding_text",
"operator": "regex_contains",
"operand": "(\\b(a\\b|div|span|p\\b|button)(\\.\\w*|>\\w*)?([^}]*?}$)?)",
"match_all": true
}, {
"key": "selection_empty",
"operator": "equal",
"operand": true,
"match_all": true
}]
}]
- 使用方法,比如输入
div.msg{hello world}
,然后按Tab
键,就可以变成<div className="msg">hello world</div>
。
5)检查代码语法是否有错误
- 首先安装SublimeLinter、SublimeLinter-jshint、SublimeLinter-jsxhint、SublimeLinter-contrib-eslint插件。
- 安装node.js,按
win+R
键,输入cmd
,输入以下命令行全局安装npm install -g eslint npm install -g babel-eslint npm install -g eslint-plugin-react npm install -g jsxhint
- 以ES6语法检查为例,在项目工程根目录新建.eslintrc,输入
{ "parserOptions": { "ecmaVersion": 6, "sourceType": "module", "ecmaFeatures": { "jsx": true } }, "rules": { "semi": ["error", "always"] } }
详细配置参考 http://eslint.org/docs/user-guide/configuring
- 打开Sublime3,菜单->Tools->SublimeLinter->Toggle Linter…就可以打开js、jsx、es6检查规则。注意:当使用es6开发时务必把jshint关掉,否则报一堆警告错误。
以上内容参考链接:https://www.jianshu.com/p/edeee16cdea1
https://www.jianshu.com/p/593810de77a7