2020-06-02 03:04:29 登录注册 RSS

当前位置: 公理网 >> 正义之家 >> sublimetext你所不知道的12个秘密

sublimetext你所不知道的12个秘密
发布时间:05-22| 来源:公理网 | 点击发表评论

packagecontrol安装:

第一种方法是在控制台中复制粘贴代码按回车,https://sublime.wbond.net/installation


第二种办法下载pc文件,百度一下很多方案,这里不详说了




emmet安装:

1、按Ctrl+Shift+P命令板


2、输入PCIC,回车进入PackageControl:install

3、输入Emmet和EmmetCss

4、安装完毕以后,C+E就可以快速生成代码了




emmet的语法:


?1、输入“!”或“html:5”,然后按Tab键:?


html:5?或!:用于HTML5文档类型
html:xt:用于XHTML过渡文档类型
html:4s:用于HTML4严格文档类型
?


2、轻松添加类、id、文本和属性?


p#foo???补充ID


p.foo???补充类

h1{foo}和a[href=#]??补充为h1foo/h1??ahref="#"/a




3、嵌套

:子元素符号,表示嵌套的元素



+:同级标签符号



^:可以使该符号前的标签提升一行



效果如下图所示:?


148237537ee.gif"alt=""/>





4、分组

(.fooh1)+(.barh2)





生成:

div?
?h1/h1?
/div?
div?
?h2/h2?
/div?











5、定义多个元素*

ulli*3


206800a.gif"alt=""/>





6、定义多个带属性的元素

?ulli.item$*3???$代表尾数不同1、2、3


428184.gif"alt=""/>





7、Css快捷

1)w100?=》?width:100px;?


2)p表示%
???e表示em??
???x表示ex


h10p+m5e?=》?height:10%;??margin:5em;?


3)@f

@font-face{?
?font-family:;?
?src:url();?
}?


4)模糊匹配

ov:h、ov-h、ovh和oh








5)供应商前缀?

如果输入非W3C标准的CSS属性,Emmet会自动加上供应商前缀,比如输入trs,则会生成:?


Css代码?-webkit-transform:?;??-moz-transform:?;??-ms-transform:?;??-o-transform:?;??transform:?;?





你也可以在任意属性前加上“-”符号,也可以为该属性加上前缀。比如输入-super-foo:?

Css代码?-webkit-super-foo:?;??-moz-super-foo:?;??-ms-super-foo:?;??-o-super-foo:?;??super-foo:?;??
如果不希望加上所有前缀,可以使用缩写来指定,比如-wm-trf表示只加上-webkit和-moz前缀:?

Css代码?-webkit-transform:?;??-moz-transform:?;??transform:?;??
前缀缩写如下:?

w表示-webkit-m表示-moz-s表示-ms-o表示-o-


6)渐变?

输入lg(left,#fff50%,#000)








7)其他参考

http://devework.com/emmets-css.html

https://www.douban.com/note/299285545/?qq-pf-to=pcqq.c2c





8、js代码提示

1)c+s+p

2)pcic

3)输入sublimeCodeIntel




9、sublime中安装编译sass






虽然PostCSS才是未来,但是Sass成熟稳定,拥有一大波忠实的使用者,及开源项目,且最近Bootstrap4alpha也从Less转到Sass了。所以了解Sass还是非常有必要的。

基于快速开发及效率,我开发环节习惯通过编辑器插件来完成Less/Sass编译,这样可以快速定位、修复Bug。

下面介绍一款SublimeText的插件SASSbuildsystemforSublimeText2可以在编辑器完成Sass编译。名字是2但Sublime
Text3可用无压力。

安装Sass
首先要安装Ruby和Sass,详细可参考:http://www.w3cplus.com/sassguide/install.html?或者网上大把教程,安装Sass的时候可能被墙不一定安装得上,所以可以退而求其次安装测试本版--pre。

SublimeText安装SassBuild插件
1.安装PackageControlPlugin
打开:ViewShowConsole

输入:

SublimeText2


importurllib2,os,hashlib;h='eb2297e1a458f27d836c04bb0cbaf282'+'d0e7a3098092775ccb37ca9d6b2e4b7d';pf='PackageControl.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp)ifnotos.path.exists(ipp)elseNone;urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler()));by=urllib2.urlopen('http://packagecontrol.io/'+pf.replace('','%20')).read();dh=hashlib.sha256(by).hexdigest();open(os.path.join(ipp,pf),'wb').write(by)ifdh==helseNone;print('Errorvalidatingdownload(got%sinsteadof%s),pleasetrymanualinstall'%(dh,h)ifdh!=helse'PleaserestartSublimeTexttofinishinstallation')

SublimeText3

