磨刀不误砍柴工，配置你的前端开发环境：Atom

最新推荐文章于 2024-10-28 15:18:39 发布

weixin_34326429

最新推荐文章于 2024-10-28 15:18:39 发布

阅读量97

点赞数

文章标签：前端 git shell ViewUI

原文链接：https://segmentfault.com/a/1190000007690359

版权

Atom 是 Github 官方开发的一款可定制化的、跨平台的文本编辑器。有两点需要注意一下，一是 Atom 是由 Github 官方开发，二是其定制化程度非常高。前者的结果是编辑器对 Github 非常友好，如果项目托管在 Github 上的话，用 Atom 可以很方便地进行 Git 操作。后者的结果就是我们可以根据自己的需要定制自己的编辑器，使得自己的效率最大化，也让自己舒舒服服、开开心心地码代码。

Atom 的特色

Atom Package Library

Atom 的背后有一个强大的社区，带来了一大波插件，被称为 packages，利用这些 packages 你可以很好的自定义你的编辑器。

对 Git 友好

当你在一个 git 项目中添加或修改文件时，Atom 会用特定的颜色标记出来，比如绿色代表新建的文件，黄色代表修改的文件。

图片描述

另外，在编辑器的右下角，还能显示你在哪个分支，你添加、删除了多少行。

图片描述

Command Palette

命令行面板用 cmd + shift + p / ctrl + shift + p 调出，在这个面板中你可以输入命令控制你的编辑器甚至控制你的安装的 package。

图片描述

Fuzzy File Finder

按键： cmd + T / ctrl + T，调出查询面板，当项目比较大时，你可以利用这个面板，输入关键字，Atom 便能帮你找到关键字所在的文件。

图片描述

Atom Shell Commands

在打开这项功能之前，需要先安装 Atom Shell Commands。

图片描述

安装好了后，就可以在终端（Terminal）中用命令行控制 Atom。比如：

atom：在当前目录下新建一个新的 Atom 窗口
atom .：将当前目录在 Atom 中打开
atom myProject：在 Atom 中打开一个特定的文件夹或文件
atom -h：查看 atom 命令后面可以跟哪些参数

图片描述

当然你也可以使用 apm 命令在终端来安装 package，前提是安装了 Node。比如安装一个叫 “pigments” 的 package，那么你可以使用如下命令：

apm install pigments

这里就插播一句，安装了 Node 后，npm(Node Package Manager) 也一起安装了，通过 npm 命令可以安装 Node 的 package。但是速度一般会比较慢，所以我们习惯上会再安装一个 nrm(Npm Regisry Manager)，这是一个 npm 注册中心的管理工具，npm 注册中心代表 packages 存放的地方。如果使用默认的注册中心，那么安装时就需要从国外的服务器中下载 package，速度就比较慢，所以我们会利用 nrm 来将国外的注册中心切换至中国的 taobao 注册中心，具体讲是利用如下命令：

nrm use taobao

检查是否成功切换的标志是输入 nrm current 或者 nrm ls。然后以后安装 package 时便可以从国内镜像进行下载了。

图片描述

Snippets

将你一般比较常写的代码做成模板，方便以后自动填充。

图片描述

比如我经常需要些 ES6 的类，所以我便将 ES6 类做成模板。

图片描述

以后，只要我在 JS 文件中输入 cl 再按 Enter 键，则会出现：

图片描述

这里解释一下模板的用法，以我上面的模板为例。

.source.js：目标文件类型，就是模板只有在 JS 文件中自动填充才能生效
class：模板的名字，仅仅作为你模板的一个标识
prefix：你在使用时输入的缩略词，这例子中我需要输入 cl 来自动补全代码
body：模板的正文，单行语句只需要 ''，多行语句则需要 """
$1,$2... 光标的位置，按 Tab 或者 Enter 键进入下一个位置

定制你的 Atom

下载好对应操作系统的 Atom 并且安装后，首先就是进入设置界面（Windows 下的 Settings 或 Mac 下的 Preferences)。Atom 设置的一个我认为最大的好处就是，她将所有的设置都通过图形化界面来操作，而不像一些编辑器通过一大堆很繁琐的配置文件。你会看到设置界面的导航栏：

图片描述