Atom 文本编辑器

安装插件前准备

一、 先了解下Atom的设置界面：

    打开Atom后使用键盘快捷键“Alt”，可以打开和隐藏菜单栏，不妨试试看，选择File -> Settings，便可以打开设置界面（如图 - 本图已经设置）：

设置界面主要有六个部分：

    1. Settings: 通用设置；
    2. Keybindings: 快捷键设置；
    3. Packages: 插件管理；
    4. Themes: 设置和安装主题；
    5. Updates: 更新插件
    6. Install: 安装插件 或主题

在Settings界面，我们先做一下常用的设置：

    1. Core Settings -> File Encoding: utf-8;
    2. Editor Settings 中：
        Audo Indent 选上;
        Font Family中 Windows默认使用Consolas字体，很适合编程，可以自定义，写上字体名称即可；
        Fonts Size: 设置字体大写；
        Line Height: 设置行高，如1.3；
        Show Indent Guide：缩进下垂线，选上；
        Show Line Number： 行号，选上；
        Soft Wrap: 超出行长度限制后，自动折行；
        Tab Length: 4；

**其他的都保持默认吧！！！**

插件安装

本文推荐使用Atom自带插件管理器进行安装

安装方法

**在Settings界面的Install选项中，可以搜索插件或者主题进行下载安装，有的可能会提醒重启Atom才能激活**，界面下边还有Hot推荐插件列表：

---

插件[1] minimap

    顾名思义，这款插件在窗口的右边栏打上遮罩，为 Atom 加上 Sublime Text 的源码预览图，提供丰富的自定义选项，值得一用，效果如1。

---

插件[2] activity-power-mode

    Atom装逼插件，配上个青轴机械键盘，我看见代码在跳舞啊，动次动次动动次！！！

activity-power-mode官方地址

装上之后使用快捷键：Ctrl + Alt + o 激活

---

插件[3] autocomplete-plus

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

---

插件[4] javascript-snippets

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

---

插件[5] git plus

    在 Atom 里面执行 Git 命令，不用来回切换终端和编辑器。

---

插件[6] merge-conflicts

    解决Atom中合并冲突插件！

merge-conflicts官方地址

---

插件[7] Script

    可以根据文件名称，或所选的代码块，或行号执行代码，支持大多数编程语言！！！

Script官方地址

---

插件[8] atom-ctags

    使用 ctags 来强化自动完成功能，需借助于 autocomplete-plus。

atom-ctags官方地址

---

插件[9] autocomplete-python

    Python包、变量、方法、函数声明等自动匹配

autocomplete-python官方地址

---

插件[10] color-picker

     颜色拾取器，在编辑器里面挑选颜色。通过右键选择 Color picker ，或者 cmd + shift + c/ctrl + alt + c 快捷键调出颜色选择面板。支持 HEX, HEXA, RGB, RGBA, HSL, HSLA 形式指定的颜色值。

color-picker官方地址

---

插件[11] python-tools

    Python提高生产力的必备工具！！！

    默认快捷键：ctrl+alt+u

python-tools官方地址

---

插件[12] xml-formatter

    XML代码格式化工具， 默认快捷键：SHIFT-CTRL-X

xml-formatter官方地址

---

插件[13] autocomplete-paths

    自动匹配文件路径工具！

autocomplete-paths官方地址

---

插件[14] atom-html-preview

    html文档预览工具， 默认快捷键：CTRL-SHIFT-H

atom-html-preview官方地址

---

插件[15] atom-beautify

    格式化代码，更统一的代码风格， 支持HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, and SQL等语言代码！**必备！！！**

atom-beautify官方地址

插件[16] file-icons

    显示文件类型对应的图标，升级插件后可能需要重启Atom。

file-icons官方地址

---

插件[17] java-importer

    帮助Java用户自动导入依赖的包。

java-importer官方地址

---

插件[18] jshint

    验证你的 JavaScript ，写更专业的 JavaScript 代码。

jshint官方地址

---

插件[19] csslint

    CSSLint 会报告出不合规定的 CSS 规则！

csslint官方地址

---

插件[20] csscomb

    CSSComb 的一个扩展工具， CSSComb 帮你写出更漂亮的 CSS ！

csscomb官方地址

---

插件[21] autoprefixer

    AutoPrefix的一个扩展工具，自动为 CSS 属性添加特定的前缀。

autoprefixer官方地址

---

插件[22] emmet

    手写 HTML 多少显得专业，但是手写的问题在于得大量的代码。Emmet大幅提升手写的效率。非常值得一装。

emmet官方地址

---

插件[23] vim-mode

    在Atom中使用vim!

vim-mode官方地址

---

插件[24] sync-settings同步Atom

    安装了这么多的插件，并且这么多的设置，如何备份同步呢？Atom并没有账号支持啊？其实，sync-settings插件可以完成相关工作，非常出色！

    可以同步Atom的设置文件,自定义快捷键,用户风格,初始化脚本及代码片段,还支持已安装的插件同步

sync-settings官方地址

sync-settings 设置方法：

1. 进入Atom设置中心找到该插件，进去setting；

2. 打开自己的github创建一个a new person access token ， 然后复制生成的token序列， 粘贴到sync-settings插件的setting里面；

3. 再打开github的gist服务，创建一个gist，并复制生成gist id（注意这个id就是你创建的gist服务对应的URL中除去你的用户名，之后的部分），也粘贴到sync-settings插件的setting里面

4. 配置完毕后， 在文档编辑页面,按下全局命令搜索面板(Ctrl+shift+p)，搜索sync-，会有可选项：

   sync-settings:backup – 这条命令是备份当前的配置
   
   sync-settings:restore – 这条命令是回复配置,是直接覆盖的;
   
   sync-settings:view-backup – 这条是当你执行备份后到线上查询你的备份的,也就是到你的gist code里面
   
   sync-settings:check-backup – 这条是查询最后一次是否正常
   

   效果图如下所示：

同步成功与失败的提示信息：

最后在Github中gist服务中多了许多Atom插件的备份配置信息，使用的是coffee脚本保存的，如图：

---

注意

1. Atom提供的插件非常多，都来自于Github，遇到问题可以直接在Github上提问；
2. 插件更新后，可能会失效，重启是个不错的解决办法 ；

3. 推荐几个常用功能，默认已安装：

   1>. ctrl + g: 只要 ctrl + g 后输入行号, 就能跳转到指定的行  ；
   
   2>. ctrl + shift + p: 调出功能详情，如按下快捷键后输入pane命令，查找split列表项，点击后实现分屏功能；
   
   3>. Atom-Material这个主题真心不错，是Android material风格。