1. Introduction to Atom

Atom is a code editor that supports the three major desktop platforms Windows, Mac, and Linux, is completely free, and is open source on GitHub. Go now

1.1 Pros and Cons

Main advantages

• A strong development and maintenance team, an open source project, fast Bug fixes, and a fast-growing ecosystem.
• Excellent keyboard shortcut support; once you are familiar with the various shortcuts, your productivity can multiply.
• Fairly stable, with crashes being rare.
• Plugin management is well done, and it can accurately pinpoint the problematic plugin.
• The plugin ecosystem grows especially fast, with many useful plugins.

Main disadvantages

• Performance problems; startup is very slow.
• Opening large files causes excessively high CPU usage.
• Compared with Sublime, it is not yet mature enough at the technical level, and has quite a few Bugs.

2. Basic Usage and Configuration

2.1 Changing the Source

The first time you use Atom’s plugin system, APM needs to do some initialization work, such as installing some related dependency packages. Because of domestic network issues, the installation may fail or be very slow, so you need to switch to a domestic mirror source:

1. Copy C:\Users\Yourname\.atom\.apm\.apmrc into the C:\Users\Yourname\.atom\ directory
2. Edit C:\Users\Yourname\.atom\.apmrc and add the following content:

1

registry=https://registry.npm.taobao.org/

2.2 Technical Principles

Atom is based on Electron, and Electron is an integration of Chromium and Node.js; it can access the local user interface, including local dialogs, menus and window controls.

When using Chromium to browse the web, every tab and plugin corresponds to a process in the operating system. This architecture is carried over in Electron: the entry point of an Electron program is a JavaScript file, and this file will be run in a main thread that has only the Node.js environment.

At present, there are already a large number of applications based on Electron:

• VS Code is a text editor from Microsoft.
• Slack is an instant messaging application.
• Postman is an HTTP API debugging tool.
• Hyper is a terminal emulator.
• Nylas N1 is an email client.
• GitKraken is a GUI client for Git.
• Medis is a GUI client for Redis.
• Mongotron is a GUI client for MongoDB.

The Atom core only provides APIs; all functionality is implemented by plugins, and Atom bundles 77 plugins by default.

2.3 How to Install Plugins

• GUI installation

Open Atom » Packages » Settings View » Install Packages/Themes, then enter the plugin you want in “Search packages”, for example: simplified-chinese-menu, and click “Install”.

• Download and install

Search for the plugin name on github.com and download the corresponding source code archive. After extracting it, move it to C:\Users\Yourname\.atom\packages

• Command line installation

 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. Plugins

3.1 General Plugins

• sync-settings: a configuration backup plugin, convenient for later migration and quick and practical together with gists.
• simplified-chinese-menu: Atom’s Chinese localization plugin.
• atom-beautify: code formatting.
• autocomplete-modules: module name autocompletion.
• autocomplete-paths: file path hints.
• hyperclick: jump to a variable’s or function’s declaration or definition.
• markdown-format, markdown-writer: writing Markdown on Atom.
• markdown-preview-plus: Markdown preview.
• project-manager: managing projects on Atom.
• vim-mode: add Vim mode to Atom.
• atom-terminal-panel: a command line tool built into Atom.
• platformio-ide-terminal: a terminal tool.
• file-icons: show a different file icon for different types of files.
• script: run scripts.
• docblockr: makes writing comments easy, generating different comment formats as appropriate.
• activate-power-mode: typing effects.
• minimap: show a thumbnail of the current document.
• open-unsupported-files: use system software to open files that Atom cannot preview, such as Doc, Excel, and PPT.
• minimap-highlight-selected: highlight identical text when it is selected.

3.2 Git/SVN Plugins

• tortoise-svn: an Svn plugin.
• git-plus: run git commands inside Atom.
• git-control: a Git panel.
• git-log: a graphical Git commit history.
• atomatigit: visual Git operations.
• tree-view-git-status: Git status in the folder.

3.3 HTML Plugins

• atom-html-preview: a tool for real-time HTML preview inside the Atom editor.
• autoclose-html: automatically close HTML tags.
• emmet: html completion, speeding up Web development, providing Snippets.

3.4 CSS Plugins

• color-picker: a color picker.
• autoprefixer: browser compatibility.
• linter-scss-lint: SCSS coding convention checking.
• linter-less: LESS coding convention checking.
• linter-csslint: CSS coding convention checking.

3.5 JavaScript Plugins

• jquery-snippets: Jquery autocompletion Snippets.
• linter-jshint: jshint code checking.
• javascript-snippets: JavaScript autocompletion Snippets.
• atom-ternjs: JavaScript code intelligence and completion.

3.6 Python Plugins

• atom-python-run: run Python code in the terminal.
• autocomplete-python: Python code autocompletion.
• linter-pep8: PEP8 coding convention checking.
• linter-flake8: Flake8 coding convention checking.
• python-tools: provides powerful completion for variable names, functions and the standard library.
• python-debugger: a Python debugging tool.
• atom-django: Atom’s support for the Django framework.
• django-templates: Atom’s support for Django templates.
• language-mako: Atom’s support for Mako templates.

4. Keyboard Shortcuts

5. Best Practices

5.1 Syncing Plugins and Configuration

Here we mainly use the sync-setting plugin and the Gist code snippet service provided by Github.

• 1.Create a Gist project; once it succeeds, get the Gist id from the project’s URL. Go now
• 2.Apply for Access Tokens. Go now
• 3.Configure sync-settings. Add the following content to Atom’s configuration file config.cson:

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

1
2
3

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

6. References

• 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