importurllib.request,os,hashlib;h='eb2297e1a458f27d836c04bb0cbaf282'+'d0e7a3098092775ccb37ca9d6b2e4b7d';pf='PackageControl.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('Errorvalidatingdownload(got%sinsteadof%s),pleasetrymanualinstall'%(dh,h))ifdh!=helseopen(os.path.join(ipp,pf),'wb').write(by)

详见:https://packagecontrol.io/installation

2.安装PackageControlPlugin
Ctrl+Shift+P?(Linux/Windows)或?Command+Shift+P?(OS
X),然后输入'install'会看到PackageControl:InstallPackage并选择。

等待列表出来,输入Sass会看到SASS
BuildSystem选择安装。

安装完成后,Ctrl+B?(Linux/Windows)or?Command+B?(OS
X)可编译Sass为CSS,还会有一个.map文件。

更多详细见官方:https://github.com/jaumefontal/SASS-Build-SublimeText2




10、安装多行注释插件

使用packagecontrol安装DocBlockr。安装完成后使用方法如下:

A、先写完你的函数


functiontestFunction(a,b,c){}
B、然后在函数的前面一行,输入


/**
C、然后回车,自动生成


/***[testFunctiondescription]*@param{[type]}a[description]*@param{[type]}b[description]*@param{[type]}c[description]*@return{[type]}[description]*/functiontestFunction(a,b,c){}
D、并且在注释块中,按@键可以展开关键词:

6104037f281643457b9de26bb11d0.png"alt="\"/>




12个小秘密


1)选择


以下是一些SublimeText选择文本的快捷键:




