sublime 高效应用

发表于   |   分类于   |     |   阅读次数

sublime 作为轻量级的前端开发IDE，灵活运用起来十分方便，而且能够极大的提高开发效率，这里记录运用sublime 的快捷键，插件安装等，关键字Package Control、emmet。

1.There are no packages available for installation问题

搜索问题发现两种解决方案，但是都没有效果，下载重新安装也没效，最后通过解决sublime package control 出现There are no packages available for installation,读到评论解决了问题。

解决方案删除Package Control目录下所有文件和本身文件夹删除User目录下相关文件Package Control.sublime-settings等,再在控制台下（ctrl+~）可以重新安装，在https://packagecontrol.io/installation复制相应命令

出现问题的原因版本问题有可能用的是老版本没有update，所以可能我下载安装的还是老版本

2.emmet 前端开发快捷方式

在html文件中输入下面的简写脚本，按tab键就可生成标准的代码

1.html5

1
2
3
4
5
6
7
8
9
10
11
12
13
脚本：
html:5
生成：
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

2.简单标签

1
2
3
4
脚本：
div.header#header
生成：
<div class="header" id="header"></div>

3.模糊标签

1
2
3
4
5
6
7
8
9
脚本：
.wrap>ul>.item
生成：
<div class="wrap">
  <ul>
    <li class="item"></li>
  </ul>
</div>

4.链式缩写

子节点：在DOM树下一层添加创建一个元素
+同级别：在DOM树同一层添加创建一个元素
^向上层：向上一层添加创建创建一个元素。

1
2
3
4
5
6
7
8
9
10
11
复制代码
脚本：
.outer>.inner>div+p>a^span
生成：
<div class="outer">
  <div class="inner">
    <div></div>
    <p><a href=""></a></p>
    <span></span>
  </div>
</div>

5.分组

1
2
3
4
5
脚本：
(.top>a)+(.bom>a)
生成：
<div class="top"><a href=""></a></div>
<div class="bom"><a href=""></a></div>

6.添加文本和属性

1
2
3
4
脚本：
div[title='测试']>span{测试}+a[href='/a/b']{测试}
生成：
<div title="测试"><span>测试</span><a href="/a/b">测试</a></div>

7.多个class

1
2
3
4
脚本：
.left.con.info
生成：
<div class="left con info"></div>

8.控制标签个数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
脚本：
.wrap>ul>li*5
生成：
<div class="wrap">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
脚本：
.wrap>(h1+p.con)*3
生成：
<div class="wrap">
  <h1></h1>
  <p class="con"></p>
  <h1></h1>
  <p class="con"></p>
  <h1></h1>
  <p class="con"></p>
</div>

9.列表自动添加行号

1
2
3
4
5
6
7
8
9
10
脚本：
ul>li.nav${$$标题}*5
生成：
<ul>
  <li class="nav1">01标题</li>
  <li class="nav2">02标题</li>
  <li class="nav3">03标题</li>
  <li class="nav4">04标题</li>
  <li class="nav5">05标题</li>
</ul>

3.快速创建新文件 (AdvancedNewFile插件)

在现有项目上，通过Ctrl-Alt-n)打开一个路径输入框然后，输入如script/text.js或者css/imgs/回车就可以自动创建目录结构以及空文件。

Ctrl+Alt+n: 创建一个新文件，写路径，可以Tab自动补全
路径太长可以用 : 表示当前位置如:jq/text.js
快速修改当前编辑的文件名（移动文件）：
按下 Ctrl+Shift+T召唤出Panel，然后输入：rename，之后可以改名啦~
不仅仅是改名，还可以改路径；输入 del删除文件。

4.快捷键使用

Ctrl+F 调出查找功能、Ctrl+Shift+ F 调出查找并替换功能
Ctrl+/ 选中部分快速注释
File:
Ctrl+N: New File
Ctrl+O: Open File
Ctrl+W: Close File
Ctrl+Shift+T: Reopen Closed File
Ctrl+S: Save File
Ctrl+Shift+S: Save As
Ctrl+Shift+N: New Window
Ctrl+Shift+W: Close Window
Edit:
Ctrl+Z:Undo
Ctrl+Y:Redo
Ctrl+U:Undo Selection
Ctrl+Shift+U:Redo Selection
Ctrl+C: Copy
Ctrl+X:Cut
Ctrl+V:Paste
Ctrl+Shift+V:Paste and Indent
Ctrl+K,Ctrl+V: Paste From History

Sublime Text 有哪些使用技巧？
Emmet常用的技巧 和快捷键
前端开发利器：Emmet 介绍