sublime text 你所不知道的12个秘密

Posted Hello 程序猿

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了sublime text 你所不知道的12个秘密相关的知识，希望对你有一定的参考价值。

package control安装：

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

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


emmet安装：

1、按Ctrl+Shift+P命令板

2、输入PCIC，回车进入Package Control：install

3、输入Emmet和Emmet Css

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=#]     补充为<h1>foo</h1>    <a href="#"></a>


3、嵌套

>：子元素符号，表示嵌套的元素

+：同级标签符号

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

效果如下图所示： 

技术分享


4、分组

(.foo>h1)+(.bar>h2)


生成：

<div class="foo">  
  <h1></h1>  
</div>  
<div class="bar">  
  <h2></h2>  
</div>  


技术分享


5、定义多个元素 *

ul>li*3

技术分享


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

 ul>li.item$*3      $代表尾数不同1、2、3

技术分享


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代码 
  1. -webkit-transform: ;  
  2. -moz-transform: ;  
  3. -ms-transform: ;  
  4. -o-transform: ;  
  5. transform: ;  

技术分享


你也可以在任意属性前加上“-”符号，也可以为该属性加上前缀。比如输入-super-foo： 
Css代码 
  1. -webkit-super-foo: ;  
  2. -moz-super-foo: ;  
  3. -ms-super-foo: ;  
  4. -o-super-foo: ;  
  5. super-foo: ;  

如果不希望加上所有前缀，可以使用缩写来指定，比如-wm-trf表示只加上-webkit和-moz前缀： 
Css代码 
  1. -webkit-transform: ;  
  2. -moz-transform: ;  
  3. transform: ;  

前缀缩写如下： 
  • w 表示 -webkit-
  • m 表示 -moz-
  • s 表示 -ms-
  • o 表示 -o-

6）渐变 

输入lg(left, #fff 50%, #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


12个小秘密

1) 选择

以下是一些Sublime Text选择文本的快捷键：

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

Sublime Text还支持一次选中多行的操作：Furthermore, Sublime Text brings lets us select multiple lines at once, which can significantly boost your productivity. There are several ways to perform this feature:

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

技术分享

2) CSS排序

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

技术分享

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

3) 命令面板（Command Palette）

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

▼ 重命名文件
技术分享

▼ 设置文件为HTML语法
技术分享

▼ 插入代码片段
技术分享

4) 切换标签页与工程

在同时打开多个标签页时，可以用以下的热键切换：

  • Command + T 列出所有的标签页
  • Command + Shift + ] 下一标签页
  • Command + Shift + [ 上一标签页
  • Command + Ctrl + P 切换侧边栏显示的工程

5) 跨文件编辑

同一个编辑操作可以在多个文件中同时重复。举个例子，多个文件中有同一段代码时，可用以下的步骤快速编辑：

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

技术分享

6) 文件爬虫

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

技术分享

7) 拼写检查

如果你经常使用Sublime Text从事英文创作，那么启用拼写检查就非常有用处了。选择Preferences > Settings – User菜单，添加以下代码：

"spell_check": true,

8) 增强侧边栏

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

技术分享

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

9) 更换主题

Sublime Text的外观主题可以更换。Soda Theme就是一个不错的主题，可以在包管理器中安装。

技术分享

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

  1. 下载并解压缩主题包
  2. 点击菜单 Preferences > Browse Packages…
  3. 把主题文件夹复制到Packages文件夹中.
  4. 点击菜单 Preferences > Settings – Users 并加入以下代码："theme": "Soda Light.sublime-theme"

10) 更换Sublime Text程序图标

不仅主题可以更换，图标也可以。在Dribbble上有大量重新设计的Sublime Text精美图标。更换方法：

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

技术分享

11) 同步选项

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

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

mkdir $HOME/Dropbox/sublime-text-3/  
mv "$HOME/Library/Application Support/Sublime Text 3/Packages" "$HOME/Dropbox/sublime-text-3/"  
mv "$HOME/Library/Application Support/Sublime Text 3/Installed Packages" "$HOME/Dropbox/sublime-text-3/"

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

DSTPATH="$HOME/Library/Application Support/Sublime Text 3"  
DROPBOX_PATH="$HOME/Dropbox/sublime-text-3"  
rm -rf "$DSTPATH/Installed Packages"  
rm -rf "$DSTPATH/Packages"  
mkdir -p "$DSTPATH"  
ln -s "$DROPBOX_PATH/Packages" "$DSTPATH/Packages"  
ln -s "$DROPBOX_PATH/Installed Packages" "$DSTPATH/Installed Packages"

12) 可点击的URL

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

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











































































以上是关于sublime text 你所不知道的12个秘密的主要内容，如果未能解决你的问题，请参考以下文章

唐卡定制之你所不知道的秘密

你所不知道的vim小秘密

sudo命令背后你所不知道的秘密

你所不知道的，Java 中操作符的秘密？

你所不知道的z-index的用法

你所不知道的5 个AR增强现实新趋势