而在编辑器中，我喜欢使用终端，那么有一个还不错的插件

使用效果：

若是编写一个小的C ／ C++ 程序来进行学习练习等，这样的组合我觉得已经足够了，不必开IDE了。

前WebStorm用户，说几个我自己感觉最有用的插件：

atom-ternjs

这是Tern项目的Atom插件，提供了了比较精确的代码补全功能，不止是匹配输入过的关键字，还可以提示ECMAScript、DOM/BOM、NodeJS的方法和属性，也能自动分析依赖的模块，给出补全提示，这样Atom用起来就有点IDE的感觉了。

atom-ternjs还有一些其他功能，比如Find-definition，不过这个功能有更好的插件hyperclick。

hyperclick

hyperclick是facebook给nuclide写的插件，可以跳转到变量定义的地方，也能识别import/require，点击模块名可以跳转到模块的内部。

需要配合js-hyperclick插件。

有了hyperclick之后，Atom就更像IDE了。

linter 和 linter-eslint

linter-eslint依赖linter，安装之后就可以按照.eslintrc文件里面配置校验JS了。

highlight-selected

高亮所有和当前选中单词一样的单词，IDE标配。

quick-highlight

和上面的功能类似，不同之处是可以同时高亮多处非选中的单词，在读代码时挺有用。

和vim下的一款mark插件完全一致，作者以前肯定是vim用户，不信看下面

vim-mode-plus

和上面的插件是同一个作者，比vim-mode更好用，非常完美。

elastic-tabstops

hax大神维护的Elastic tabstops插件，五星好评。

autocomplete-paths

路径补全插件，IDE标配

smalls

类似VIM下面的easymotion，最快的移动光标的方式。

用户自定义 Shell 命令，类似 NotePad++ 中的 "Run Commands”，EditPlus/UltraEdit里面的"User Tool"，以及 GEdit 中的 "External Tool" 和 TextMate 里的 “Shell Command”。

1. 用户可以自定义工具，并且配置到 Atom 中，比如一键调用编译器，一键运行，
2. 输出结果会显示再底部的 bottom panel 中
3. 点击错误输出可以跳转到对应有错误的文件上去
4. 自定义正则表达式匹配错误输出中包含的文件名和行号。
5. 全平台支持，再 Mac/Ubuntu/Windows 下充分的测试过。

初始化

再你的用户配置中（Atom File->Open Your Config或者 ~/.atom/config.cson），写入类似：

  "atom-shell-commands":

    commands: [

      {

        name: "compile"

        command: "d:/dev/mingw/bin/gcc"

        arguments: [

          "{FileName}"

          "-o"

          "{FileNameNoExt}.exe"

        ]

        options:

          cwd: "{FileDir}"

          keymap: 'ctrl-2'

      }

    ]

的配置，就会创建一条名为 "atom-shell-commands:compile" 的命令，你可以通过 command palette来运行它或者使用快捷键 ctrl-2来直接运行。同时再 Atom 的 packages 目录下面的"Atom Shell Commands" 目录项下面也会多出一个名为“compile” 的命令。

每条命令可以通过如下字段来表示：

name: 名字（必填）

command: 可执行路径（必填）

arguments: 参数（选填）

options: 扩展参数用来配置当前工作路径，文件是否保存，快捷键，环境变量等 （选填）

所有配置支持如下宏：

{FileName} 当前正在编辑的文件名（不包括路径）

{FilePath} 包含全路径的文件名

{FileNameNoExt} 没有路径和扩展名的文件名

{FileExt} 文件扩展名

{FileDir} 文件路径

{ProjectDir} 工程路径（如果有工程的话）

{ProjectRel} 文件相对于工程的路径（如果有工程的话）

{CurRow} 当前行

{CurCol} 当前列

{CurLineText} 当前行的文本

{CurSelected} 当前选中文本

有了这些宏，你几乎可以做任何事情，比如到工程目录下调用make或者cmake，或者仅仅编译单个文件不必理会负责的工程，或者调用 ant去跑 build.xml，或者调用 java来运行编译出来的.class，调用python来运行当前脚本，或者当前目录下执行下 grep 关键字并且把grep的结果显示再下面的 bottom panel，打开帮助文档跳转到你选中的API上，或者对当前文件调用 svn diff，把结果输出到 bottom panel。

比如：调用 gcc / cl 一键调用编译功能

比如：一键运行

比如：一键运行（打开独立窗口运行）

具体见项目主页：
atom-shell-commands

更多如何更好使用 Atom的内容见：
如何评价 GitHub 发布的文本编辑器 Atom？ - 韦易笑的回答
--

——少数正确实现了 Elastic tabstops 的编辑器插件。

BTW，在本周日（2016年3月27日）的TopGeek前端开发者大会2016上，我会分享《程序员的圣战之TAB vs SPACE》并顺带介绍 Elastic tabstops。演讲 slide：http://johnhax.net/2016/tab-vs-space/

原文在我博客里面（博客里支持 md 渲染，看我博客也要记得点赞，收藏也要点赞）我是写了一个系列的 atom tips http://simplyy.space/tag/56ecd7303aae9e5a65c46d63

其中包括

