Atom编辑器入门到精通(四) Atom使用进阶

原创时间:2016-01-31
更新时间:2016-03-27

在本节中将介绍Atom提供的更高级的使用技巧,通过这些技巧将会进一步提高你的代码编写效率

代码片段(Snippets)

Snippets是一种在代码中快捷插入代码块的方式,下面是维基百科中对Snippet的解释

片段(Snippet)是一个编程用语,指的是源代码、机器码、文本中可重复使用的小区块。通常它们是有正式定义的执行单位,以纳入更大的编程模块。片段经常用来明晰其他“凌乱”函式的功用,或尽量减少使用与其他函式共用的重复代码。

片段管理是某些文本编辑器、程式源代码编辑器、IDE、与相关软件的其中一项功能。其使得使用者能够在反复的编辑作业中保持和使用这些片段。

让我们通过一个实验来感受一下Snippets给我们带来的便利体验

1. 打开Atom编辑器

2. 使用Ctrl+N新建一个文件

3. 使用Ctrl+S保存文件,将文件名改为new.html

4. 在new.html中键入html四个字符,然后按tab键,这时你会发现html这段文本被扩展成了

<html>
  <head>
    <title></title>
  </head>
  <body>

  </body>
</html>

并且光标被移到了<title>标签之间,方便你直接输入这个html文件的标题

5. 在<title>标签之间输入完成html页面标题以后,再次键入tab

你会发现光标又被移到了<body>标签下面了

这就是Snippets,它让你可以很方便地通过一个关键词来插入一段代码块,并且还能通过tab键在这段代码块的输入点之间移动光标,达到快速编码的目的

不同类型的文件有不同的Snippets,你可以通过快捷键Alt+Shift+S来列出当前文件所提供的所有的Snippets

自定义Snippets

Atom中有很多插件都提供了对某个特定文件中Snippets的支持,比如上面的htmlSnippets,就来自language-html插件

当然我们也可以定义自己的Snippets,这样可以在编码的过程中更加灵活地使用这个特性

在Atom的配置目录(如果是Linux系统,这个目录是~/.atom)下包含一个名为snippets.cson的文件,这个文件就负责保存我们的自定义Snippets.你可以通过主菜单Edit->Open Your Snippets来方便地打开这个文件.

Snippet配置格式

基本的Snippet的格式是这样的

‘.source.js‘:
  ‘console.log‘:
    ‘prefix‘: ‘log‘
    ‘body‘: ‘console.log(${1:"crash"});$2‘

配置的第一行指定该Snippet应用的文件类型,获得文件类型字符串最简单的方式是查看该文件对应的语言插件的Scope项

举个例子,如果你想为Java文件添加一个Snippet项,你需要在设置页面查看language-java插件的插件信息,你可以看到插件信息的第一排Scope的值为source.java,因此Java文件的文件类型字符串就是一个点号.接上source.java(就像CSS的类选择器一样)

配置的第二行是Snippet的名字,最好取一看就能猜出该Snippet的作用的那种名字.

接下来的prefix指明触发该Snippet的字符串

body的值‘console.log(${1:"crash"});$2‘指明触发的Snippet的具体内容

其中每个接着数字的$表示一个插入项,当用户按tab时,光标会在设置的插入项之间移动

总结一下,上面的例子会给JavaScript文件添加一个logsnippet

当在js文件中输入log并按tab,它会被扩展为

console.log("crash");

"crash"字符串会被选中,因此如果直接输入其他字符就能改变"crash"这个字符串,当在次按下tab时,光标又会跳到这一行的末尾;后面.

配置多行的Snippet

