前端学习 开发编辑器 Atom使用配置

前言

Android开发时，也经常使用使用文档编辑器。就是主要用在看一些比较简单的开源项目时，不想用IDE打开，仅仅是阅读一下代码，用文档编辑器就会方便很多。 stormZhang讲过一篇博客 Gradle命令详解与导入第三方包，里面提到了Sublime这个编辑器。刚开始自己用的这个，后来Atom出了，看了一眼，便非常喜欢，于是就转到Atom上来。

现在自己在学习前端开发基础，使用Atom作为编辑器，那么就摸索一下怎么配置Atom，才能方便前端开发，比如如何自动补全，如何智能提示等等功能。

这篇文章核心是Atom的配置，但也会从基础开始介绍。

1. 安装

就在Atom官网上直接下载下来解压就可以使用了。很舒服。

2. 介绍Atom基础术语

先了解Atom的使用的一些概念，在之后理解有很大帮助。

• 缓冲区 Buffer :
  A buffer is the text content of a file in Atom. It’s basically the same as a file for most descriptions, but it’s the version Atom has in memory. For instance, you can change the text of a buffer and it isn’t written to its associated file until you save it.
  Atom会将文件中的文本内容全部加载到内存中，这就是缓冲区。当你修改文本内容时，实际上修改的是缓冲区中的内容。当按下 command + S 进行保存时，Atom会将缓存区内容写入到硬盘上进行持久化保存。

• 窗格 Pane:
  A pane is a visual section of Atom.
  窗格是Atom的可视化部分。就是一块一块的区域。

3. 介绍命令面板 Command Palette

快捷键 command + shift + P 快速调出命名面板，可以通过该命令面板查看所有的快捷键。
官方这么说：If you only remember one keyboard shortcut, make it command + shift + P 。通过它可以查到其他快捷键。

更多快捷键在之后的使用中添加进来。

快捷键	描述
command + S	保存当前文件
command + shift + S	另存为
command + alt + S	全部保存
command + \	tooggle tree-view
ctrl 0	focus tree-view
command + P	在当前文件中搜索

注 ： Mac下快捷键的符号所对应的按键
⌥ —> option|alt
⇧—>shift
⌃—>control
⌘—>command
⎋—>esc

4. 前端开发配置

了解了atom后，就可以开始配置atom，方便我们的编码工作。

• 通过命令行安装插件（插件介绍可看文末链接）

  apm install emmet //前端常用
  apm install atom-beautify //格式化
  apm install minimap //代码地图
  apm install autoclose-html //自动闭包
  apm install linter //lint检查
  apm install linter-jshint//js检查
  apm install file-icons //文件视图图标
  apm install run-in-browser //使用浏览器预览
  

恩，配置完成后，就可以开心的编码啦。

5. Atom使用技巧

1. 安装atom命令行
   导航栏中，点击Atom，选项会有 Install Shell Commands，安装后可在terminal中直接使用atom命令行直接打开该指定路径文件。

   atom xxx
   

2. 修改快捷键
   在使用atom-beautify时，发现它的快捷键太难用了。control-alt-b 十分难按。在android开发中，格式化和代码保存最常用。于是就把格式化的快捷键改了。

   1. 打开atom菜单，选中KeyMap…选项

   2. 添加如下代码，复写atom内置的快捷键：

      'atom-text-editor':
          #格式化
          'alt-cmd-l': 'atom-beautify:beautify-editor'
          #用浏览器打开
          'alt-cmd-o': 'rib:run-in-browser'
      

      这里为alt-cmd-L，设置为和android studio一样，就方便书写代码了。哈哈哈。这里设置它的快捷键比andorid studio方便的多，真的佩服Atom这个编辑器。

3. 查看markDown PreView
   使用 command + shift + P 后搜索 markdown preview,就可以打开窗口查看。

结语

Atom的用于前端开发自己也是刚刚开始，之前仅仅是作为单纯的文本编辑查看器了，目前还在不停的摸索阶段。不过这些插件用于目前学习基础的前端开发已经够用了。之后随着学习的深入，会不断补充。

关于摸索过程中翻到的好文章，链接全在下面啦，大家可以看看。

文档：
Atom 中文社区
Atom 官方文档

好文章：
Atom 新一代编辑器
Github开源编辑器Atom常用插件及安装方法
开发神器Atom编辑器优秀插件推荐