├── README.md └── img ├── esformatter-settings.png ├── keybindings.png ├── tabs-settings.png └── tree-view-settings.png /README.md: -------------------------------------------------------------------------------- 1 | # Atom使用纪要 2 | 3 | #### 官网地址： [atom.io](https://atom.io) 4 | 5 | > 目前(2016/12/10) Atom主题已有 1790个；Package已有 5393。 6 | 7 | ## 目录 8 | - [简单交代背景](#101) 9 | - [常用快捷键](#201) 10 | - [推荐Packages](#301) 11 | - [需慎重使用的Packages](#302) 12 | - [推荐Themes](#401) 13 | - [聊聊Settings](#501) 14 | - [高级篇 - 写个Atom Package](#601) 15 | - [小结](#701) 16 | - [FAQ](#801) 17 | 18 |

简单交代背景

19 | 20 | ___Atom___ 是 Github 专门为程序员推出的一个跨平台文本编辑器。PS：基于强大的开源项目 [Electron](http://electron.atom.io/)。 21 | 22 | 2015/6/25 Atom发布1.0版本，所以趁着工作之余再次好好体验了一把Atom，确实眼前一亮，所以把使用纪要贴出来，方便后来者快速上手。 23 | 24 | 至今（2016年7月），我和我所在的团队都在使用Atom撸码，一切都很美好，但是如果哪天我们因为XXX忍不鸟Atom了，我也会及时告知大家的。 25 | 26 | > ___PS：劳资是mac，所以windows用户请原谅，照顾不周哈:)___ 27 | 28 | [如何评价 Github 发布的文本编辑器 Atom？](http://www.zhihu.com/question/22867204) 知乎这篇文章能让你更好的了解Atom 29 | 30 | [为什么选择Atom](http://atom-china.org/t/atom/59) 来看看官方怎么说吧. 31 | 32 | Atom的简单入门就不科普了，想了解来看看这篇文章吧：[Atom基础使用](http://atom-china.org/t/guan-fang-shou-ce-atom-ji-chu-shi-yong/62) 33 | 34 | 35 |

常用快捷键

36 | 37 | > Sublime常用的功能Atom应该都有，比如俺最喜欢的多光标选中和多处选取; 38 | 39 | > 和Sublime一样的快捷键俺这里就不再多浪费时间列举了哈； 40 | 41 | > 在tree-view的Keybindings里面有非常详细的说明，都是针对Tree操作的 42 | 43 | - ```cmd-\``` 显示或隐藏目录树 44 | - ```ctrl-0``` 焦点移到目录树 45 | - ```fn-F2```(选择tree后) 修改文件/文件夹名称 46 | - ```ctrl-shift-M``` Markdown预览，这非常方便俺这种写手 47 | - ```ctrl-alt-b``` 安装[atom-beautify](https://atom.io/packages/atom-beautify)后可使用，格式化代码 48 | - ```ctrl-` ``` 安装[terminal-panel](https://atom.io/packages/terminal-panel)后可使用，调起CLI 49 | - ```ctrl-shift-U``` 调出切换编码选项 50 | - ```cmd-t```或```cmd-p``` 查找文件 51 | - ```alt-cmd-[``` 折叠 52 | - ```alt-cmd-]``` 展开 53 | - ```alt-cmd-shift-{``` 折叠全部 54 | - ```alt-cmd-shift-}``` 展开全部 55 | - ```ctrl-m``` 相应括号之间，html tag之间等跳转 56 | - ```alt-shift-S``` 查看当前可用代码片段 57 | 58 | 更多快捷键去Settings里面查看，如下图 59 | ![](https://raw.githubusercontent.com/nieweidong/learn-atom/master/img/keybindings.png) 60 | 61 | 62 |

推荐Packages

63 | 64 | > 很多时候，安装后不能及时就生效，需要重启Atom，这块比较讨厌，略搓:( 65 | 66 | - [activate-power-mode](https://atom.io/packages/activate-power-mode) 装逼必备，效果相当赞。PS：最新的版本(0.5.2)有升级性能，卡顿效果小很多了 67 | - [linter](https://atom.io/packages/linter)+[linter-eslint](https://atom.io/packages/linter-eslint) 必备；代码校验工具 68 | - [autocomplete-paths](https://atom.io/packages/autocomplete-paths) 填写路径的时候有Sug提示 69 | - [pigments](https://atom.io/packages/pigments) 让颜色相关的字符，在任何文件下都可以展示对应的高亮，强烈推荐 70 | - [color-picker](https://atom.io/packages/color-picker) 推荐；写CSS时非常方便的调色板 71 | - [docblockr](https://atom.io/packages/docblockr) 注释也优雅，一款用于写注释的插件。支持常见的各种语言 72 | - [emmet](https://atom.io/packages/emmet) 必备；前端开发必备，谁用谁知道，入门地址：[Emmet使用手册](http://www.w3cplus.com/tools/emmet-cheat-sheet.html) 73 | - [file-icons](https://atom.io/packages/file-icons) 推荐：让文件前面有彩色图片，看着非常享受 74 | - [csscomb](https://atom.io/packages/atom-csscomb) 推荐前端使用。可以把CSS按照一定的顺序重排，看起来会更友好。 75 | - [git-plus](https://atom.io/packages/git-plus) Git插件；得先配置邮箱和用户名 76 | - [git-time-machine](https://atom.io/packages/git-time-machine) Git党必备；可以查看当前编辑文件的 ci history，diff 版本间改动；快捷键 ```alt-t``` 77 | - [javascript-snippets](https://atom.io/packages/javascript-snippets) 推荐；各种缩写，值得拥有；当然，俺用的最多的是cl命令:) 78 | - [atom-beautify](https://atom.io/packages/atom-beautify) 必备；格式化代码的，快捷键```ctrl-alt-b``` 79 | - [esformatter](https://atom.io/packages/esformatter) 统一代码格式用的 80 | - [Minimap](https://atom.io/packages/minimap) 推荐；就是Sublime右边那一竖块，显示缩小版的代码 81 | - [Expose](https://atom.io/packages/expose) 俺的开发习惯：开很多窗口；分多屏。那么问题来了：不能很好的切换对应的 ```tab```，这个插件就是解决 ```Tabs``` 切换的问题，依赖[Minimap](https://atom.io/packages/minimap)和[file-icons](https://atom.io/packages/file-icons)。PS：偶在使用中也遇见过小问题，但 [Issues](https://github.com/mrodalgaard/atom-expose/issues?q=is%3Aissue+is%3Aclosed) 里都解决了，有问题去上面找答案吧:) 82 | - [terminal-panel](https://atom.io/packages/terminal-panel) 不是那么好用的CLI，勉强能凑活 83 | - [vim-mode](https://atom.io/packages/vim-mode) 劳资就是喜欢zuo，所以在Atom上用vim写码:) 84 | 85 |

需慎重使用的Packages

86 | 87 | - [esformatter](https://atom.io/packages/esformatter) 统一代码格式用的。但是，偶尔脑残，经常报些奇葩的错误，不知道最新版有木有改善，但是我们有了更好的格式化代码的办法，使用 [linter](https://atom.io/packages/linter) + [linter-eslint](https://atom.io/packages/linter-eslint) 88 | - [atom-beautify](https://atom.io/packages/atom-beautify) 说说我遇到的情况，如果设置了保存时格式化，当文件比较大的时候，会有很明显的卡顿，所以我这已经不使用这个插件了 89 | - [activate-power-mode](https://atom.io/packages/activate-power-mode) 装逼效果不用多说，但是无论如何优化，基于Browser搞动画所依赖的方面太多了，所以偶尔脑残和卡顿你得习惯:) 90 | 91 | 92 |

推荐Themes

93 | 94 | > 其实Atom默认的主题就已经非常小清新、文艺范儿，但前端对美好事务的追求是永不停歇的... 95 | 96 | > 提醒一点：Atom的主题是区分 __UI主题和语法主题__ 97 | 98 | - [seti-syntax](https://atom.io/themes/seti-syntax) 每个文件前的icons是最大亮点 99 | - [atom-material-ui](https://atom.io/themes/atom-material-ui) + [atom-material-syntax](https://atom.io/themes/atom-material-syntax) 颜色正 100 | - [monokai](https://atom.io/themes/monokai) 偶尔想用回Sublime的时候可以用:) 101 | - [Dracula](https://draculatheme.com/atom/) 这个主题不光有 ```Atom```版本的，还有 ```Sublime, Vim, iTerm, Zsh```等等编辑器都存在 102 | - [Lucario](https://github.com/raphamorim/lucario) 暗色系主题，支持 Vim, Atom, Sublime Text, TextMate, Terminal.app, iTerm, Xcode and XTerm 103 | 104 | 105 |

聊聊Settings

106 | 107 | > 在这儿聊些很有用的设置 108 | 109 | ![](https://raw.githubusercontent.com/nieweidong/learn-atom/master/img/tree-view-settings.png) 110 | 上图红框中的选项 可以隐藏一些需要忽略的文件 111 | 112 | ![](https://raw.githubusercontent.com/nieweidong/learn-atom/master/img/tabs-settings.png) 113 | 上图红框中的选项 可以实现Sublime选择文件的效果。不勾选时，点击一个文件就是打开文件；勾选后，双击文件才是打开文件 114 | 115 | ![](https://raw.githubusercontent.com/nieweidong/learn-atom/master/img/esformatter-settings.png) 116 | 上图红框中的选项 会再保存时让代码格式化，比如去掉不需要的空格、换行之类 117 | 118 |

高级篇 - 写个Atom Package

119 | > 原本想写个简单的Package当demo尝试下，但翻看文档发现已写的够清晰，俺也就不浪费时间费这个劲了。 120 | 121 | #### 文档地址：[Package: Word Count](https://atom.io/docs/v1.0.3/hacking-atom-package-word-count) 122 | 123 | 124 |

小结

125 | 126 | - Sublime用久了也有视觉疲劳，所以偶尔尝试下新编辑器也挺好，毕竟Atom号称“21世纪的编辑器” 127 | - 免费(听说是暂时的)，所以没有Sublime那恶心的弹窗，你懂的 128 | - 扩展能力叼爆，这就是webapp，界面啥都用CSS控制；扩展可以用JS开发，完全可以深度定制打造自己的IDE嘛... 129 | - 邀请测试的那版确实比较慢，启动慢、打开文件慢等等，但是目前确实没有这种感觉，一切都很流畅(非正常情况俺也没试) 130 | - Github发布的编辑器，那么对Git的友好支持不用多说了 131 | - 同样其问题也有不少，比如用着用着Tree的颜色就变了，然后重新启动就好使了；比如安装个新包还需要重启编辑器等等...这都是比较糟糕的体验，在这里期望Atom能越做越好吧... 132 | - Atom有中文社区：[AtomChina](http://atom-china.org/) 133 | - 双手附上官网文档地址，请多关注：[Atom Documentation](https://atom.io/docs/v1.0.3/getting-started-why-atom) 134 | 135 | 136 |

FAQ

137 | 138 | - 觉得卡？建议升级最新的 ```Atom```。如果还没有好转，建议查询下主题和包是否过旧或者有影响。如果各种尝试之后还是无解，那么还是用回 ```Sublime``` 吧... 139 | - [markdown-preview](https://atom.io/packages/markdown-preview) 的快捷键为 ```ctrl-shift-m```，如果不好使那么需要配置一下 ```keymap.cson```，配好之后快捷键就可以正常使用啦，详情: [Keyboard Shortcut overriding](https://discuss.atom.io/t/keyboard-shortcut-overriding-emmet-and-markdown-preview/14113/8) 140 | - 某些插件安装了为什么没有及时生效？答：重启大法 141 | - 写 ```.md``` 文件的时候会莫名的卡，文件其实没有多大，原因未知 142 | 143 | 144 | --- 145 | 146 | 如发现有趣的内容也会陆续更新补上，更欢迎伙伴们pull request，git地址：[learn-atom](https://github.com/nieweidong/learn-atom) 147 | -------------------------------------------------------------------------------- /img/esformatter-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieweidong/learn-atom/879bead7f9cd28d0d9c261e8cf71ef6902802c19/img/esformatter-settings.png -------------------------------------------------------------------------------- /img/keybindings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieweidong/learn-atom/879bead7f9cd28d0d9c261e8cf71ef6902802c19/img/keybindings.png -------------------------------------------------------------------------------- /img/tabs-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieweidong/learn-atom/879bead7f9cd28d0d9c261e8cf71ef6902802c19/img/tabs-settings.png -------------------------------------------------------------------------------- /img/tree-view-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieweidong/learn-atom/879bead7f9cd28d0d9c261e8cf71ef6902802c19/img/tree-view-settings.png --------------------------------------------------------------------------------