Please enable Javascript to view the contents

程序员的编辑器 - Atom

 ·  ☕ 7 分钟

1. Atom 简介

Atom 是支持 Windows、Mac、Linux 三大桌面平台,完全免费,并且在 GitHub 上开源的代码编辑器。立即前往

1.1 优缺点

主要优点

  • 开发维护团队强大,开源项目,修复 Bug 速度快,生态圈成长速度快。
  • 快捷键支持特别好,熟悉了各种快捷键后可以成倍提高生成效率。
  • 比较稳定,很少出现崩溃。
  • 插件管理很到位,能准确定位出问题的插件。
  • 插件的生态圈发展速度特别快,很多好用的插件。

主要缺点

  • 性能问题,启动速度很慢。
  • 打开大文件是会出现 CPU 占用过高的问题。
  • 目前相比于 Sublime 技术层面还不够成熟,有不少 Bug。

2. 基本使用和配置

2.1 更换源

初次使用Atom的插件系统,APM 需要做一些初始化工作,比如,安装一些相关的依赖包。由于国内网络问题,会导致安装失败或很慢,需要更换为国内的镜像源:

  1. C:\Users\Yourname\.atom\.apm\.apmrc 拷贝到 C:\Users\Yourname\.atom\目录下
  2. 编辑 C:\Users\Yourname\.atom\.apmrc,新增如下内容:
1
registry=https://registry.npm.taobao.org/

2.2 技术原理

Atom 是基于Electron,而Electron 是 Chromium 与 Node.js 的集成,它可以访问本地用户界面,包括本地对话框、菜单和窗口控件。

使用 Chromium 浏览网页时,每一个标签页和插件都对应着一个操作系统中的进程。在 Electron 中也沿用了这样的架构,Electron 程序的入口点是一个 JavaScript 文件,这个文件将会被运行在一个只有 Node.js 环境的主线程中。

目前,已经有大量基于 Electron 的应用:

  • VS Code 是微软的一款文本编辑器。
  • Slack 是一款即时通讯软件。
  • Postman 是一个 HTTP API 调试工具。
  • Hyper 是一个终端仿真器。
  • Nylas N1 是一个邮件客户端。
  • GitKraken 是一个 Git 的 GUI 客户端。
  • Medis 是一个 Redis 的 GUI 客户端。
  • Mongotron 是一个 MongoDB 的 GUI 客户端。

Atom 核心仅仅提供API,功能全部由插件来实现,Atom 默认就捆绑了 77 个插件。

2.3 插件安装方法

  • GUI 安装

打开Atom » Packages » Settings View » Install Packages/Themes然后在 “Search packages” 中输入你想要的插件,例如:simplified-chinese-menu,点击 “Install”。

  • 下载安装

到 github.com 上搜索插件名,下载相应源代码压缩包。解压后,移动到 C:\Users\Yourname\.atom\packages

  • 命令行安装
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// 安装指定包
apm install <package_name>

// 安装指定版本的包
apm install <package_name>@<package_version>

// 查找包
apm search <package_name>

// 查看包更多详情
apm view <packge_name>

// 查看当前已安装包(包含默认Atom捆绑和个人安装)
apm list

3. 插件

3.1 通用插件

  • sync-settings:配置备份插件,方便以后的迁移,配合gist实用快捷。
  • simplified-chinese-menu:Atom的汉化插件。
  • atom-beautify:代码格式化。
  • autocomplete-modules:模块名自动补全。
  • autocomplete-paths:文件路径自动提示。
  • hyperclick:跳转到变量函数声明或者定义的地方。
  • markdown-format,markdown-writer:Atom 上写 Markdown。
  • markdown-preview-plus:Markdown预览。
  • project-manager:Atom 上管理项目。
  • vim-mode:Atom 添加 Vim 模式。
  • atom-terminal-panel:Atom 内置命令行工具。
  • platformio-ide-terminal:终端工具。
  • file-icons:不同类型的文件显示不同的文件图标。
  • script:执行脚本。
  • docblockr:方便写注释,可以根据情况生成不同的注释格式。
  • activate-power-mode:打字特效。
  • minimap:显示当前文档的缩略图。
  • open-unsupported-files:使用系统软件打开 Doc、Excel、PPT等 Atom 不预览的文件。
  • minimap-highlight-selected:选中时,高亮相同的文本。

3.2 Git/SVN 插件

  • tortoise-svn:Svn插件。
  • git-plus:在 Atom 里面执行 git 命令。
  • git-control:Git面板。
  • git-log:图形化 Git 提交记录。
  • atomatigit:可视化 Git 操作。
  • tree-view-git-status:文件夹 Git 状态。

3.3 HTML 插件

  • atom-html-preview:Atom编辑器内实时预览 HTML 的工具。
  • autoclose-html:自动闭合 HTML 标签。
  • emmet:html补全,加快 Web 开发速度,提供 Snippet 。

3.4 CSS 插件

  • color-picker:取色器。
  • autoprefixer:浏览器兼容。
  • linter-scss-lint:SCSS 编码规范检查。
  • linter-less:LESS 编码规范检查。
  • linter-csslint:CSS 编码规范检查。

3.5 JavaScript 插件

  • jquery-snippets:Jquery 自动补全 Snippets。
  • linter-jshint:jshint 代码检查。
  • javascript-snippets:JavaScript 自动补全 Snippets。
  • atom-ternjs: JavaScript 代码智能提示补全。

