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

Posted 2023-03-13 baiiu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端学习开发编辑器 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使用技巧

安装atom命令行
导航栏中，点击Atom，选项会有 Install Shell Commands，安装后可在terminal中直接使用atom命令行直接打开该指定路径文件。
```
 atom xxx
```
修改快捷键
在使用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这个编辑器。
查看markDown PreView
使用 command + shift + P 后搜索 markdown preview,就可以打开窗口查看。