Command+D?选中一个单词Command+L?选中一行Command+A?全选
Ctrl+Command+M`选中括号内所有内容(编写CSS或JS时非常实用)


SublimeText还支持一次选中多行的操作:Furthermore,SublimeTextbringsletsusselectmultiplelinesatonce,whichcansignificantlyboostyourproductivity.Thereareseveralwaystoperformthisfeature:

Command?按住Command键再点击想选中的行Command+Ctrl+G?(选中部分文本时)按此键选中所有相同文本Command+D?(选中部分文本时)直接选中下一次出现的该文本



2)CSS排序
CSS属性的顺序一般不重要,因为无论何种顺序浏览器都能正确渲染。但排序所有的属性还是有助于代码的整洁。在SublimeText中,选中CSS属性后按F5就可以按字母顺序排序。



也可以使用?CSSComb?等第三方插件,更详细的控制排序的方法。

3)命令面板(CommandPalette)
使用命令面板可以快速完成多重任务。按Command+Shift+P调出面板,键入需要的命令即可。看以下的几个示例:

▼重命名文件


▼设置文件为HTML语法


▼插入代码片段


4)切换标签页与工程
在同时打开多个标签页时,可以用以下的热键切换:

Command+T?列出所有的标签页Command+Shift+]?下一标签页Command+Shift+[?上一标签页Command+Ctrl+P?切换侧边栏显示的工程
5)跨文件编辑
同一个编辑操作可以在多个文件中同时重复。举个例子,多个文件中有同一段代码时,可用以下的步骤快速编辑:

按Command+Shift+F在Find框中输入待查找的代码。可按Command
+E快速使用选择中的代码段。在Where框中指定需要查找的文件范围,或填写open
files表示查找目前打开的文件。在Replace框中输入要替换成的代码,按Replace按钮批量替换。



6)文件爬虫
按Command+R可以列出文档中所有的CSS选择器。可以选择并立刻跳转查看。这个操作比使用一般的“查找”功能快得多。



7)拼写检查
如果你经常使用SublimeText从事英文创作,那么启用拼写检查就非常有用处了。选择PreferencesSettings–User菜单,添加以下代码:


"spell_check":true,

8)增强侧边栏
SideBarEnhancements插件有效地改进了SublimeText的侧边栏。安装插件后在侧边栏上点击右键,可以找到一下新功能:在资源管理器中打开、新建文件、新建文件夹、以…打开、在浏览器中打开。



注:在浏览器中打开的热键是F12。

9)更换主题
SublimeText的外观主题可以更换。SodaTheme就是一个不错的主题,可以在包管理器中安装。



如果要安装的主题并不在在线软件仓库中,也可以手动安装:

下载并解压缩主题包点击菜单?PreferencesBrowsePackages…把主题文件夹复制到Packages文件夹中.点击菜单?PreferencesSettings–Users?并加入以下代码:"theme":
"SodaLight.sublime-theme"
10)更换SublimeText程序图标
不仅主题可以更换,图标也可以。在Dribbble上有大量重新设计的SublimeText精美图标。更换方法:

下载一个图标,有.icns格式的最好。如果没有,用iConvert转换之。终端执行:open/Applications/Sublime\Text.app/Contents/Resources/替换SublimeText3.icns或Sublime
Text2.icns文件。



11)同步选项
如果在多台计算机上工作,同步选项设置应该是一个好主意。我们借用Dropbox完成这一任务。

首先在终端中运行以下命令上传设置文件:


mkdir$HOME/Dropbox/sublime-text-3/
mv"$HOME/Library/ApplicationSupport/SublimeText3/Packages""$HOME/Dropbox/sublime-text-3/"
mv"$HOME/Library/ApplicationSupport/SublimeText3/InstalledPackages""$HOME/Dropbox/sublime-text-3/"

然后在所有需要同步的计算机上运行以下命令下载设置:


DSTPATH="$HOME/Library/ApplicationSupport/SublimeText3"
DROPBOX_PATH="$HOME/Dropbox/sublime-text-3"
rm-rf"$DSTPATH/InstalledPackages"
rm-rf"$DSTPATH/Packages"
mkdir-p"$DSTPATH"
ln-s"$DROPBOX_PATH/Packages""$DSTPATH/Packages"
ln-s"$DROPBOX_PATH/InstalledPackages""$DSTPATH/InstalledPackages"

12)可点击的URL
使用小插件ClickableURLs可以让文件中的URL能够点击。

Sublime常见操作

1.?多光标操作:只要按下Cmd(Windows系统下Ctrl)键,再用鼠标选择不同的行,你就可以同时编辑多行代码。

2.?重新打开关闭的标签:和Chrome浏览器一样,如果你不小心关闭了一个页面,你只要按下Shift+Cmd+T(Windows下按住Shift+Ctrl+T)就可以重新打开该页面。如果你连续按这样的组合键,你就可以按照关闭的顺序重新打开它们。

3.?快速打开文件:这可能是Sublime?Text里我最喜欢的功能。按住Cmd+T(Wiondows系统下按住Ctrl+T)就会打开一个文本框,你可以在文本框内键入想打开的目标文件,系统就会在项目中搜索该文件的位置,这样你就可以不再用文件目录列表。

4.?跳转到符号:如果你想快速跳到某个特定的符号,就按下Cmd+P(Windows系统下按住Ctrl+P)打开搜索框,键入目标符号,回车后就可以跳转至那个符号。

5.?在整个项目文档中搜索:按住Shift+Cmd+F(Windows系统下按住Shift+Ctrl+F),在整个Sublime?Text项目下搜索。

6.?在文字或行间跳转:这更多的是操作系统的特点,但我是在使用Sublime?Text过程中才发现的。在Mac上,如果你按住Alt键的同时使用方向键,那么能够实现单词而不是字符间的跳转。同样的,如果你按住Cmd键的同时使用方向键,就会跳转到这行的另一端。这非常适合在不用鼠标的情况下,快速在代码中定位。

7.?快速更改设置:按住Shift+Cmd+P(Windows系统下按住Shift+Ctrl+P),可以快速启动查找,对Sublime?Text的设置进行修改。

?

20141030045459229.jpg"title="点击查看源网页"alt=""/>




下面还有一些在看过黑客新闻评论后的补充:

8.?在词间跳转:按住Ctrl键,让光标在词间移动,这个是对驼峰式敏感的。假设目前光标位于“cakeParty”的词首,那么按住Ctrl,再按右方向键,就可以将光标移动到”e”和”P”之间。

9.?当前行上移或下移:可以按下Ctrl+Cmd+Up/Down组合键,实现上移或下移当前行。

10.?Sublime?Package?Control:对主题、语法检查、代码校验等的安装非常有用。

11.?快速文字编辑:按下Cmd+d选择当前文字,再次点击Cmd+d对所选文字进行编辑。它会方便重命名局部变量或是HTML标签。

12.?选中所有实例:按住cmd+Ctrl+G选中所有实例。

13.?跳转到指定行:按下Ctrl+G,然后输入行号即可。

14.?复制当前行:按住Cmd/Ctrl+Shift+D,复制当前行。

还有一些常见操作可以点击链接,非常给力哦:

http://www.lupaworld.com/article-248738-1.html





31791881"style="color:rgb(51,51,51);text-decoration:none;font-family:'MicrosoftYaHei';line-height:30px;">快捷键汇总




选择类

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?打开命令框。场景栗子:打开命名框,输入关键字,调用sublimetext或插件的功能,例如使用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常用的插件:

1、http://www.php100.com/html/it/focus/2014/1128/7935.html


2、http://www.oschina.net/translate/20-powerful-sublimetext-plugins?p=3


3、http://blog.jobbole.com/79326/


参考:http://blog.jobbole.com/88648/????
???https://segmentfault.com/a/1190000000505218

最新新闻

手机浏览

公理网 版权所有

公理网 Total 0.046248(s) query 6, 报料QQ:点击这里

给我发消息