• 介绍（http://simplyy.space/article/56ecd7303aae9e5a65c46d64）
• 常用操作（http://simplyy.space/article/56ecd89a39a1954f69680f1e）
• web 开发常用插件（http://simplyy.space/article/56ecd89a39a1954f69680f1f）

我这里把 web 开发常用插件 贴到这里，

# atom tips(2):web 开发常用插件
## 使用 package 的步骤
0. search it in setting pane install option
1. read readme（important，虽然大部分插件看名字就知道用途，但 readme 会写更详细的用途，一样的东西，不同人用的效果可以非常不同）
2. think whether you need it, if yes install it
3. set its setting （if it has setting，think how you want use it，非常重要，这步就是根据你的需求定制你的插件）
4. run it（or test it feature）

## 提示
讲真，atom 的 packages 非常非常的棒，下载、使用、发布都非常简单，无论是用别人的 amazing 的 package，还是自己动手弄一个 useful package，都很方便。

不过，**工具的意义在于使用，而不是在于炫技**，我这里写的是我平常用到的第三方插件，不同的人群当然有不同的需求，我的插件 osx 下都很表现不错，win 下不能保证，我也是不断试错、思考、更新，才得到现在的插件列表，每一个插件我都用过不止10次，有的插件甚至每天都用10次（比如我自己写的那个，逃），所以大家也应该选取对自己自己常用的，自己用得好才是真的好。

而且即便使用成本低，但是也只有用心去用才能用的好，用的优雅。

## packages

### markdown
> atom 现在已经成为我的最佳 markdown 编辑器，有了下面的插件后，使用体验，简直太棒了。

- markdown-preview-plus@2.2.2
- markdown-assistant@0.1.0(Upload images from the clipboard automatically, win10 下失败，osx 完美成功，粘贴图片直接转成 md 文本，不要太棒，优雅的没朋友)
- qiniu-uploader@0.0.3
- markdown-writer@2.3.2(在设置里面设置一下，就拥有了正常 md 编辑器的编辑 md 的各种快捷键 例如 cmd + b, cmd + shift + k 插入链接，而且更棒非常值得一试)
- markdown-toc@0.4.1

### autocomplete
- atom-ternjs@0.13.2(js 最佳补全插件)
- simplyy-snippets@0.4.4(我写的 web 前端代码补全插件，详情见GitHub - SimplyY/simplyy-snippets: atom package for code complete)
- css-snippets@0.9.0
- autocomplete-html-entities@0.1.0
- tag@0.3.0
- autocomplete-modules@1.4.1

### indent
- guess-indent@0.1.0
- resize-indent@0.2.1

### code hint and linter
- linter@1.11.3
- jshint@1.8.3
- jsonlint@1.1.2
- csslint@1.1.4
- htmlhint@1.1.3

### ui
- activate-power-mode@0.4.1(虽然很炫酷，但是我不用)
- file-icons@1.6.18(让你拥有高颜值的文件图标)
- pigments 代码颜色可视化
- foldername-tabs@0.1.11
- highlight-column@0.5.1
- highlight-selected@0.11.2
- indent-guide-improved@1.4.5
- minimap@4.21.0
- fold-comments@0.6.0
- fold-functions@0.4.3

### git project
- merge-conflicts@1.3.7(amazing ，再也不怕 git 的合并冲突了，分分钟解决 conflicts)
- git-projects@1.17.0

### language
- language-SCSS@0.4.0
- language-vue@0.9.0
- react@0.14.1

### other tools
- atom-beautify@0.28.26（格式化代码）
- line-count@0.5.0
- change-case@0.6.0（将代码文本更改风格，比如 testCode => TEST_CODE）
- todo-show@1.4.0
- open-html-in-browser@0.1.0
- pretty-json@0.4.1

### Tree-view
- tree-view-copy-relative-path@1.0.0
- copy-filename@1.0.1
- tree-view-git-status@0.2.3
- chary-tree-view@0.2.3(Tree-view responds to only double-click to avoid opening a large file accidentally.)

### amazing useful
- terminal-plus（不推荐 win 用）

osx 下效果图：

＝＝＝＝＝＝＝＝＝＝＝ 华丽的分割线 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

如果是写 Markdown 的话，我推荐一款我编写的插件，名字叫做 atom-markdown-katex。

https://atom.io/packages/atom-markdown-katex

比编辑器自带的 Markdown Preview 增添了很多功能。

例如：

1，左边的编辑器和右边的预览 滑动是同步的。滑右边预览左边也会动。
2，支持数学表达式
3，可以很好的生成 html 和 pdf
4，还有很多

当然现在可能还存在很多 bug 啦，如果有人用的话我会很高兴 ;)

发现 bug 的话请上 github 给我提 issue。啦啦啦

在刚使用 Atom 的时候会遇到两个痛点：
1、无法单纯使用键盘操作完成「新建文件」
2、迁移电脑时，配置备份

后来遇到这两个插件，很好解决我的问题。

advanced-open-file
通过 Cmd-Alt-O/Ctrl-Alt-O 快速的打开文件或新建文件，同时支持路径补全。
sync-settings
在 Sync Settings 的设置中，配置你个人的 Github access token。然后在 Atom Command Palette 中输入 sync-settings:backup，自动将 Atom 的配置备份在 gist 中。比如我个人的配置：aotmBackup