Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sublime Text
Webdesign

Sublime Text 3 中提高工作流程的有用快捷键

by
Difficulty:BeginnerLength:ShortLanguages:

Chinese (Simplified) (中文(简体)) translation by Roger Shen (you can also view the original English article)

Sublime Text 3 有许多特性和快捷键供现代的程序员使用。现在来看看一些最重要的事,我认为可以使你的工作流程提高到一个新的水平。学习怎样使用基础的快捷键,项目工作或手柄标签,而且是不使用鼠标

项目工作

我发现有很多的开发者并不使用这个棒极了的特性。你在开发一个项目时的典型过程是什么?或许是这样:

  1. 启动 Sublime Text
  2. 打开Finder
  3. 搜索项目
  4. 把文件夹拖进编辑器
  5. 搜索文件然后打开
  6. 着手开发

这还不够。比如 你昨天晚上写的一个文件,今天早上你想从昨天离开的的地方继续。这种工作流程我们都知道很低效,所以,我们把注意力转移到 Sublime Text 的菜单栏上的项目

创建你的第一个项目

每个保存过的项目都有他自己的配置文件,所以,我们从系统的某个保存过的地方开始。以你自己的方式创建一个文件夹,名字是 sublime-projects(例子).

然后开始一个项目,通常在Sublime中打开一个文件或文件夹。现在去 项目 > 项目另存为... 导航到 sublime-projects 文件夹,给它个名字然后保存。 

得到保存项目列表

为了快速访问前面项目的全部列表,用快捷键 CMD-CTRL-P。在搜索查询中输入内容过滤列表,按回车键就会打开文件夹并且显示在侧边栏中。 

你在文件夹中查找项目,准确的打开或关闭标签

用这个方法在两个项目之间切换,无论是向前还是向后都很简单。

搜索项目中的文件

我发现这是最节省时间的,搜索文件时按键要比点鼠标更快,所以,在一个打开的项目里,按 CMD-P 然后输入你要搜索的文件

手柄标签

标签是个相当不错的方式,可以让你总览项目。你可以一个标签写HTML文件,另一个写CSS,最后一个写Javascript。使用这些快捷键就可以快速创建标签:

  • CMD-2- 添加两个标签
  • CMD-3- 添加三个标签
  • CMD-4- 添加四个标签

现在我们快速浏览标签:

  • CMD-ALT-LEFT ARROW - 上一个 标签
  • CMD-ALT-RIGHT ARROW - 下一个 标签

选择

我不是鼠标党 - 用鼠标太复杂太慢。比方说,码完字后还要按住鼠标键把它拖到词或行的末尾。有时还选不中你想要的。那下面的快捷键则不会让你失望!

匹配全部你所选中的

逐个选

选中一个词,然后按CMD-D.

同时选:

再强调一次,选中一个词,然后按 CMD-CTRL-G. 

选择整行

使用CMD-L选取整行,再按就会选取下一整行,一行一行

选择全都的子元素

选中元素中的子元素,然后按 CMD-SHIFT-J 所有子元素就都会被选中。

多种省时方法

还有另外一些快捷键不可不知。

跳转到某个函数

搜索当前文件夹中的某个函数,可以按 CMD-R 输入搜索内容,找到你想要的函数

复制当前行

点击你想复制的行,按 CMD-SHIFT-D. 现在你复制了全新的一行,光标也跳到了新行。

行互换

点击CMD-CTRL-↓CMD-CTRL-↑ 改变行的位置。

关闭当前THML标签

如果你输入了开始标签 <span> 而你不想动手输入关闭标签, 可以按 CMD-ALT-. Sublime Text会替你输入关闭标签。另一个方法是输入 span 不需要尖括号,然后按TAB

侧边栏的关闭与隐藏

Sublime Text 甚至有关闭和隐藏侧边栏的快捷键。 按 CMD-K-B 打开/隐藏。

多选光标

创建多选光标

你想要有更多的光标? 按住 CMD然后点击你想要的光显示的第二个位置. 重复这一过程你就可以创建更多你想要的光标。

以拖动的方式创建多选标签

以第一种方式的话你必须先点击你想要光标在位置。 但或许你想要同时选中全部垂直对齐的文件。 不必每个都分别点击, 而是按 ALT 然后按下鼠标左键,向上或向下拖动光标。

写作插件: Markdown Preview

我个人经常在Sublime Text 中写作,但刚开始时我并没有预览文档。后来我发现了 Markdown Preview

想要安装它,进入到编辑器,按CMD-SHIFT-P 打开插件管理器, 输入 Package Control: Install Package, 搜索 Markdown Preview 点击 回车 安装。 

现在打开你的Markdown文件,再次执行 CMD-SHIFT-P 搜索 Markdown - 你会看到这个选项 Markdown Preview: Preview in Browser. 点击之后你默认的浏览器就会打开个新标签页预览Markdown文件

必备插件: Hayaku

这个插件会帮你更快的写CSS Hayaku 可以比肩Emmet, 特别是在输入CSS属性时

智能CSS值缩写

这里有一些使用 Hayaku 属性/值 缩写的例子 (按 TAB 执行):

  • por  position: relative;
  • mt10 margin-top: 10px;
  • cF  color: #FFF;
  • brr  background-repeat: repeat;
  • tdn text-decoration: none;

使用键盘增大 & 减小数值

使用键盘增大或减小数值。 把光标放在数值上使用下列快捷键。

  • 每次增大或减小 0.1: ALT-CTRL-↑ or ALT-CTRL-↓
  • 每次增大或减小 1: ALT-↑ or ALT-↓ 
  • 每次增大或减小 10: ALT-SHIFT-↑ or ALT-SHIFT-↓

最后再说一句

每个人都应该有选择的学习一些应用的快捷键!如果你反复重复些令人沮丧的任务,那就找个快捷键。如果你找到一个,花点时间去学习使用它;这是值得的。

哪个 Sublime Text 3 中的快捷键是你的最爱? 哪个你每天都使用?

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.