Atom 编辑器

在 Web 开发领域，最受高手追捧的是三款编辑器：vim ，sublime ，atom 。Atom 的使用跟 sublime 类似，但是功能更强，所以主力编辑器选择 atom 。vim 太难学，不推荐作为主力编辑器，但是后面涉及服务器管理的时候，还是需要用到 vim 。

安装

1. 深度系统上，到 atom.io 网站，下载 .deb 的包，进行安装。
2. 或者到深度商店搜索 atom 进行下载

打开一个项目

在 Linux 上打开命令行命令

Ctrl+Alt+T

cd project/
atom .

创建文件

默认就是用 Ctrl-n ，保存用 Ctrl-s 。

使用一个插件来进行文件创建操作，叫做 Advanced New File 。

自动补齐

现在我想输入 h1<tab> 就自动补齐成

<h1></h1>

这个需要安装一个包叫做 emmet 。

装包

使用 Ctrl-Shift-P 打开命令面板，然后搜索

install packages

可以搜到 Install Packages And Themes ，选中，回车，就进入了装包界面。

搜索报名，例如 pigments ，搜到之后，点 install 就可以了。

查看 atom 中已经安装了哪些包，就用 Ctrl-Shift-P 打开命令面板，然后输入

Uninstall Packages

就可以看到所有已经安装的包了。

Web好用的插件

• file-icons，显示文件类型对应的图标

• emmet，代码补齐

• language-babel，JSX语法

• linter，代码检查

• linter-jshint，JS代码查错（必须安装linter后才能使用）

• highlight-selected，高亮当前所选文字

• git-control，支持git插件

• atom-beautify，一键代码美化

• simplified-chinese-menu，简体中文汉化

• atom-material-ui，好看到爆

• atom-material-syntax，美化

• atom-ternjs，js代码提示很强大，高度定制化

• docblockr，jsdoc 给js添加注释

• autoclose-html，闭合html标签

• color-picker，取色器（必备插件）

• pigments，颜色显示插件 （必装）

• terminal-panel，直接在atom里面写命令了

• svg-preview，svg预览

• markdown-preview-enhanced，Markdown展示插件（参考地址）

Atom 快捷键

配置自己的快捷键

打开搜索功能

ctrl+Shift+P

搜索snippets

选择下面那项，打开

Application: Open Your Snippets

打开snippets.cson后，将下面代码贴入

# Your snippets
#
# Atom snippets allow you to enter a simple prefix in the editor and hit tab to
# expand the prefix into a larger code block with templated values.
#
# You can create a new snippet in this file by typing "snip" and then hitting
# tab.
#
# An example CoffeeScript snippet to expand log to console.log:
#
# '.source.coffee':
#   'Console log':
#     'prefix': 'log'
#     'body': 'console.log $1'
#
# Each scope (e.g. '.source.coffee' above) can only be declared once.
#
# This file uses CoffeeScript Object Notation (CSON).
# If you are unfamiliar with CSON, you can read more about it in the
# Atom Flight Manual:
# http://flight-manual.atom.io/using-atom/sections/basic-customization/#_cson

'.source.js':
  'Console log':
    'prefix': 'log'
    'body': "console.log('$1')"

'.source.js':
  'React Class':
    'prefix': 'recl'
    'body': """
      import React, { Component } from 'react'

      class $1 extends Component {
        render(){
          return(
            <div className="$2">
              $3
            </div>
          )
        }
      }

      export default $1

    """

'.source.js.jsx':
  'JSX div':
    'prefix': 'div'
    'body': """
      <div className="$1">
      </div>
    """

• '.source.js': 添加源
• 'Console log': 添加说明
• 'prefix': 'log' 快捷前缀
• 'body': "console.log('$1')" 输入前缀后出现的主体
• $1 代表输入出现主体后出现光标的位置

内置快捷键

File【文件】

Edit【编辑】

View【视图】

Selection【选择】

Find【搜索】

core[内置快捷键]

文件语法高亮

• ctrl-shift-L 选择文本类型

使用Atom进行写作Markdown

• ctrl-shift-M Markdown预览

• 可用代码片段 b, legal, img, l, i, code, t, table

参考

• atom官网：点击进入

• atom中文社区：点击进入

• CSDN博客：点击进入