Content Table

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