多行的Snippet配置如下,就是用"""符号将一段body包起来

‘.source.js‘:
  ‘if, else if, else‘:
    ‘prefix‘: ‘ieie‘
    ‘body‘: """
      if (${1:true}) {
        $2
      } else if (${3:false}) {
        $4
      } else {
        $5
      }
    """

Snippet的Snippet

当你在snippets.cson中配置Snippet时,可以使用snipsnipnsSnippet来插入新的Snippet片段

自动补全

Atom自带了基本的自动补全功能

默认情况下Atom会根据当前文档的内容来自动补全

如果你想要更多的选项,可以在autocomplete-plus插件设置处设置.比如可以设置该插件通过所有打开的文档来补全(而不仅仅是当前文档)

代码折叠

代码折叠在查看或编写代码时非常有用,Atom同样也支持这个功能

你可以通过点击行号旁边的箭头或使用快捷键Ctrl+Alt+[Ctrl+Alt+]来折叠或展开代码

另外你还可以通过Ctrl+Alt+Shift+[Ctrl+Alt+Shift+]来折叠或展开全部代码

通过Ctrl+K Ctrl+Num来指定折叠哪一层缩进(Num指定缩进的深度)

通过Ctrl+Alt+F来折叠任意选中的代码段

分栏

你可以使用Ctrl+K 方向键来创建新的分栏,其中方向键的方向决定了分栏的方式,比如Ctrl+K ↓就会创建一个新的水平分栏

当已经存在分栏时,通过Ctrl+K Ctrl+方向键来在分栏间切换光标焦点.

如果你想关闭一个分栏,使用Ctrl+W

代码类型

Atom会自动识别你当前编辑的文件的类型

如果识别失败,Atom会将此文件当做普通的文本文档来处理

在这种情况下我们可以使用Ctrl+Shift+L来手动指定或改变当前文件的类型

时间: 2024-08-25 13:45:40

Atom编辑器入门到精通(四) Atom使用进阶的相关文章

Atom编辑器入门到精通(五) Git支持

版本控制对于开发来说非常重要,Atom当然也提供了很好的支持,本文将介绍如何在Atom中集成使用Git和GitHub 恢复文件 当你修改了某个文件,然后发现改得不满意,希望恢复文件到最后一次提交的状态,可以使用Cmd+Alt+Z或Checkout Head Revision命令此命令将会放弃你对文件所有的修改,直接将文件恢复为最后一次提交的版本相当于Git命令git checkout HEAD -- filename和git reset HEAD -- filename如果恢复文件后发现还是改过

Atom编辑器入门到精通(一) 安装及使用基础

为什么选择使用Atom Atom是GitHub推出的一款编辑器,被称为21世纪的黑客编辑器,主要的特点是现代,易用,可定制.我之前用过多款编辑器,现在来总结一下个人对各编辑器的看法: Vim是我用的时间最长也是折腾时间最长的编辑器其优点是逼格高,定制性强,编辑效率高,资源占用少,还可以终端操作缺点是学习曲线陡峭,经常出一些莫名其妙的错误,突然就是一堆调试信息闪过,长得最丑,哪怕是使用了各种插件美化,还是最丑.另外就是自身的现代化特性太少,过于依赖插件,如果要实现最基本的IDE的功能,需要装一大堆

Atom编辑器入门到精通(三) 文本编辑基础

身为编辑器,文本编辑的功能自然是放在第一位的,此节将总结常用的文本编辑的方法和技巧,掌握这些技巧以后可以极大地提高文本编辑的效率 注意此节中用到的快捷键是Mac下的,如果你用的系统是Win或者Linux,可能会有一点不同. 光标移动 在编辑文本的过程中移动光标是一种频率很高的操作.我们不应只满足于通过鼠标或键盘的方向键的这种效率很低的操作方式来移动光标,让我们来看看还有哪些能极大提高编辑效率的方法吧 光标上下移动 光标移动到上一行: Ctrl+P 或 Up 光标移动到下一行: Ctrl+N 或

Atom编辑器入门到精通(六) Markdown支持

尽管我们使用Atom主要是为了编写代码,不过Atom还支持编辑很多其他格式的文件. 比如Markdown和Asciidoc. 这一章中我们主要学习如何快速方便地编辑Markdown文件.另外在写这篇博文的时候我又换回Linux了, 因此以后文章里提到的快捷键和操作方式都将以Linux为标准. 拼写检查 当我们编辑文本时(包括纯文本文档,Markdown,Git提交信息等), Atom会自动尝试做拼写检查.如果某个词拼写错误, Atom会将其高亮.在这个时候你可以使用Ctrl+Shift+;或右键

Atom编辑器入门到精通(二) 插件的安装和管理

在本节中我们会学习如果安装和使用插件插件是Atom中一个非常重要的组成部分,很多功能都是以插件形式存在的.比如上篇文章中提到的目录树和设置等窗口都是通过默认安装的插件来实现的. 查看已安装的插件 打开设置窗口(Cmd+,),再切换到"Packages"标签页,就可以看到已安装的插件列表了我们可以发现Atom默认安装了70多个插件,Atom通过这些插件提供了各种非常有用的特性和功能另外在设置窗口的"Themes"标签页中也能看到所有安装过的主题(主题其实也是一种插件)

Python基本语法[二],python入门到精通[四]

在上一篇博客Python基本语法,python入门到精通[二]已经为大家简单介绍了一下python的基本语法,上一篇博客的基本语法只是一个预览版的,目的是让大家对python的基本语法有个大概的了解.之所以将python的基本语法分为两部分,是因为园子里大部分人都是有编程基础的,所以在学习Python的时候可以先出个预览版的,预览版都是根据Python的语法与其他语言(java/C#/php)比较类似又不完全一样的地方,便于大家对Python有个基本理解.在大家差不多有个了解以后,我们再深入讲讲

mybatis从入门到精通(四) 动态SQL

mybatis从入门到精通(四) 动态SQL 一丶简介 Mybatis的强大特性之一是动态SQL, 它可以动态拼接sql语句, 减轻开发的工作量. Mybatis的动态sql标签如下4种类型 1. if 2. choose (when, otherwise) 3. trim (where, set) 4. foreach 二丶<if/> <if/>标签相当于java语言中的if语句, 通过判断是否符合预置条件来拼接sql语句.其中判断条件可以使用ongl表达式, 如e.method

Python基本语法[二],python入门到精通[四] (转)

写在前面 python你不去认识它,可能没什么,一旦你认识了它,你就会爱上它 回到顶部 v正文开始:Python基本语法 1.定义常量: 之所以上篇博客介绍了定义变量没有一起介绍定义常量,是因为Python的常量相对其他语言,可能略显麻烦.不仅仅只是单靠const就可以完成常量定义的.在Python中定义常量需要用对象的方法来创建. 我们需要在Lib的目录下创建一个const.py的文件,lib目录下主要是放一些模块的东西 代码正文: class _const(object): class Co

iOS开发-UI 从入门到精通(四)

一.UITextField 1.UITextField是什么? (1)UITextField(输入框):是控制文本输入和显示的控件.在App中UITextField出现频率也比较高: (2)iOS系统借助虚拟键盘实现输入,当点击输入框,系统会自动调出键盘,方便 你进一步操作.在你不需要输入的时候,可以使用收回键盘的方法,收回弹出的键盘: (3)UITextField和UILabel相比,UILabel主要用于文字显示,不能编辑, UITextField允许用户编辑文字(输入). 2.如何使用UI