Atom的一些操作

准备入坑Atom了，记录下一些操作。。

Atom修改主题

点击左上 File > Settings > Themes ; 如下图，左边是设置 菜单的主题，右边是设置代码的主题。修改后即可见效果。

image.png

Atom好用的插件

设置插件 File > Settings > Install；然后可以自行搜索插件，Install安装插件。安装完即可使用，也可以自定义设置插件。

在File > Settings > packages管理插件，这里也可以搜索主题，点击Themes。

155477991985639067459.png

插件名：

activate-power-mode  一款炫酷特效插件。安装完后敲代码会有震动并出现特效图案。可以设置个性化效果。

Sync Settings    搭配github，同步你的atom插件信息，配置信息，让你轻松实现一台电脑配置，多台电脑共享。

Emmet  能够基于Emmet语法产生HTML，做过前段开发的不会不知道这个插件吧。好用到哭。

Atom Beautify    代码格式化工具，可以设置在保存时自动格式化，别提有多方便了。支持html，css，javascript，java，go等等，反正常见的语言基本都支持了。

Autocomplete Paths    自动补全文件路径，这个功能肯定使用嘛，完全避免了路径输入错误带来的bug。

Auto close HTML    自动输入对应的HTML关闭标签，虽然简答但是实用。

Minimap    这个插件不用介绍了吧，从sublime开始，一直使用。从未遗忘。

color-picker    取色器，让你在代码编写去直接打开取色板，拾取颜色。

vim-mode    vim死忠粉必备插件。

git-plus    让你轻松的在编辑器里管理你的git项目，各种常用git功能，信手拈来。

file-icons    很简单，为不同类型的文件添加一个漂亮的小图标，颜控开发者必备。

docblockr    文档化注释，你懂的，团队协作规范注释必备插件。

Linter Jshint    帮助你编写专业的js代码，js开发者必备插件。

language-vue .vue文件代码高亮，安装完可能只有标签高亮，设置如下，即可全部代码高亮。

File > Keymap 打开keymap.cson.最后加上下面两句，如果第一句已有只要加后一句，不可重复（设置完只要安装了）。

#'atom-text-editor[data-grammar~="vue"]:not([mini])':

#  'tab': 'emmet:expand-abbreviation-with-tab'

X}88FP5`6)FDO8K`2BXP1_2.png

基本使用

命令面板

Atom的很多功能学习和参考了其他优秀的编辑器, 命令面板就是其一. 

当你第一次看到它时, 还以为在用Sublime呢 

命令面板是Atom中最常用的功能之一, 当你在编辑器中使用快捷键Ctrl+Shift+P时, 就会看到它 

%G_)UBT2O3[U$0HCFH}5YF5.png

在控制面板中可以输入Atom中和插件中定义的所有命令, 并且支持模糊搜索 

比如说当你输入cboo时, 所有包含有这4个字符的命令就都列出来了 

在列出的命令后还显示了此命令对应的快捷键(如果有的话)

设置窗口

自带可视化的设置界面是Atom使用很方便的原因之一, 而不像传统的编辑器那样需要手动修改配置文件. 

1$}F%%2N([YO}LEH%%S{GDK.png

你可以使用下面三种方法来打开设置窗口 

1. 主菜单Edit->Preferences 

2. 在命令面板中输入命令Settings View:Open. 因为命令窗口支持模糊查询, 因此只需要输入svo, 就可以了 

3. 使用快捷键Ctrl+,

在设置窗口中可以设置和管理各种编辑器行为, 键盘快捷键, 插件, 主题等内容

设置窗口界面主题和代码高亮

Atom自带了4种窗口主题和8种代码高亮方式 

可以通过设置窗口中的Themes页面来配置和修改 

另外还有n多n多第三方制作的主题可以安装,安装方法在后面会讲到 

UPW`QFV(WAF@NE9UOXVCBZH.png

文件操作

打开文件

你可以通过主菜单File->Open File...或者快捷键Ctrl+O来打开文件选择窗口 

RKI91DFV(WR~~_DDEOY9)IM.png

保存文件

主菜单 File->Save 

快捷键 Ctrl+S 

另存为: Ctrl+Shift+S 

保存所有文件: File->Save All

打开文件夹

打开文件夹是一个很实用的功能, 可以像IDE一样打开一个项目的根目录 

可以通过在主菜单选择File->Add Project Folder...来打开或者添加一个目录,也可以使用快捷键Ctrl+Alt+O. 

在打开一个文件夹以后该文件夹下的所有子目录和文件就会如下图一样以目录树的方式显示在主窗口左边 

E81OE[)K]F}LO@HBQL_EJXL.png

你可以通过在目录树栏中右键菜单或选中文件时使用快捷键a,m,delete来对文件进行新建,重命名,删除等操作 

如果要切换目录树栏的显示与隐藏可以使用快捷键Ctrl+\或输入命令Tree View:Toggle 

目录树中右键菜单中还能实现文件的复制粘贴等功能

查找文件

当打开一个或多个目录时,你可以: 

* 通过Ctrl+T或Ctrl+P来搜索目录中的文件 

* 通过Ctrl+B来搜索一个当前打开的文件 

* 通过Ctrl+Shift+B来搜索一个新建的或更改过的文件

当然这些功能也都支持模糊查询 

如果你需要在搜索时过滤掉一些特定的文件(比如.pyc文件)或目录(比如.git), 可以配置core.ignoredNames和fuzzy-finder.ignoredNames. 

也可以通过配置core.excludeVcsIgnoredPaths来过滤掉在.gitignore中配置的文件. 

具体的配置方法以后会讲到.