实用的 atom 插件

sublime text 确实是前端开发的神器，但入坑三四年一直使用，难免会有些视觉疲劳，最近折腾起了atom编辑器，发现这货也是前端开发的利器，没错，就是利器。

俗话说，人靠衣装，佛靠金装，再好的编辑器也不会在软件本身集成各种插件，第三方支持等，于是就需要我们针对自己的日常开发选择一些常用的、实用的插件，最大程度的提高日常开发效率。

Ⅰ：atom 是什么鬼

Atom 是github在2015年开源的一款编辑器，相比较于sublime text，最吸引人的莫过于 Atom 是基于 Chromium Embedded Framework，基本上就是个 web app，源码都是 CoffeeScript 写的，连界面都可以用 CSS 来自定义。

Atom 的扩展也是用 JS 或者 Coffee 在 Node + webkit 的环境下开发，并且可以使用 npm 的包，这对于前端和 Node 开发者是很有诱惑力的，需要的话完全可以把 Atom 打造成一个 IDE。

官网：atom官网，可以在官网下载进行安装，安装过程很简单，这里就不进行赘述了。

Ⅱ：好用的 atom 插件

点击菜单里面的 Preferences（抑或使用快捷键 cmd + ,），点击 install 选项，输入要安装的插件，点击安装即可。
通过 Preferences-install 来安装插件经常会遇到问题，好在atom做的很人性化，我们可以通过终端来进行插件安装，命令为 apm，是不是有点眼熟，这个基于atom 的一个包管理器，他过这个命令可以愉快的他过终端来安装你想要的插件啦，是不是很方便

apm 安装的方法如下：

# 安装指定包
$ apm install <package_name>
# 安装指定版本的包
$ apm install <package_name>@<package_version>
# 查找包 $ apm search <package_name> # 查看包更多详情 $ apm view <packge_name> # 查看当前已安装包(包含atom里面自带的一些包和你自己安装的包) $ apm list

apm list 里面我安装的如下：

/Users/liucui/.atom/packages
├── activate-power-mode@0.5.2
├── atom-beautify@0.29.7
├── autocomplete-paths@1.0.2
├── color-picker@2.1.1
├── docblockr@0.7.3 ├── emmet@2.4.3 ├── file-icons@1.7.11 ├── git-plus@5.13.4 ├── javascript-snippets@1.2.1 ├── linter@1.11.4 ├── linter-jshint@2.1.0 ├── markdown-scroll-sync@2.1.2 ├── markdown-table-formatter@2.8.3 ├── minimap@4.23.5 ├── minimap-find-and-replace@4.5.1 ├── terminal-panel@1.14.1 └── vim-mode@0.65.1

那么到底有哪些好用的、必备的插件呢，下面就来给大家推荐几个所常用的。

1、emmet

前端开发都懂得的，html 代码补全，使用方法还有文档可以查阅emmet使用文档。

下载链接：emmet

2、file-icons

不同格式的文本现实不同颜色和类型的图标，便于分辨。

file_icons_bg

下载链接：file-icons

另外：siti-ui 主题也可以以不同的颜色和类型图标展示不同类型文件，大家可以下载试试。

3、color-picker

顾名思义，颜色采集器，非常清晰好用。快捷键 cmd+shift+code 启动。

color-picker

下载链接：color-picker

4、atom-beautify

美化格式插件，规范缩进，删除多余空行等等。快捷键 ctrl+option+b 启动使用。

下载链接：atom-beautify

5、markdown-scroll-sync

atom 自带markdown 预览功能，快捷键 ctrl+shift+m会打开两个面板的视图，但文档太长的时候，不会跟着同步滚动，这个插件就是做这个用的，滚动文档的时候预览内容同步滚动。

markdown-scroll-sync

下载链接：markdown-scroll-sync

6、minimap

编辑器右侧小面板，快捷展示当前编辑的内容在整个文档中的位置。

minimap

下载链接：minimap

7、docblocker

