程序员的编辑器 Atom

1. Atom 简介

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

1.1 优缺点

主要优点

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

主要缺点

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

2. 基本使用和配置

2.1 更换源

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

  • C:UsersYourname.atom.apm.apmrc 拷贝到 C:UsersYourname.atom目录下
  • 编辑 C:UsersYourname.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:UsersYourname.atompackages

    • 命令行安装
     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:UsersYourname.atomconfig.cson

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

    6. 参考

    • https://marshal.ohtly.com/2016/07/16/using-atom-as-a-python-editor/
    • https://atom.io/docs
    • https://github.com/futantan/atom
    • https://atom.io/packages/sync-settings
    • https://zhuanlan.zhihu.com/p/23536047