Jasin Yip

如何优雅地使用 Sublime Text ?

引言

知乎 看到这个问题,写了篇比较长的答案,在自己的博客里也写一下吧~

21112146_9SLR.jpg

Sublime Text 2 下载地址:点击打开


使用 Sublime Text 建议掌握常用命令:

1、Ctrl+P:查找打开过的文件。
输入最近的文件名就可以即时预览到文件内容。
Ps:也可以输入路径,包括项目的相对路径。
9b7c4d67ea55e27ec8948fb2c62b52ce_r (1).jpg

2、Ctrl+Shift+P:命令模式

a)切换语法模式:

Set Syntax : [编程语言]

可以缩写为

sspy


这样就可以切换语法模式了,这以便于代码高亮及插件调用(比如HTML模式会使Emmet生效)

b)安装插件(前题是你安装了插件管理器):
22ea96a4a0a384ea7489ad158af5cb4d_b.jpg
输入这个命令之后回车,再输入需要的插件,就可以安装了。
4d0c279219fa579b46cccca30604ae60_b.jpg

3、多处编辑功能:
这个功能至关重要,所以题目必须加大加粗!!
我都不敢回想接触 Sublime Text 以前是怎么活过来的。

比如这样的代码:

<div>
  <h2></h2>
  <p></p>
  <p></p>
</div>
<div>
  <h2></h2>
  <p></p>
  <p></p>
</div>
<div>
  <h2></h2>
  <p></p>
  <p></p>
</div>

如果我需要为所有 h2 换成 h1,再加上一个 class="title" 属性:
那么我只需要选中一个 h2,然后按住 Ctrl+D (因为按一下只会只选择下一个)
126c6e1970e02bf5ae06abfff6a3eb59_b.jpg
于是就变成:
42145bea41de07290b7a2deafc64dc31_b.jpg
然后我就可以输入 h1 ,就变成
2f144dfc0660469e055a961ff0275eed_b.jpg
这个时候,按一下HOME,再按几下右箭头,再输入class="title",然后就会变成

这样就欧了~!
这个可以举一反三,巨有用巨实用!

关于编码

4441773188b44583f7bf8ea235a4dd4e_b.jpg
File -> Reopen with Encoding 可以以某编码打开
File -> Save with Encoding 可以保存为某一编码
编码问题就是这么简单~

关于中键

也就是鼠标滚轮!

鼠标滚轮也可以选中字符,但不同用鼠标左键选择的是,他不会跨行选择,而是直接矩形选择,比如:
cecaa7b4f9bdfab632020af1492ef51b_b.jpg
配合 Ctrl 多处选择进行多处编辑,这直接是赞爆了有木有!!

关于缩进

菜单里这个功能超赞!它可以快速设置 Tab 的宽度,默认是4,也可以 Spaces 与 Tabs 之间转换。
(btw, 习惯用 Tab 缩进的程序猿,在提交代码时转换成2个空格的缩进是个好习惯)
8c775c3efb3a2aef22d2cff88b993669_b.jpg

关于插件

插件太多了,Google/百度/知乎 一搜就有推荐的,这里只推荐一个~!

写前端的话 Emmet 插件是必须的,比如:
输入

html:5

按TAB,会这样

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

(输入!再按Ctrl+E也有同样效果)

输入

div

按TAB,会这样

<div></div>

输入

section#block$*3>h2.title+p.words*2

按TAB,会这样

<section id="block1">
  <h2 class="title"></h2>
  <p class="words"></p>
  <p class="words"></p>
</section>
<section id="block2">
  <h2 class="title"></h2>
  <p class="words"></p>
  <p class="words"></p>
</section>
<section id="block3">
  <h2 class="title"></h2>
  <p class="words"></p>
  <p class="words"></p>
</section>

还有很多用法,可以自行Google/百度 “Emmet”。


最后附上 慕课网 关于 Sublime Text 的教学视频:
Sublime Text 前端开发工具技巧介绍

标签:web前端开发, sublime text

已有 2 条评论

  1. FK FK

    我擦,评论里面的东西不小心点开了,尼玛还在上班的时候点的,楼主怎么不删掉的

    1. 抱歉,没及时看到,删了

添加新评论