便捷的添加注释代码，/** 按tab键即添加注释代码快。

docblocker

下载链接：docblocker

8、terminal-panel

快速调取使用终端面板，快捷键『ctrl+`』启动，底部工具条的 + 也可以点击展示终端面板。

terminal-panel

下载链接：terminal-panel

9、javascript-snippets

js/nodejs 方法快捷输入，不过有些方法的简写需要去文档里面熟悉一下，多用几次你会发现真的可以提高效率。

javascript-snippets

下载链接：javascript-snippets

10、autocomplete-paths

代码提示补全插件，

autocomplete-paths

下载地址：autocomplete-paths

11、linter

代码风格检查工具

linter

单单装了linter 还不行，我们要针对自己使用的语言不同去安装不同的语言支持，例如，我装了js的检查工具：linter-jshint，大家可以根据需要自行安装，语言风格审查列表

下载链接：linter

12、vim-mode

atom 的vim 模式，安装后按ESC键即启用vim 模式，在另一篇文章编辑器的vim模式使用中，有详细的介绍，让你的 Atom 用起来超乎你的想象。

13、activate-power-mode

这个插件纯粹是用来炫技的，只适合拿来玩玩，长时间使用，我相信你的视力一定会下降的，不要怪我没提醒你哦。

activate-power-mode

下载链接：activate-power-mode

Ⅲ：另附--常用快捷键

快捷键	说明
shift + cmd + p	命令版(可以看到所有快捷键)
alt + shift + s	查看文件相关语言的代码块(snippet)
cmd + f	搜索当前文件
cmd+shift+f	搜索整个项目
alt + cmd + [	代码折叠, 我不喜欢用
alt + cmd + ]	代码展开
cmd + /	快速注释当前行
cmd + [	代码左缩进
cmd + ]	代码右缩进
cmd + b	快速跳转打开的文件
alt+B或alt+left	光标按单词左移
alt+F或alt+right	光标按单词右移
cmd+right或ctrl+e	光标移动到行最右最后一个非空字符
cmd+left或ctrl+a	光标移动到行最左第一个非空字符
cmd + up	光标移动到文件头
cmd + down	贯标移动到文件尾
ctrl + g	行跳转, 语法为行号:列号
cmd + r	按当前文件方法跳转
cmd + t	全项目模糊查找关键字并跳转
ctrl + m	按照括号匹配跳转
cmd + F2或cmd+fn+f2	给某一行设置书签显示在行号右侧

Ⅳ：后记

我们常常会被一些惯用的东西束缚住，作为一个开发者，要时刻提醒自己对新鲜事物充满好奇，把眼界放宽，多看看外面的世界，走出去，你会发现，世界会是另一个样子。

Atom插件安装及常用插件推荐

Atom是个不错的文本编辑工具，也该可以改造成IDE用，主要靠插件实现各种扩展功能。因为网络环境的原因，在线安装不容易成功，一般选择手动安装。以下是我搜索网络资源后总结的手动安装方法。

Atom插件安装

安装前的准备

你需要安装nodejs环境，其实主要是npm，包管理工具，并修改镜像为国内源

下载并安装nodejs

下载并安装nodejs，包括npm，以及Add to PATH。如图：

修改镜像

在用户目录下新建文件.npmrc
win用户的用户目录是C:\Users\{username}
win用户创建没有名称的文件方法是cd >.npmrc
编辑文件.npmrc添加内容
registry = https://registry.npm.taobao.org

安装插件

找到你想要安装的插件的github地址，以下以git-plus为例子。如图：
点击会打开网页：https://atom.io/packages/git-plus
点击Repo打开插件的代码在github上的托管地址
选择release版本，并下载某一版本的安装包。如图：
解压到~/.atom下，比如我的路径是：C:\Users\{username}\.atom\packages，解压后是：C:\Users\Administrator\.atom\packages\git-plus-5.25.1
打开命令行，并切换到这个插件的目录下，执行命令npm install即可。如图：
重启Atom可以看到已经安装成功。如图：

Atom插件推荐

以下是我经常用的插件，安装方法同上，详细用法请查看各个插件的文档README.md

git

git-plus
git-log

python

autocomplete-python

run

atom-script
atom-runner

format

atom-beautify

一些好用且有趣的atom插件

2016-12-19 bubbi7

atom-plugins

some awesome atom-plugins !

demo

...

1. emmet

html补全

2. active-power-mode

文字泡沫

3. power-mode

随地泡沫

4. atom-miku

跳舞的姑娘

5. autocomplete-plus

当输入的时候，提供可能的候选项。

5. atomic-chrome

chrome里面的编辑框直接在atom编辑

6. minimap

源码预览图，提供丰富的自定义选项

7. file-icons || file-icon-supplement

显示文件类型对应的图标。

8. atom-beautify

格式化代码，更统一的代码风格。

9. Color Picker

在编辑器里面挑选颜色。

10. Editor-setting

给每个语言独立设置扩展和功能

11. atom-terminal-panel

atom内置命令行工具

12. Git

git-control git面板
git-controlhub git面板
open-gitub  在atom打开gitub

13. language-JavaScript-jsx

jsx扩展

14. markdown-preview-plus

markdown预览

15. tool-bar

toolbar-iconshortcuts
tool-bar-atom
tool-bar-shortcut //功能丰富
tool-bar-shortcuts //可以自选选项
左侧工具栏

16. atom-html-preview

预览lhtml页面

17. vim-mode

atom添加vin模式

18. pigment

颜色代码着色显示（代码指定的颜色）

19. autocomplete-modules

模块名自动补全

19. php-server

给某个文件夹php服务器启动

20. live-server

自动刷新的服务器

21. React

atom-react-preview  react预览
react 语法支持
atom-react-native-autocomplete RN代码补全

22. tree-view-git-status

文件夹git状态

23. tree-view-background

文件栏背景图

24. glowing-cursor

打字时候光标颜色

25. filecolor

文件名颜色

26. windows-context-menu

给windows添加打开快捷方式

27. open-in-browser

默认程序打开代码

28. sound

keyboard-sound
typewriter-sound
敲代码声音

29. video-player

背景播放视频

30. all-times-you-know

atom全局背景

31. hacker-news-background-titles

黑客新闻标题和打开链接（无文件打开状态下在背景）

32. editor-background

背景图片和视频

33. server-script

同步/运行脚本到服务器

34. custom-title

给atom设置个性化标题

35. status-bar

line-count-status
move-status-items
status-bar-clock
battery-status
git-status
ctags-status //类，函数，作用域

36. menu-manager

顶部菜单管理

37. php-class-tree

php类和方法树状图

38. Nuclide

Facebook的IDE

39. Script

在编辑器里运行代码

40. remote-edit

编辑服务器上的文件

41. remote-sync

同步服务器上的文件

42. remote-ftp

服务器文件的树状结构显示

43. browser-plus

浏览器

44. preview-plus

浏览一切

45. open-in-browser

在浏览器打开

46. language-babel

jsx语法

47. games

atom-2048
snake
tetromino

48. markdown-preview && markdown-scroll-synic

将markdown-preview编辑区和预览区同步滚动

49. markdown-writer

方便管理markdown里的图片和链接

50. markdown-table-format

格式化markdown的表格

51. atom-hexo

atom编辑器里执行hexo命令写博客

52. github-issure

github-issure帮助工具

53. github

github-user-dataip  显示文档里github账号的详细信息
create-github-repo  创建github repository
my-github-profile  显示自己github信息在状态栏
github-notification 通知github消息
gist-it 快速分享代码到gist.github.com(可惜天朝用不了gist)

54. sourcerer

根据遇到的问题查找stackoverflow代码片段

55. ask-stack

在atom快速提问stackoverflow

56. debug

node-debugger
php-debug
python-debugger
swift-debugger
go-debug
...

57. file-header || header-42

给当前编辑文件添加用户时间等头部信息

58 atom-minify || uglify

js 代码混淆

59. atom-bautifiy

美化一切代码

60. atom-music

本地音乐播放器

61. musicBox

atomn内嵌listenvideo.com

62. youtube-pane || playyoutube

atom内嵌youtube

63. themed-settings

美化设置面板

64. markdown-themeable-pdf

markdown转换成pdf,html,png

65. jupyter-notebook || note-book

atom内嵌notebook

66. markdown-scroll-sync

当markdown-preview时编辑框和预览框同步

67. autocomplete-python

python代码自动补全

68. javascript-snippets

输入特殊的字符后自动扩展成对应的 Javascript 代码片段

69. go-to-line

跳转到指定的行，只要 ctrl + g 后输入行号即可

70. atom-ternjs

js,nodejs,es6补全

71. regex-railroad-diagram

正则表达式图形化显示

72. atom-shell-commands

自定义shell命令

73. advanced-open-file

通过 Cmd-Alt-O/Ctrl-Alt-O 快速的打开文件或新建文件，同时支持路径补全

74. seti-ui

带文件图标的黑色主题

75. php-cx-fixer

运行php

76. git-log

图形化git提交记录

77. pretty-json

格式化json数据

78. drag-drop-text

用鼠标复制剪切粘贴文本

79. to-base64 | base64

文件转base64

80. draw-on-image

截屏和编辑图片

81. command-toolbar

个性化atom的各个按钮命令

82. Encourage

atom来鼓励你写代码

83. platformio-ide-terminal

又是一个很棒的terminal

84. platformio-ide-terminal

自动隐藏树状文件面板

85. slack-chat

slack的atom内置客户端

86. atomic-game-engine

游戏引擎

87. canvas-snippets

html5的canvas代码片段

88. draw-package

文件里画图形

89. open-in-browsers

在安装过的任意浏览器打开代码

90. lunar-particle-ui | seti-ui

最漂亮的两个主题

91. atom-monokai | monokai

最漂亮的两个语法主题

demo demo

查看原文：http://dyartstyle.com/?p=2167

分享几个实用的ATOM插件，虽然ATOM打开大文件是硬伤，不过有这些插件用起来真的是很顺手，大爱ATOM

1、atom-beautify Beautify HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and more in Atom 2、atom-clock Display a customizable clock in the status bar. 3、atom-ctags better autocomplete for atom 68747470733a2f2f636c6f75642e67697468756275736572636f6e74656e742e636f6d2f6173736574732f3730343736322f333438333836372f65306261633265652d303339372d313165342d383963312d3730363839663662386666332e676966.gif

4、atom-html-preview A live preview tool for Atom Editor. 5、atom-miku Miku能从你的代码中得到获得充能！ 6、atom-nodejs- snippet A Collection of Nodejs, Js snippet 7、atom-react-native-css Style React-Native components with css and built in support for SASS 687474703a2f2f376f78666b312e636f6d312e7a302e676c622e636c6f7564646e2e636f6d2f61746f6d2d72656163742d6e61746976652d6373732d64656d6f2e676966.gif 8、atom-ternjs JavaScript code intelligence for atom with Tern. Adds support for ES5, ES6 (JavaScript 2015), Node.js, jQuery & Angular. Extendable via plugins. 9、atomic-chrome Edit Chrome text directly from Atom 68747470733a2f2f636c6f75642e67697468756275736572636f6e74656e742e636f6d2f6173736574732f313433363237312f31323636383232372f61666565366135322d633639372d313165352d396231392d6338383061306535343133322e676966.gif 10、autoclose-html Automates closing of HTML Tags 11、autocomplete-ctags Autocomplete-plus provider for ctags 687474703a2f2f692e6779617a6f2e636f6d2f30303763306165663761643461303563316639346565386365366130306434312e676966.gif 12、autocomplete-java Autocomplete-plus provider for Java 68747470733a2f2f7261772e6769746875622e636f6d2f6b65736b696a752f6175746f636f6d706c6574652d6a6176612f6d61737465722f73637265656e73686f742e676966.gif 13、autocomplete-js-import Autocompletes commonjs and es6 import statements js imp.gif 14、autocomplete-json Atom autocomplete+ plugin for semantic JSON completions 15、autocomplete-modules Autocomplete for require/import statements 16、autocomplete-paths Adds path autocompletion to autocomplete+ 17、autocomplete-php Autocomplete-php is a PHP provider for autocomplete+ 18、autocomplete-python Python completions for packages, variables, methods, functions, with their arguments. Powered by your choice of Jedi or Kite. 19、autocomplete-xml Autocomplete+ provider for XML via XSD 20、color-picker Right click or press CMD-SHIFT-C/CTRL-ALT-C to open it. 21、custom-title Set your own template for Atom’s title bar. 22、docblockr A helper package for writing documentation 23、editorconfig Helps developers maintain consistent coding styles between different editors 24、emmet Emmet – the essential tool for web developers 25、file-icons Assign file extension icons and colours for improved visual grepping 26、filecolor Add color to filename 27、git-plus Do git things without the terminal 28、git-time-machine Visually interact with git commit history for a file 29、glowing-cursor A glowing cursor based on muchWeb’s neon cursor 30、highlight-selected Highlights the current word selected when double clicking 31、hyperclick Pluggable text-clicking UI for Atom 32、javascript-snippets JavaScript & NodeJS Snippets for Atom 33、jquery-snippets jQuery Snippets for Atom 34、js-hyperclick A hyperclick provider that lets you jump to where variables are defined. 35、jumpy An Atom package that creates dynamic hotkeys to jump around files across visible panes. 36、language-babel JavaScript ES201x, React JSX, Flow and GraphQL Grammar. Babel Transpiler 37、language-ejs EJS support for Atom. 38、language-javascript-jsx JavaScript, ES6, ES7, React JSX, Flow, etc… by SubtleGradient of Facebook 39、language-svg Atom language support for SVG 40、linter A Base Linter with Cow Powers 41、linter-csslint Lint CSS on the fly, using csslint 42、linter-eslint Lint JavaScript on the fly, using ESLint 43、minimap A preview of the full source code. 44、minimap-highlight-selected A minimap binding for the highlight-selected package 45、node-debugger Debugger For Nodejs 46、node-requirer Node-requirer lets you quickly add require/import statements to any files/node modules within your code! 47、nodejs-snippets atom nodejs snippets 48、pigments A package to display colors in project and files. 49、platformio-ide-terminal A terminal package for Atom, complete with themes, API and more for PlatformIO IDE. Fork of terminal-plus. 50、preview Ultimate previewer of source code in Atom. 51、preview-plus Preview Plus # Preview Any thing 52、project-manager Project Manager for easy access and switching between projects in Atom. 53、qolor An atom package to color your SQL queries! 54、react React.js (JSX) language support, indentation, snippets, auto completion, reformatting 55、react-es6-snippets React ES6 snippets for atom 56、react-snippets Atom Snippets for React, React Router and Flux 57、regex-railroad-diagram Display railroad diagram of regex under cursor. 58、rest-client A simple REST client for your favorite editor 59、run-in-browser Opens current html document in the default browser 60、svg-preview Live SVG preview 61、svn Marks lines/files in the editor gutter/treeview that have been added, edited, or deleted since the last commit. 62、sync-settings Synchronize package settings, keymap and installed packages 63、tree-view-background Displays an image in the background of the Tree view. 64、tree-view-git-status Show the Git repository status in the Atom tree-view

这就是本人常用的一些插件希望大家能够喜欢 ^^

常用Atom插件列表（持续更新...）

作者妞妞骑毛驴关注

2016.08.18 14:51* 字数 799 阅读 34248评论 12喜欢 60

1、simplified-chinese-menu
2、tree-view-finder
3、minimap
4、linter和linter-jshint
5、linter-js-standard
6、git-plus
7、file-types和file-types-icon
8、emmet
9、autoclose-html
10、atom-ternjs
11、atom-html-preview
12、atom-bootstrap3
13、Remote-FTP
14、autocomplete-paths
15、atom-beautify
16、jquery-snippets
17、autoprefixer
18、color-picker
19、activate-power-mode

1、simplified-chinese-menu

Atom的简体中文语言包，完整汉化，兼容所有已发布的版本Atom。

2、tree-view-finder

左边菜单栏显示方式，类似Mac OS下的finder。

01.tree-view-finder

3、minimap

类似sublim text右边的代码缩略图。

4、linter和linter-jshint

该插件是用jshint来检查代码，想必大家都听说过jshint代码检查工具，它有一个配置文件.jshintrc，这个文件告诉jshint执行的检查规则。通过jshint能发现代码中存在的问题，可以及时避免bug的发生。linter-jshint插件基于atom规则来使用jshint，该插件可以在项目根目录下新建一个.jshintrc来告诉检查规则，也可以不用创建此文件来进行代码检查。
注意：linter-jshint是依赖linter插件来使用的，也就是说必须先安装linter插件；因为linter是一个粗糙的检查，有很多针对专门项的代码检查，如linter-csslint、linter-php等等

02.linter和linter-jshint

5、linter-js-standard

用来使javascript代码格式化。

6、git-plus

提供git版本控制操作的命令，个人感觉不是很好用，还是terminal比较习惯。

7、file-types和file-types-icon

file-types用来区分文件类型的，file-types-icon用来给不同的问题类型添加不同的图标。

03.file-types和file-types-icon

8、emmet

这款插件是用来支持zend-coding，Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度

9、autoclose-html

html标签自动比较。

10、atom-ternjs

该插件能对一个对象中拥有的对外提供的属性和方法都能通过suggest的形式提示出来，能对一个对象对外提供的接口有一个选择过程，可以理解为js代码自动提示。

11、atom-html-preview

html页面预览。

12、atom-bootstrap3

bootstrap3代码提示插件。

13、Remote-FTP

ftp管理工具，命令和图形化界面都支持。

13.Remote-FTP

PS：具体使用方式，参考官方说明或留言。

14、autocomplete-paths

文件路径自动提示。

14、autocomplete-paths

15、atom-beautify

代码格式化。

15、atom-beautify

16、jquery-snippets

jquery代码提示，安装完之后要重新启动Atom。

17、autoprefixer

浏览器兼容。

17、autoprefixer