3.6 Python 插件

  • atom-python-run:终端运行 Python 代码。
  • autocomplete-python:Python 代码自动补全。
  • linter-pep8:PEP8 编码规范检查。
  • linter-flake8:Flake8 编码规范检查。
  • python-tools:提供了强大变量名函数和标准库的补全。
  • python-debugger:Python 调试工具。
  • atom-django:Atom 对 Django 框架的支持。
  • django-templates: Atom 对 Django templates 模板支持。
  • language-mako:Atom 对Mako 模板支持。

4. 快捷键

英文 中文 快捷键 功能
New Window 新建界面窗口 Ctrl + Shift + N 如中文意思
New File 新建文件 Ctrl + N 如中文意思
Open File 打开文件 Ctrl + O 如中文意思
Open Folder 打开文件夹 Ctrl + Shift + O 如中文意思
Add Project Folder 加载项目目录 Ctrl + Alt + O 如中文意思
Reopen Last Item 重新加载上次项目 Ctrl + Shift + T 如中文意思
Save 保存文件 Ctrl + S 如中文意思
Save As 另存为 Ctrl + Shift +S 如中文意思
Close Tab 关闭当前编辑文档 Ctrl + W 如中文意思
Close Window 关闭编辑器 Ctrl + Shift + W 如中文意思
Undo 撤销 Ctrl + Z 如中文意思
Redo 重做 Ctrl + Y 如中文意思
Cut 剪切 Shift + Delete 如中文意思
Copy 复制 Ctrl + Insert 如中文意思
Copy Path 复制文档路径 Ctrl + Shift + C 如中文意思
Paste 粘贴 Shift + Insert 如中文意思
Select All 全选 Ctrl + A 如中文意思
Select Encoding 选择编码 Ctrl + Shift +U 就是设置文件的编码
Go to Line 跳转到某行 Ctrl + G 支持行列搜索,Row:Column
Slect Grammar 语法选择 Ctrl + Shift + L 和Sublime的Syntax设置功能一样
Reload 重载 Ctrl+ Alt +R 重新载入当前编辑的文档
Toggle Full Screen 全屏 F11 如中文意思
Increase Font Size 增大字体 Ctrl + Shift + “+” Sublime的Ctrl +也能生效
Decrease Font Size 减小字体 Ctrl + Shift + “-“ Sublime的Ctrl -也能生效
Toggle Tree View 展示隐藏目录树 Ctrl +|(竖杠) Ctrl+b可以隐藏不能展示
Toggle Commadn palette 全局搜索面板 Ctrl + Shift + P 和Sublime的大同小异
Select Line 选定一行 Ctrl + L 如中文意思
Select First Character of Line 选定光标至行首 Shift + Home 如中文意思
End of Line 选定光标至行尾 Shift + End 如中文意思
Select to Top 选定光标处至文档首行 Ctrl + Shift + Home 就是光标处作为分割线,取文档上部分
Select to Bottom 选定光标处至文档尾行 Ctrl + Shfit + End 就是光标处作为分割线,取文档下部分
Find in Buffer 从缓存器搜索 Ctrl + F 与Sublime一致
Replace in Buffer 高级替换 Ctrl + Shift + F 与Sublime一致
Select Next 匹配选定下一个 Ctrl + D 和Sublime一模一样有木有
Select All 匹配选定所有 Alt + F3 和Sublime一模一样有木有
File 查询文件,选定打开 Ctrl + P 与Sublime不一样
Delte End of Word 删除光标处至词尾 Ctrl + Del 如中文意思
Duplicate Line 复制行 Ctrl + Shift + D 复制光标所在行自动换行
Delete Line 删除一行 Ctrl + Shift + K 如中文意思
Toggle Comment 启用注释 Ctrl + / 与Sublime一致
Toggle developer tools 打开Chrome调试器 Ctrl + Alt + I 挺神奇的
Indent 增加缩进 Ctrl + [ 向右缩进
Outdent 减少缩进 Ctrl + ] 向左缩进
Move Line Up 行向上移动 Ctrl + up 如字面意思
Move Line Down 行向下移动 Ctrl + Down 如字面意思
Join Lines 行链接 Ctrl + J 追加
newline-below 光标之下增加一行 Ctrl + Enter 与sublime一致
editor:newline-above 光标之上增加一行 Ctrl + Shift + Enter 与sublime一致
pane:show-next-item 切换编辑的标签页 Ctrl + Tab 如中文意思
Fuzzy Finder 文件跳转面板 Ctrl + T 如字面意思
Select Line Move above 选中行上移 Ctrl + up 如中文意思
Select Line Move below 选中行下移 Ctrl + down 如中文意思
Symbol-view 进入变量、函数跳转面板 Ctrl + R 如中文意思

5. 最佳实践

5.1 同步插件和配置

这里主要使用了 sync-setting 插件和 Github 提供的 Gist 代码片段服务。

  • 1.创建 Gist 项目,成功后,在项目的 URL 中,获取 Gist id。立即前往
  • 2.申请 Access Tokens。立即前往
  • 3.配置 sync-settings。在 Atom 的配置文件 config.cson 新增如下内容:

C:\Users\Yourname\.atom\config.cson

1
2
3
"sync-settings":
    gistId: "b3025...88c41c"
    personalAccessToken: "6a10cc207b....7a67e871"

6. 参考


微信公众号
作者
微信公众号