Content Table
2016-06-18

Atom 常用插件和快捷键

Atom 以前很慢，所以一直不想用，在 1.0 版本后启动差不多需要 1.5 秒，已经快了很多，尝试了下，感觉很好，插件更好用，例如格式化插件 atom-beautify，jshint 等、界面更舒服，现在已经从 SublimeText 替换到 Atom 了，以下为常用的几个插件

常用插件

插件 推荐 说明
atom-ternjs 这是 Tern 项目的 Atom 插件，提供了了比较精确的代码补全功能，不止是匹配输入过的关键字，还可以提示 ECMAScript、DOM/BOM、NodeJS 的方法和属性，也能自动分析依赖的模块，给出补全提示，这样Atom 用起来就有点 IDE 的感觉了。
linter-eslint Y JavaScript 代码实时错误提示，把提示依赖的几个插件也都安装上，后面有说明进行安装配置
highlight-selected 高亮所有和当前选中单词一样的单词，IDE 标配
quick-highlight Y 和 highlight-selected 相似
pigments Y CSS 颜色可视化，例如显示 rgba(0,0,0,0.8) 对应的颜色
atom-beautify Y 格式化插件, 支持很多语言，HTML，JS，CSS 等等
如果从包管理器里安装不了，就试试从命令行里 apm install atom-beautify
使用: cmd + shift + p, 输入 beatify，或者使用快捷键 ctrl + alt + b
可以手动在项目根目录下创建文件 .editorconfig, 修改格式化配置, 如使用 4 个空格缩进 indent_size = 4
file-icons Y 给文件加上图标
jquery-snippets jQuery API 代码片段
set-syntax 方便的使用 Command Palette (cmd + shift + p 打开) 修改当前文件的语法
atom-html-preview 在 Atom 里实时的预览 HTML 的内容，Command Palette 搜索 preview，或者使用快捷键 ctrl + shift + h
regex-railroad-diagram Y 正则表达式可视化: 鼠标放到正则表达式上面自动可视化，例如在 JS 文件里 /\d+/g
atom-no-tab-close-button 隐藏关闭按钮，避免误操作关闭 tab，使用 cmd + w 来关闭 tab
docblockr Y 函数名前输入 /** 按下回车生成文档的模版
less-autocompile 保存的时候把 Less 自动编译为 CSS
sublime-style-column-selection Y 列编辑
symbols-view-plus Atom 自带的 symbols-view 的增强版
symbols-navigator Y 函数显示上比 symbols-view-plus 更清晰
structure-view 像 Eclipse 那样显示 Outline，为了 vue 能像 html 那样显示 outline，按照下面的设置把 vue 的语法高亮设置为 html 的
atom-history 打开文件的记录
atom-ide-ui Y 这将在你的 Atom 中呈现 IDE 界面，但是要成为一个完全可工作的 IDE ，你还需要安装你的语言服务器支持。可以选择：ide-html、ide-typescript(TypeScript & JavaScript)、 ide-php、 ide-java、 ide-csharp。

推荐使用 ide-html 的插件，ide-typescript 在最新版的 Atom 中不能使用，但是 ide-html 还是很不错的。
split-diff 文件比较工具、合并工具
git-time-machine 可以和 Git 仓库里任意版本进行比较，快捷键为 Alt+T
git-log 显示提交记录
hey-pane Y Split 后可以按下 CMD + Shift + K 使得放大当前的 pane
bracket-colorizer 匹配的括号使用不同的颜色高亮
nyan-indent 使用不同的颜色高亮不同的缩进
sync-settings 备份和恢复配置和插件 (安装后 Atom 很卡，使用后卸载，需要时再安装)
better-git-blame Y Git Blame: 显示每一行代码都是谁写的
goto-definition Y 函数跳转 (如在 HTML 里跳转到 JS 的函数定义)
indent-guide-improved Y 更好的缩进显示，下面有自定义样式
atom-ctags Y 生成 ctags 文件用于自动补全
autocomplete-ctags Y 使用 ctags 文件进行补全，使用 atom-ctags 生成 tags 文件，并禁用 atom-ctags 的自动补全功能
language-vue Y Vue 语法高亮
atom-alignment Y 变量对齐
todo Y 显示工程中的所有 TODO，可以搜索，还有一个不错的相似插件是 todo-show，只是显示更复杂
project-manager Y 管理多个不同的工程，方便切换
atom-text-manipulation 文本处理，例如 Encode/Decode Base64, MD5, SHA, Un/Escape XML 等
OOOOOOOOOOOOOOOO OOOOOO OOO

提示：如果插件因为墙的原因从 Atom 里安装失败，还可以下载源码，然后本地安装:

  1. 打开 CMD
  2. cd /Users/${UserName}/.atom/packages
  3. git clone <源地址>
  4. cd 插件的目录
  5. apm install

使用阿里的插件仓库

Atom 默认的插件仓库国内访问比较慢，可以使用阿里的:

  1. 代开文件 ${UserHome}/.atom/.apmrc

    如果没有这个文件，新创建一个

  2. 修改内容为 registry=https://registry.npm.taobao.org/

快捷键

功能 快捷键
显示所有函数 cmd + r
显示隐藏 tree-view cmd + \
拆分窗口 先按下 cmd + k，然后按下方向键

自定义快捷键

如果已经被使用了，先解绑，例如 cmd + l，然后再绑定新的快捷键

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
'atom-text-editor':
    'cmd-d'    : 'unset!'
    'cmd-l'    : 'go-to-line:toggle'
    'f3'       : 'goto-definition:go'                # 跳转到定义
    'cmd-;'    : 'autocomplete-plus:activate'        # 自动补全
    'cmd-e'    : 'fuzzy-finder:toggle-buffer-finder' # 显示打开的文件
    'alt-cmd-]': 'atom-alignment:alignMultiple'      # 对齐

'atom-text-editor:not([mini])':
    'cmd-d': 'editor:delete-line' # 删除当前行

'atom-workspace':
    'cmd-o': 'symbols-navigator:toggle' # 显示 outline

'.platform-darwin':
    'alt-cmd-g': 'fuzzy-finder:toggle-git-status-finder' # 显示 git repo 中修改的文件

自定义文件语法高亮规则

比如微信小程序的样式文件扩展名是 wxss，在 Atom 中打开默认是纯文本的样式，没有使用 CSS 的语法高亮，可以渲染它的修改语法规则为 CSS，但是只是一次生效的，下次打开工程又无效了。

可以手动的修改 config.cson(Atom -> Config)，在 core 下面创建 customFileTypes 来配置文件的打开类型:

1
2
3
4
5
6
7
8
9
core:
  customFileTypes:
    "source.css": [
      "wxss"
    ]
    "text.html.basic": [
      "wxml"
      "vue"
    ]

怎么查找 key，例如 text.html.basic 呢？

在 Packages 里搜索 language-html，点击打开，可以看到 Scope: text.html.basic，也即是在 Package 里搜索 language- + 文件类型，然后找到 Scope 即可。

Tree View 隐藏文件

tree-view 插件的配置中设置隐藏忽略的文件，然后 config.cson(Atom -> Config) 中编辑 core -> ignoredNames，添加需要隐藏的文件类型，**.*** 表示以点开头的所有文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
core:
  ignoredNames: [
    ".git"
    ".hg"
    ".svn"
    ".DS_Store"
    "._*"
    "Thumbs.db"
    ".dll"
    ".vcxproj"
    ".suo"
    ".filters"
    ".user"
    ".sdf"
    ".*"
  ]

自定义样式

Atom > Stylesheets…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// indent-guide-improved 的样式
.indent-guide-improved {
    border-width: 1px;
    border-left-width: 0;
    margin-left: 3px;
    background-color: rgb(60, 65, 72);

    &.indent-guide-stack {
        background-color: rgb(60, 65, 72);

        &.indent-guide-active {
            background-color: transparent;
            // border-style: dashed;
            // border-color: rgb(205, 116, 232);

            // background-image: linear-gradient(0deg, #cd74e8, #cd74e8 75%, #292d34 75%, #292d34 90%, #cd74e8 90%, #cd74e8 100%);
            background-image: linear-gradient(180deg, #292d34, #292d34 10%, #cd74e8 10%, #cd74e8 90%, #292d34 90%, #292d34 100%);
            background-size: 1px 22px;
        }
    }
}

// structure-view 的样式
.structure-view div.sv-toolbox {
    display: none;
}
.structure-view div.icon-F, .structure-view div.icon-M {
    background-color: transparent;
    // border: 1px solid #444;
}
.structure-view div.icon-F > span, .structure-view div.icon-M > span {
    color: #5cadff;
    font-weight: 100;
    font-size: 12px;
    font-family: "Snell Roundhand";
    margin-top: 3px;
}

去掉 ES6 的警告提示

I am using Atom’s linter, react, and linter-jshint/linter-jsxhint. In my js files, I keep getting the warning

Warning: ‘import’ is only available in ES6 (use ‘esvertion: 6’). (W119)

First possibility, recommended : you can create a .jshintrc in you home directory and jshint will read it in case there is none in the project directory. You might need to restart Atom after.

.jshintrc 的内容:

1
2
3
{
    "esversion" : 6
}

书签

当文档比较大时，跳转不方便，可以使用书签来进行跳转：

  • 按下 CMD + F2 给当前行添加书签
  • 按下 CTL + F2 显示所有书签，点击书签就会跳转到书签所在行

Linter Eslint

下面的配置可以支持 JS 和 HTML 中使用 eslint，安装上 language-vue 后支持 vue:

  1. 安装 eslint: npm install -g eslint

  2. 安装 eslint-plugin-html: npm install -g eslint-plugin-html

  3. 安装其他插件 [有需要的时候看再安装，例如 eslint-config-airbnb-base]

  4. 保存下面的内容到 .eslintrc.json

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    {
        "extends": ["eslint:recommended"],
        "env": {
            "browser": false,
            "es6": true,
            "node": true
        },
        "plugins": ["eslint-plugin-html"],
        "settings": {
            "eslint-plugin-html/eslint-plugin-html-extensions": [".html", ".vue"]
        },
        "rules": {
            "object-curly-spacing": [2, "always"],
            "strict": 0,
            "quotes": [2, "single", "avoid-escape"],
            "semi": [2, "always"],
            "indent": 2,
            "keyword-spacing": [2, {
                "before": true,
                "after": true
            }],
            "space-infix-ops": 2,
            "spaced-comment": [2, "always"],
            "arrow-spacing": 2,
            "no-console": 0,
            "no-unused-vars": 0
        },
        "globals": {}
    }

  5. Atom 中安装插件 linter-eslint

  6. Atom 中配置插件 linter-eslint

    • .eslintrc path: 也就是上面的 .eslintrc.json 的路径
    • 选中 Lint HTML Files
    • 选中 Use global ESLint installation

  7. 如果要支持 Vue，Atom 安装插件 language-vue