前端电子工程师必备 pdf有哪些必备的 Sublime Text 配置

Sublime Text 是一个代码编辑器(Sublime Text 2是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能的Vim。是目前应用最广泛的编程工具之一,受到众多程序猿的追捧。网络上已有很多关于Sublime Text3的配置文章,但很多都不太适合本人的需求,很多插件在前端开发中很少会用到或者不能恰当的使用。由于每次重装一次Sublime Text3都需要在各种文章中搜寻适合自己的插件并安装,做了很多无用功,特写出本文总结一下,以备下次使用。
Sublime Text3 注册
Sublime Text3是一款收费软件,需要注册后才能使用。注册方式如下:
打开Sublime Text3--&Help--&Eenter&License--&输入注册码。
限于国人知识产权的薄弱意思和贪婪心理,很少有人真会去买注册码,以下是3个注册码:
&& BEGIN LICENSE &&
Andrew Weber
Single User License
EA7E-855605
813A03DD 5E4AD9E6 6C0EEB94 BC99798F
02396E98 E62C9FE
91424C9D A45400BF FFB88078
90F5CC94 1CDC92DC 8457107A F151657B
1D22E383 A997F016
E1D0AE85 A0BBD039 0E9C8D55 E1B89D5D
5CDBC0 EFCCA6
B98FC99C 8FAC73EE D2B95564 DF450523
&& END LICENSE &&
&& BEGIN LICENSE &&
Single User License
EA7E-940129
3A099EC1 C0B5C7C5 33EBF0CF BE82FE3B
EACEC954 4E87F1E5 7E4E85D6
C5605DE6 DAB003B4 D60CA4D0 77CB1533
3C47F579 FB3E8476 EB3AA9A7 68C43CD9
8C60B563 80FE367D 8CAD14B3 54FB7A9F
4123FFC4 D63312BA 141AF702 F6BBA254
B094B9C0 FAA4B04C 06CC9AFC FD412671
82E3AEE0 0F0FAAA7 8FA773C9 383A9E18
&& END LICENSE &&
&& BEGIN LICENSE &&
2 User License
EA7E-940282
7D1056EB A1DDC1A2
39C102C5 DF8D0BF0 FC3B1A94 4F2892B4
0AEE61BA EED551F A3E3478C
C1C0E04E CA4EA2C1 3F5FB6DB
CFDAB5D 2D3C8CFE FA8B4285
22DA8A1 3B4188AC
346372DA 37AA8ABA 6EB30E41 781BC81F
B5CA66E3 A09DBD3A 3FE85BBD 69893DBD
&& END LICENSE &&
Sublime Text 3安装插件的方法:
安装Sublime text 3插件很方便,可以直接下载安装包解压缩到Packages目录(菜单-&preferences-&packages)。
使用Package Control组件安装
也可以安装package control组件,然后直接在线安装:
按Ctrl+`调出console;
粘贴以下代码到底部命令行并回车:
import urllib.request, 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这一项,则安装成功。
如果这种方法不能安装成功,可以进行手动安装:
先下载/wbond/sublime_package_control中的zip文件,解压后将文件夹名更改为package control。
下载插件分支/wbond/sublime_package_control/tree/python3中的zip文件,解压后覆盖到package control中,完成此插件API函数的更新。
将package control文件夹放入C:\Users\Mr.DenGo(你的电脑名)\AppData\Roaming\Sublime Text 3\Packages中,重启sublime text 3即可生效。
用Package Control安装插件的方法:
按下Ctrl+Shift+P调出命令面板
输入install 调出 Install Package 选项并回车,然后在列表中选中要安装的插件。
常用插件列表
Emmet绝对的节省时间。您可以轻松快速地编写HTML。
使用方法:&ctrl&+&alt&+&enter,并且开始输入Emmet风格的HTML.
详细使用方法可以参考&&。
一个真正简单的方式来轻松地创建许多语言包括JavaScript,PHP和CoffeeScript的文档块。只要在函数的上面输入&/**&,按&Tab&就可以了。DocBlockr会观察函数需要的变量名和类型,并创建文档块。
Alignment (代码对齐)
一个非常简单和易于使用的插件,使你的代码组织和美观。当您重温代码时候非常有用。
使用方法:选中要调整的行,然后按&Ctrl&+&Alt&+&A。
BracketHighlighter
该插件提供行数列高亮的各种配对的语法符号。(注:就是将配对的括号等显示在行数列上)
Sublime Prefixr
Prefixr,CSS3 私有前缀自动补全插件,显然也很有用哇。
一个JS代码格式化插件。
SublimeLinter
一个支持lint语法的插件,可以高亮linter认为有错误的代码行,也支持高亮一些特别的注释,比如&TODO&,这样就可以被快速定位。(IntelliJ IDEA的TODO功能很赞,这个插件虽然比不上,但是也够用了吧)
JsMinifier
该插件基于Google Closure compiler,自动压缩js文件。
Sublime Text3支持jQuery。
这是用来给CSS属性进行排序的格式化插件。如果你想保持的代码干净整洁,并且希望按一定的顺序排列(是不是有点强迫症了?),那么这个插件是一种有效解决的方案。特别是当你和其他有自己代码编写风格的开发者一同协作的时候。
MarkDown Editing
SublimeText不仅仅是能够查看和编辑 Markdown 文件,但它会视它们为格式很糟糕的纯文本。这个插件通过适当的颜色高亮和其它功能来更好地完成这些任务。
DocBlockr 可以使你很方便地对代码建立文档。它会解析函数,变量,和参数,根据它们自动生成文档范式,你的工作就是去填充对应的说明。
Git插件,提供Git常用的命令集合。
查找文档不同。
ColorPicker
如果你经常要查看或设置颜色值,这个插件可以很方便地调用你本机的调色板应用。这是一个双向的功能,你既可以在调色板中选择一个颜色,然后按&确定&按钮把该值填写到 SublimeText 中活动文档的当前位置,也可以在活动文档中选择一个颜色的值,按此插件的快捷键就会在显示的调色板中定位到该值所对应的颜色。
如果您想检查浏览器是否支持你包括在你的代码中的CSS和HTML元素,那么这是你需要的插件。所有您需要做的就是选择有疑问的元素,插件将为你做其余的事情。
附Sublime Text 3 快捷键列表:
Ctrl+Shift+P:打开命令面板
Ctrl+P:搜索项目中的文件
Ctrl+G:跳转到第几行
Ctrl+W:关闭当前打开文件
Ctrl+Shift+W:关闭所有打开文件
Ctrl+Shift+V:粘贴并格式化
Ctrl+D:选择单词,重复可增加选择下一个相同的单词
Ctrl+L:选择行,重复可依次增加选择下一行
Ctrl+Shift+L:选择多行
Ctrl+Shift+Enter:在当前行前插入新行
Ctrl+X:删除当前行
Ctrl+M:跳转到对应括号
Ctrl+U:软撤销,撤销光标位置
Ctrl+J:选择标签内容
Ctrl+F:查找内容
Ctrl+Shift+F:查找并替换
Ctrl+H:替换
Ctrl+R:前往 method
Ctrl+N:新建窗口
Ctrl+K+B:开关侧栏
Ctrl+Shift+M:选中当前括号内容,重复可选着括号本身
Ctrl+F2:设置/删除标记
Ctrl+/:注释当前行
Ctrl+Shift+/:当前位置插入注释
Ctrl+Alt+/:块注释,并Focus到首行,写注释说明用的
Ctrl+Shift+A:选择当前标签前后,修改标签用的
Shift+F11:全屏免打扰模式,只编辑当前文件
Alt+F3:选择所有相同的词
Alt+.:闭合标签
Alt+Shift+数字:分屏显示
Alt+数字:切换打开第N个文件
Shift+右键拖动:光标多不,用来更改或插入列内容
鼠标的前进后退键可切换Tab文件
按Ctrl,依次点击或选取,可需要编辑的多个位置
按Ctrl+Shift+上下键,可替换行
Ctrl+D&选中光标所占的文本,继续操作则会选中下一个相同的文本。
Alt+F3&选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑。举个栗子:快速选中并更改所有相同的变量名、函数名等。
Ctrl+L&选中整行,继续操作则继续选择下一行,效果和&Shift+&&效果一样。
Ctrl+Shift+L&先选中多行,再按下快捷键,会在每行行尾插入光标,即可同时编辑这些行。
Ctrl+Shift+M&选择括号内的内容(继续选择父括号)。举个栗子:快速选中删除函数中的代码,重写函数体代码或重写括号内里的内容。
Ctrl+M&光标移动至括号内结束或开始的位置。
Ctrl+Enter&在下一行插入新行。举个栗子:即使光标不在行尾,也能快速向下插入一行。
Ctrl+Shift+Enter&在上一行插入新行。举个栗子:即使光标不在行首,也能快速向上插入一行。
Ctrl+Shift+[&选中代码,按下快捷键,折叠代码。
Ctrl+Shift+]&选中代码,按下快捷键,展开代码。
Ctrl+K+0&展开所有折叠代码。
Ctrl+&&向左单位性地移动光标,快速移动光标。
Ctrl+&&向右单位性地移动光标,快速移动光标。
shift+&&向上选中多行。
shift+&&向下选中多行。
Shift+&&向左选中文本。
Shift+&&向右选中文本。
Ctrl+Shift+&&向左单位性地选中文本。
Ctrl+Shift+&&向右单位性地选中文本。
Ctrl+Shift+&&将光标所在行和上一行代码互换(将光标所在行插入到上一行之前)。
Ctrl+Shift+&&将光标所在行和下一行代码互换(将光标所在行插入到下一行之后)。
Ctrl+Alt+&&向上添加多行光标,可同时编辑多行。
Ctrl+Alt+&&向下添加多行光标,可同时编辑多行。
Ctrl+J&合并选中的多行代码为一行。举个栗子:将多行格式的CSS属性合并为一行。
Ctrl+Shift+D&复制光标所在整行,插入到下一行。
Tab&向右缩进。
Shift+Tab&向左缩进。
Ctrl+K+K&从光标处开始删除代码至行尾。
Ctrl+Shift+K&删除整行。
Ctrl+/&注释单行。
Ctrl+Shift+/&注释多行。
Ctrl+K+U&转换大写。
Ctrl+K+L&转换小写。
Ctrl+Z&撤销。
Ctrl+Y&恢复撤销。
Ctrl+U&软撤销,感觉和&Gtrl+Z&一样。
Ctrl+F2&设置书签
Ctrl+T&左右字母互换。
F6&单词检测拼写
Ctrl+F&打开底部搜索框,查找关键字。
Ctrl+shift+F&在文件夹内查找,与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找,略高端,未研究。
Ctrl+P&打开搜索框。举个栗子:1、输入当前项目中的文件名,快速搜索文件,2、输入@和关键字,查找文件中函数名,3、输入:和数字,跳转到文件中该行代码,4、输入#和关键字,查找变量名。
Ctrl+G&打开搜索框,自动带:,输入数字跳转到该行代码。举个栗子:在页面代码比较长的文件中快速定位。
Ctrl+R&打开搜索框,自动带@,输入关键字,查找文件中的函数名。举个栗子:在函数较多的页面快速查找某个函数。
Ctrl+:&打开搜索框,自动带#,输入关键字,查找文件中的变量名、属性名等。
Ctrl+Shift+P&打开命令框。场景栗子:打开命名框,输入关键字,调用sublime text或插件的功能,例如使用package安装插件。
Esc&退出光标多行选择,退出搜索框,命令框等。
Ctrl+Tab&按文件浏览过的顺序,切换当前窗口的标签页。
Ctrl+PageDown&向左切换当前窗口的标签页。
Ctrl+PageUp&向右切换当前窗口的标签页。
Alt+Shift+1&窗口分屏,恢复默认1屏(非小键盘的数字)
Alt+Shift+2&左右分屏-2列
Alt+Shift+3&左右分屏-3列
Alt+Shift+4&左右分屏-4列
Alt+Shift+5&等分4屏
Alt+Shift+8&垂直分屏-2屏
Alt+Shift+9&垂直分屏-3屏
Ctrl+K+B&开启/关闭侧边栏。
F11&全屏模式
Shift+F11&免打扰模式
阅读(...) 评论()一个前端程序猿的Sublime Text3的自我修养 | 三省吾身丶丶
详细设置 && 20+插件
本文章会在本人有插件或者设置更新时,进行不定时更新
更新:NO. 21 侧边栏同步编辑窗口底色插件。更新:代码片段:better-completions;主题:Material,Seti_UI;代码格式化:HTML-CSS-JS Prettify;vue语法高亮:Vue Syntax Highlight;Terminal与MarkdownEditing个性化定制GitSavvy 、更新:自定义代码片段;livereload:保存自动刷新浏览器;WakaTime:记录你的编程时间
为什么要选择Sublime Text3?
Sublime Text3 自动保存,打开图片
跨平台启动快!!!!多行游标,太好用。
插件,简直选不过来。
VIM兼容模式
菜单栏基础功能介绍
File:文档相关,新建文件,打开文件或文件夹等。
Edit:文件编辑相关,复制,剪切等(CVS大法好)。除此之外还有一些强大的功能。
Selection:选择相关,帮助选择代码。
Find:查找替换相关。这个和其它编辑器区别好像不大。
Ctrl+F查找、Ctrl+H替换等。
View:对Sublime_Text编辑器本身的一些配置。
SideBar:开启侧边栏Ctrl+k,b
Show console:打开控制台窗口,安装package control需要使用.
Goto:快捷导航:下面介绍。Goto Anything
tools:工具,一些命令。
new Snippet:自定义代码片段,保存到user下
Project: 项目相关,用的少。
Preferences:对于sublime_text进行一些个性化定值。
Help:如同名字。注册在这里
line相关:
Ctrl+Shift+D:复制当前行
Ctrl+Shift+K:删除当前行
Ctrl+j 合并一行
Ctrl+Enter:在当前行下添加新行。After
Ctrl+Shift+Enter:在当前行上添加新行。Before
Ctrl+Shift+上、下:移动当前行
Comment注释:
Ctrl+/:行注释。
Ctrl+Shift+/:块注释
Ctrl+Shift+P:调用命令面板,快速查找,例如:改变语法模式等。
模糊匹配,可以减少对快捷键的记忆。
Shift+Alt+1,2,3,4,5:开启对应数字的多栏编辑
Ctrl+P:Goto Anything
Ctrl+P: 查找项目中的文件:
直接输入名称:在不同文件中切换,支持级联的目录模式
::+ 行号:Ctrl+G 定位到具体的行。
@:+ 符号:Ctrl+R定位到具体的符号,例如:JS函数名,CSS选择器名。
#:+ 关键字:Ctrl+;匹配到具体的匹配的关键字。主要是模糊匹配。
Ctrl+D:选中当前光标所在位置的单词。连续使用时,进行多光标选择,选中下一个同名单词。
Ctrl+K:配合Ctrl+D可以跳过下一个同名单词。
Ctrl+L:选择当前光标所在位置的行。连续使用时,继续选中下一行。
Ctrl+Shift+L:在多行选中后,在所有选中的行后产生游标。
Alt+F3:选中文档中所有的同名单词。
Shift+鼠标右键:向下拖动,产生多个光标。
设置使用 View–&Show console,快捷键: Ctrl+` 调出console面板输入sublime.log_commands(True),可以得到当前使用的命令面板进行设置的值。方便进行快捷键的绑定。
下面这些都可以通过命令面板快捷查找
Settings-User:个人对于sublime_text的定制。使用JSON格式,会直接覆盖掉Settings-Default默认设置中的内容。
12345678910111213141516171819202122{
"color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme",
"theme": "Material-Theme-Darker.sublime-theme",
"draw_minimap_border": true,
"font_face": "Monaco",
"font_size": 10,
"highlight_line": true,
"save_on_focus_lost": true,
"theme": "Spacegray Eighties.sublime-theme",
"word_separators": "./\\()\"':,.;&&~!@#$%^&*|+=[]{}`~?",
"word_wrap": true,
"trim_trailing_white_space_on_save": true,
"ensure_newline_at_eof_on_save": true,
"disable_tab_abbreviations": true,
"translate_tabs_to_spaces": true,
"tab_size": 4,
"fade_fold_buttons": false,
"bold_folder_labels": true,
"auto_find_in_selection": true }
key - Bindings-User:个人对于快捷键的设置。同样会覆盖默认的设置。例如:
"keys": ["shift+tab"], "command": "reindent","args":{"single_line":false}
构建系统实现快捷调用浏览器
构建系统可以让您通过外部程序来运行文件,并可以在Sublime Text查看输出。
tools:工具下的Build System选择新建一个选项后(Build System–&New Build System),进行如下设置(注意后缀),保存到user目录下:
12345{
"cmd" :["C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe","$file"],
"selector":["text.html"]}
之后再进入刚刚的的地方,选择第一个Automatic,修改内容后按Ctrl+B,可以看到自动调用chrome并且是修改后的内容。在sublime Text的console中可以看到输出的信息。更多功能请查看
上面是一些基础功能的介绍
更新:自定义sublime代码片段
我们在开发中有很多代码是需要重复编写的,每一次都去复制粘贴显然是一件效率极其低下的事情,sublime的自定义代码片段功能就很好的解决了这个问题。下面就来看一下如何在sublime中自定义代码片段
首先在菜单栏选择:Tools -&developer -& New Snippet可以看到新建一个xml类型的描述文件,如下:
123456789&
&&![CDATA[Hello, ${1:this} is a ${2:snippet}.]]&&
注释已经非常详细了,content 里面就是代码模版:${序号:默认值} ,序号相同的地方光标会同时停在那可以多处同时编辑。序号大小就是 tabindex。在实际使用代码的时候,可以使用 tab 切换光标位置。
以hexo新建一篇博客头部为例:
12345678910111213141516&
&![CDATA[title: ${1:标题}date: ${2: 15:26:17}tags: [${3:标签}]categories: [${4:分类}]]]&
&hexo博客头部生成&&
设置完毕,最后还差一步,要想代码片段生效,还必须保存到sublime的文件目录\Data\Packages\User,文件名任意,但文件后缀必须为.sublime-snippet。
现在输入hexoH试试,你想要的代码片段是不是已经有了呢?
插件的安装与使用安装package control。这里我使用的是sublimeText 3,2 的话上官网查询代码。首先打开package control的。复制下面这一段代码:
1import urllib.request,os, h = 'e5ee549c' + '8bc59f460fa163dafc88'; 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)
在上面说的View–&Show console,快捷键: Ctrl+` 打开控制台窗口,粘贴上面的代码,回车,然后就是等待安装了,需要一定的时间。安装完成后重启 。
使用Ctrl+Shift+P,打开控制面板,输入PC,效果如下:说明安装成功了。
按照上面的步骤,打开图片中的安装插件就行了,其实默认配色真的挺好看的
推荐在安装前,先去。的样式,以及设置方法,说明文档。一般安装成功后,会自动弹出。
以Theme - Spacegray为例:
先使用Ctrl+Shift+P 输入PCI,回车选择 Install Package 。需要等待一会加载时间,输入Theme-Spacegray。其实不输入完也会模糊匹配出来的。
回车等待安装就好,成功后会弹出一个使用设置的页面,把其中的如下代码拷贝到Settings-User,保存,你会发现,默认的主题已经变成了刚刚我们查看过的主题了。
12"color_scheme": "Packages/Theme - Spacegray/base16-eighties.dark.tmTheme","theme": "Spacegray Eighties.sublime-theme"
当然,你也可以通过菜单栏,进行主题的选择。会有相同的效果。它会自动在Settings-User进行设置。
安利两款主题:
两款主题都有侧边栏图标显示:我在这里说不清到底谁好谁差,全凭个人的喜好吧!
Material:
安装方法还是和上面一样,最好是根据它的README描述来进行设置。
个人常用插件及使用方法:NO.1 AdvancedNewFile:快速新建文件。
假设有文件夹file。我们正在输入代码,又想在新的子目录下新建html文件的话用传统方式得很多步,新建目录,新建文件,保存等等等。
但是有了该插件之后,事情就变得简单了许多,只需要按下Ctrl+Shift+N,输入文件夹以及文件名,你就会看到如下效果:(回车,你会发现已经子目录下的文件已经新建完成了!)
NO.2 Nettuts+ Fetch:管理类库。安装成功后输入Ctrl+Shift+P打开命令面板,输入Fetch,可以看到以下:
选择file可以看到设置的文件。选择下载配合刚刚上面的插件使用,简直完美..
必装插件,无比强大,就不过多介绍了。可以在浏览器中打开,还可以配置不同文件的打开方式。单单下面这一个功能就必须安装了!快捷在不同浏览器打开:
配置设置:
1234567891011121314151617181920212223242526272829[
"keys": ["f1"],
"command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
"extensions": ".*"
"keys": ["f2"],
"command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "D:\\浏览器\\火狐\\firefox.exe",
"extensions": ".*"
"keys": ["f3"],
"command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
"extensions": ".*"
可选SyncedSideBar:每次打开文件,侧边栏都会同步显示该文件所在目录树中的位置
NO.4 DocBlockr:代码块注释。可以快速的对函数进行注释。保持代码规范。支持多种语言。(个人觉得brackets的这个插件比Sublime Text做得好多了。)
/*:回车创建一个代码块注释
/**:回车在自动查找函数中的形参等等。
它会生成 JSDoc 格式的注释。如果你从没有使用过类似的工具,DocBlockr 会让你觉得以前没有它是如何写代码的。帮助你创造你的代码注释,通过解析功能,参数,变量,并且自动添加基本项目。
NO.5 SublimeLinter-jshint:语法校验
需先安装SublimeLinter。
需先安装Node.JS及npm。
在cmd输入 npm install -g jshint,等待安装成功就好了。
安装成功后,重启就可以测试代码的风格了。当然还可以自定义校验规则,在该目录下使用Ctrl+Shift+N创建文件.jshintrc,在其中使用JSON格式配置校验风格。
1234{
"eqeqeq":true}
并且在左下角会有错误提示。需要注意的是内容有更改时,才会立即生效。详细自定义规则:
NO.6 Git :版本控制可视化的操作:帮助你与你的Git repo协议进行交互。它支持很多命令像init,push, pull, branch, stash,等等。了解更多关于你在Sublime Text里面究竟能使用哪些Git功能,以提高您的工作流程。
GitGutter:Sublime Text 有了 Git 插件之后,GitGutter 更好的帮助开发者查看文件之前的改动和差异,提升开发效率。(其实我是冲着这个来的)
NO.7 Emmet:不解释。中文文档:
NO.8 JsFormat:代码格式化 使用 HTML-CSS-JS Prettify,下面介绍:
JsFormat 基于 JS Beautifier,可以帮助你自动格式化JavaScript和 JSON。这对于阅读代码是非常有用的。
快捷键:Ctrl + Alt + f 或者,你也可以使用菜单栏。
可定制喜欢的格式:在 SublimeText 3 中 Preferences -& Package Settings -& JsFormat -& Settings - Default 可以调整这些配置。
NO.9 jQuery:jQuery的API代码片段我知道目前在很多地方 jQuery看似已经落伍了,但是如果你不是建立一个交互性很强的网站或者你只是想在已有应用上添加功能,它仍然是非常有用的。
比如,输入$.a就可以让我选择$.ajax(),然后自动扩展成以下代码:123456789101112131415$.ajax({
url: '/path/to/file',
type: 'default GET (Other values: POST)',
dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
data: {param1: 'value1'},}).done(function() {
console.log("success");}).fail(function() {
console.log("error");}).always(function() {
console.log("complete");});
NO.10 BracketHighlighter:符号高亮该插件提供行数列高亮的各种配对的语法符号,显示在行号上。效果如下:
配置方法参考
NO.11 JavaScript Next:完美支持ECMAScript 6
JavaScript Next 提供了比默认JavaScript Package更好的语法高亮,而且他完美支持ECMAScript 6。
建议完全使用 JavaScript Next代替JavaScript Package。
NO.12 CSS3:CSS3语法高亮
默认安装的Sublime Text对CSS3的支持让人抓狂,帧动画?别开玩笑了你只会看到一片白色的纯文本一样的代码。
事实上不光CSS3,我建议用CSS3 Package完全替代原来的CSS Package来完成语法高亮。把原来的禁用了吧
NO.13 Color Highlighter :CSS颜色高亮
这个插件我等了很久了(在使用breakets的时候发现 的,好用到爆),我最早用Sublime Text写CSS时候就在想“这堆颜色码谁知道是什么颜色”。。
还是brackets的牛逼
Color Highlighter这个插件会检测CSS文件中的颜色码,不论是Hex码或者RGB码都能很好的显示。
Color Highlighter能够设置成用背景色或者边框提示颜色,我一般在Settings里做这样的设置:
1234{
"ha_style": "filled",
"icons": false}
效果如下:
NO.14Colorpicker:使用一个取色器改变颜色使用方法: ctrl + shift + c,快捷键有冲突,需修改。可以通过ctrl+shift+p:搜索Colorpicker调用
NO.15 Markdown Editing 和 Markdown Preview,实现预览MD
当在 Sublime Text 中编写 markdown 文件时,在浏览器中打开全是乱码,因为还没有将 markdown 文件解析成相应的 HTML.
这两个插件的功能就是可以用浏览器浏览 Sublime Text 中编写的 markdown文件。
打开 Preferences-&Package Settings-&Markdown Preview-&Setting User 将下面这句话粘贴进去。
123456789{
"browser" : "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"}{
"keys": ["f6"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"}},
直接按F6就可以打开浏览器预览markdown,并且它们的安装还会让编写markdown时支持一些快捷键。
不进行这些配置的话,因为我们在前面 构建系统 使用了一些操作,按ctrl+b,就会在当前文件目录下,创建一个同名的html文件。
选中该htnl文件,再次按ctrl+b可以达到同样的预览效果,不过还是F6简单不是吗?
我知道你们都忍不了那默认的白色背景,丑爆了好吗? 现在我们找到preference–&package Settings–&MarkdownEditing–&Markdown GFM Settings-users,把下面这个复制进去:
"color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme",}
然后你就会发现世界又回到了春天-。-(这里使用的我上面介绍的Material),更多的设置就举一反三啦!
NO.16 AutoFileName:文件路径自动提示这个直接安装就可以用了,挺方便的。
NO.17 Terminal:在Sublime Text直接打开命令行 更新
默认快捷键 Ctrl+Shift+T。
在windows下默认会打开Windows PowerShell,那界面简直丑到不行好吗!!
根据上面的经验同样找到preference–&package Settings–&Terminal–&Terminal Settings-users:进行下面的设置:
12345{
"terminal": "C:\\WINDOWS\\system32\\cmd.exe",
"parameters": ["/START", "%CWD%"]}
然后人生就焕发了第二春 -。-(强烈建议大家去搜索使用被我注释掉的Cmder,这才是一个shell的样子嘛!)
NO.18 CSScomb : CSS属性排序
NO.19 JavaScript Completions和JavaScript & NodeJS Snippets。输入提示,代码补全
看个人喜好咯,不用代码补全,可以锻炼英语!!
有人反映说安装主题后侧边栏颜色不更改,其实有两个方法,一个在\Data\Packages\主题修改主题配置。
比较麻烦,就不说了,直接安装这个插件就好了,记得重启刷新。
NO.21 HTML-CSS-JS Prettify: HTML-CSS-JavaScript 代码格式化其实有了这个代码格式化插件,就可以删除上面的代码格式化插件了。因为功能确实强大!
其实我把官网的配置趴下来之后就改了两个地方:
&selector_separator_newline&: false: 不需要每个CSS选择器单独占一行
&allowed_file_extensions&: [&..这是老的,新增在--&&,&vue&],:将vue的组件当成html来进行格式化
默认快捷键:Ctrl+Shift+H
更多的个性化定制大家自己去实现吧!
NO.22 better-completions: 涵盖了html, jquery,javascript,Bootstrap的代码片段。
官网介绍的很详细。这个插件要是包含的类型多,当然在每一种语言上的匹配肯定是不如上面介绍。不过为了少按几个插件,还是用了它,把上面的几个代码片段插件删了。不过它也是支持加载自定义代码片段的,如果有需要的话,那就自己编写吧^_^。
NO.23 liveReload:文件保存浏览器即时刷新!
该插件在window下,有很多问题会导致不能使用,mac下可以正常使用
需安装对应的chrome插件:,完成后需勾选允许访问文件网址
为了避免每一次启动实时刷新在sulime里面启动一遍插件,可在插件设置中增加如下字段:
123456{
"enabled_plugins": [
"SimpleReloadPlugin",
"SimpleRefresh"
这时就只需要在浏览器端点一下小圆圈就好了
SideBar Folders:更好的管理侧边栏文件夹
IMESupport :输入法不跟随时安装
FileHeader :自动更新保存时间,文件模板
QuoteHTML :把HTML拼接成js插入字符串,字符串拼接的痛
CSS Format :CSS格式化
AutoPrefixer :浏览器私有属性前缀补全 (Node.js依赖)
ConvertToUTF8:GBK编码兼容
Vue Syntax Highlight:vue文件的语法高亮
WakaTime:记录你的编程时间
rem-unit:px单位自动转rem,移动端开发必备
参考如下:
慕课网视频:
慕课网视频:
Sublime Text手冊:
Github资源合集
知乎Sublime Text专题
坚持原创技术分享,您的支持将鼓励我继续创作!
支付宝打赏

我要回帖

更多关于 前端工程师电脑配置 的文章

 

随机推荐