【工具】Sublime使用详细介绍

声明:本文章是根据慕课网视频 前端开发工具技巧介绍—Sublime篇 整理而来的笔记。

目录:

1、菜单栏主要功能。
2、使用"Goto Anything"。
3、多行游标。
4、命令模式。
5、安装插件。
6、综合技巧运用。
7、Sublime进阶。
7.1、Snippet以模板的方式编程。
7.2、辅助技巧-advanceNewfile。
未完待续。

1、菜单栏主要功能

sublime.png

1、SublimeText默认配置文件:Preferences——>Setting-Default。
2、SublimeText用户配置文件:Preferences——>Setting-User。
3、SublimeText颜色配置:Preferences——>Color Scheme。

2、使用"Goto Anything"。

要点:
1、其搜索是支持模糊匹配的。
2、可在文件内部外部迅速导航。

1、快捷键Ctrl+P打开GotoAnything输入框。
2、(:20)跳转到第20行。
3、(index.html)找到该文件。
4、(view/index)找到在views目录下的index.html文件。
5、(@)@后面的字符可以找想找到的选择器或者函数名。
6、(#body)#是对页面内容进行匹配。
7、(public/css/bo@body)直接定位到bootstrap.css的body选择器。

3、多行游标

1、Ctrl+D :选择游标所在单词,连续Ctrl+D 实现多行选择(选择与第一次选择相同的单词)。
2、Ctrl+K Ctrl+D:跳过当前选择,选择下一个。
3、Ctrl+shirt+D:复制游标所在行。
4、Alt+F3:选择所有与游标所在单词相同的单词。
5、Ctrl+A,Ctrl+shift+L:每行都会产生一个光标),如果每行一样的话很方便。
6、按住shift键,然后按住鼠标右键向下拖动,也可产生多行游标。
7、按住ctrl键,用鼠标左键一个一个点击,也可以产生多行游标。

4、命令模式

1、首先要安装PackageControl(官网:https://packagecontrol.io )。
2、Ctrl+` 输入:

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; 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)

重启Sublime。
3、Ctrl+Shift+P(启动命令模式)。
4、输入:set syntax javascript(设置为js语法模式)。
5、输入:minimap(打开/关闭右侧的minimap)。

5、安装插件

1、Ctrl+Shift+P打开命令模式。
2、输入install,稍等片刻。
3、输入插件名称回车就能自动安装了。

常用插件:
1、Emmet。
2、主题:Theme - Spacegray(可到PackageControl官网查看该主题样式)。
3、Java​Script & Node​JS Snippets。
4、JQuery。
5、Insert Callback。
6、AdvancedNewFile。

6、综合技巧运用。

1、打开一个文件:Ctrl+N。
2、启动命令模式:Ctrl+Shift+P。
3、设置为html语法模式:输入 sshtml+Enter。
4、在编辑区输入! 接着按快捷键Ctrl+E直接出现(使用Emmet插件完成,如何安装请参考目录4):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

5、Ctrl+P打开GotoAnything。
6、输入#body按回车,光标定位到body标签上。
7、Ctrl+回车,在body标签添加新行。
8、(ul>.item$*10{content})+(ctrl+E)> 号生成子元素 , . 点号代表 class ,$ 产生序号,{ }产生内容。
9、选中“><”字符串按Alt+F3选中所有的“><”字符串,移动光标到"><"中间,回车,输入h2{this is title}按Ctrl+E。
10、Ctrl+Shift+V 粘贴的时候可以保存代码的缩进。

7、Sublime进阶

7.1、Snippet以模板的方式编程。

1、Ctrl+Shift+P打开命令模式。
2、输入Snippet:Function回车。
3、使用Snippet可以减少左右移动光标,输入分号,大括号的一个过程。
4、使用Sublime自动补全功能也能做到以Snippet方式编程。
5、可以去PackageControl官网搜索JavaScript Snippets for Sublime查找更多定义好的Snippet。
6、安装Insert Callback插件按Alt+C可以在参数中自动补全回调方法。
7、安装JQuery插件也能使用Snippet对JQuery进行编程。

7.2、辅助技巧-advanceNewfile。

1、安装AdvancedNewFile插件。
2、Ctrl+Alt+N。
3、输入public/css/test.css,就会在指定目录下创建好test.css文件。
4、如果有目录不存在,也能同时创建好该目录。

未完待续
由于最近才开始有学html5的准备,没有js基础,表示后面的Sublime进阶插件听不懂,等学会了js再来补充。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容