初次接触这个编辑器,发现比sublime好用。折腾一上午,由于各种不懂尤其是安装插件浪费好长时间,其实很简单。废话不多说,直接开始。(希望能够对你有帮助)

1.下载

​Atom官网​

windows下Atom安装与使用_javascript

下载之后双击文件AtomSetup-x64.exe

windows下Atom安装与使用_快捷键_02

运行有点慢,稍微等一会。之后显示这个界面

windows下Atom安装与使用_快捷键_03

2. 配置环境变量

安装Atom过程太轻松了什么都不需要,是不是有点慌,安装在哪里呢?
由于我们安装插件需要用到apm这里命令,这里需要将其添加到环境变量里面,如图。
在桌面Atom图标→右击→属性→查看安装位置。我的安装位置是在:C:\Users\erdou\AppData\Local\atom。
现在配置环境变量:在PATH后面添加

;C:\Users\erdou\AppData\Local\atom\bin
  • 1

注意前面有一个英文状态分号。
这样就可以使用apm命令了。

windows下Atom安装与使用_快捷键_04

打开命令窗口看是否可以使用apm
Win+R → cmd → apm ls
查看安装了哪些包:

apm ls
  • 1

如果没有安装插件会显示:

Community Packages (0) 
  • 1

windows下Atom安装与使用_快捷键_05

后来发现其实也可以不用配置apm环境变量。有npm就可以了。不知道会不会有影响(如果有问题后续会完善)。

菜单栏

File

文件的保存打开,项目的保存打开,最后一次的项目加载,关闭及设置中心,以及用户自定义的配置(配置文件,初始化脚本,样式风格,代码片段,快捷键配置文件)等

Edit

文件编辑的操作,文件编码格式,及行跳转等

View

重载页面,全屏,字体大小的缩放等

Find

都是关于查询的 ,跟Sublime text极其相似,快捷键基本一样

Package

包,就是插件列表的集合点

Help

帮助文档,软件更新,协议等

3. 更改atom主题

windows下Atom安装与使用_javascript_06

下载方法:在install页搜索seti_ui等主题名称即可,(主题seti_ui的作者:jesseweed)

4.atom插件安装

1.方法一、

这是最简单的插件安装,但可能会安装很慢。(如果安装特别慢,就直接用方法二)

windows下Atom安装与使用_快捷键_07

2.方法二、

以安装emmet插件为例子:

  • Ctrl+Shift+P: 打开面板
  • 输入:install packages选择install Packages Themes
  • 输入要安装的插件名字emmet
  • 点入插件介绍 找到github地址
  • 打开git切换到 C:\Users\erdou.atom\packages
  • ​git clone https://github.com/emmetio/emmet-atom​
  • 切换到安装的插件文件夹​​cd emmet-atom​
  • ​npm install​
  • 重启Atom

下面是参考:

cd ~/.atom/packages
git clone https://github.com/emmetio/emmet-atom
cd emmet-atom
npm install


3.前端必备插件

  • atom-html-preview — 浏览器实时预览效果 (得更改快捷键,快捷键更改方法在下面)
  • color-picker — 取色器,太赞了有木有,,比sublime那个好用,不卡,启动超快
  • emmet — HTML,CSS快速编写的神器,emmet官网还有视频演示
  • atom-ternjs—-JavaScript 自动补全插件还可以配置语言版本和脚本库
  • docblockr — 代码注释工具,提供代码注释的模板
  • jquery-snippets — jQuery 代码段
  • javascript-snippets — JavaScript 代码段
  • atom-ternjs — JavaScript 自动补全插件还可以配置语言版本和脚本库
  • atom-beautify — 格式化代码
  • autocomplete-paths — 路径补全,比如下找到某个图片的位置
  • autocomplete-sass — sass 语法自动补全
  • atom-bootstrap3 — bootstrap3代码提示
  • autocomplete-plus — 完善自带autocomplete 代码自动补全插件
  • autoprefixer — 自动给 css 文件中的属性添加厂商前缀
  • project-manager — 强大的,快速的打开项目的插件,非常的有用
  • run-in-browser — 将当前的 html 在浏览器中打开
  • open-in-browser — 将当前的 html 在浏览器中打开
  • linter — 代码验证插件 (下面是前端可能用到的)
  • linter-jshint, for JavaScript and JSON, using jshint
  • linter-coffeelint, for CoffeeScript, using coffeelint
  • linter-scss-lint, for SASS/SCSS, using scss-lint
  • linter-less, for LESS, using less
  • linter-csslint, for CSS, using csslint

显示效果插件

  • react — 对 react 语法高亮支持,并且有补全效果
  • file-icons — 在目录树 tree-view 的文件前面加上响对应的 logo
  • highlight-column — 高亮当前光标所在的列
  • highlight-line — 高亮当前光标所在的行
  • highlight-selected — 在当前编辑的文件中高亮全部匹配的单词
  • pigments — 对 css 文件中使用的颜色进行响应颜色的高亮
  • minimap — 用过Sublime Text的都知道有一个很实用的功能,就是内部编辑有一个小小的代码图,这货就是补全atom这个功能的,支持高亮代码

美化篇插件

  • file-icons — 增加许多图标,在侧边蓝文件名前面的icon,,很赞
  • filetype-color — amazing,,在标签栏不同格式文件显示不同的颜色的标题,支持二度设置
  • color-picker — 调色板,可以选中自己钟意的颜色,而且可以在面板中调整透明度

markdown写作工具插件

  • markdown-scroll-sync—-编写 markdown 可以根据写到的部位,右边预览可以实时的滚动
  • markdown-table-formatter—-对 markdown 语法绘制的表格格式化

协作篇插件

  • git-plus — 与Sublime Text 的sublimegit功能基本一致

(有好的插件会继续更新补充)

5.如何更改Atom快捷键

1.打开keymap.cson文件:

windows下Atom安装与使用_javascript_08

2.把要改的快捷键写在最下面,依次添加。

windows下Atom安装与使用_快捷键_09

  'atom-text-editor':
# F12在浏览器预览html页面
  'f12':'rib:run-in-browser'
#右边栏实时浏览器调用快捷键
  'ctrl-F12':'atom-html-preview:toggle'

6. 快捷键

英文

中文

快捷键

功能

New Window

新建界面窗口

Ctrl + Shift + N

如中文意思

New File

新建文件

Ctrl + N

如中文意思

Open File

打开文件

Ctrl + O

如中文意思

Open Folder

打开文件夹

Ctrl + Shift + O

如中文意思

Add Project Folder

加载项目目录

Ctrl + Alt + O

如中文意思

Reopen Last Item

重新加载上次项目

Ctrl + Shift + T

如中文意思

Save

保存文件

Ctrl + S

如中文意思

Save As

另存为

Ctrl + Shift +S

如中文意思

Close Tab

关闭当前编辑文档

Ctrl + W

如中文意思

Close Window

关闭编辑器

Ctrl + Shift + W

如中文意思

Undo

撤销

Ctrl + Z

如中文意思

Redo

重做

Ctrl + Y

如中文意思

Cut

剪切

Shift + Delete

如中文意思

Copy

复制

Ctrl + Insert

如中文意思

Copy Path

复制文档路径

Ctrl + Shift + C

如中文意思

Paste

粘贴

Shift + Insert

如中文意思

Select All

全选

Ctrl + A

如中文意思

Select Encoding

选择编码

Ctrl + Shift +U

就是设置文件的编码

Go to Line

跳转到某行

Ctrl + G

支持行列搜索,Row:Column

Slect Grammar

语法选择

Ctrl + Shift + L

和Sublime的Syntax设置功能一样

Reload

重载

Ctrl+ Alt +R

重新载入当前编辑的文档

Toggle Full Screen

全屏

F11

如中文意思

Increase Font Size

增大字体

Ctrl + Shift + “+”

Sublime的Ctrl + 也能生效

Decrease Font Size

减小字体

Ctrl + Shift + “-“

Sublime的Ctrl - 也能生效

Toggle Tree View

展示隐藏目录树

Ctrl +

Sublime的Ctrl+K,+B这里也可以生效

Toggle Commadn palette

全局搜索面板

Ctrl + Shift + P

和Sublime的大同小异

Select Line

选定一行

Ctrl + L

如中文意思

Select First Character of Line

选定光标至行首

Shift + Home

如中文意思

Slect End of Line

选定光标至行尾

Shift + End

如中文意思

Select to Top

选定光标处至文档首行

Ctrl + Shift + Home

就是光标处作为分割线,取文档上部分

Select to Bottom

选定光标处至文档尾行

Ctrl + Shfit + End

就是光标处作为分割线,取文档下部分

Find in Buffer

从缓存器搜索

Ctrl + F

与Sublime一致

Replace in Buffer

高级替换

Ctrl + Shift + F

与Sublime一致

Select Next

匹配选定下一个

Ctrl + D

和Sublime一模一样有木有

Select All

匹配选定所有

Alt + F3

和Sublime一模一样有木有

Find File

查询文件,选定打开

Ctrl + P

与Sublime不一样

Delte End of Word

删除光标处至词尾

Ctrl + Del

如中文意思

Duplicate Line

复制当前行追加到后面

Ctrl + Shift + D

如中文意思

Delete Line

删除一行

Ctrl + Shift + K

如中文意思

Toggle Comment

启用注释

Ctrl + /

与Sublime一致

Toggle developer tools

打开Chrome调试器

Ctrl + Alt + I

神奇啊

Indent

增加缩进

Ctrl + [

向右缩进

Outdent

减少缩进

Ctrl + ]

向左缩进

Move Line Up

行向上移动

Ctrl + up

如字面意思

Move Line Down

行向下移动

Ctrl + Down

如字面意思

Join Lines

行链接

Ctrl + J

追加

newline-below

光标之下增加一行

Ctrl + Enter

与sublime 一致

editor:newline-above

光标之上增加一行

Ctrl + Shift + Enter

与sublime 一致

pane:show-next-item

切换编辑的标签页

Ctrl + Tab

如中文意思

Fuzzy Finder

文件跳转面板

Ctrl + T

如字面意思

Select Line Move above

选中行上移

Ctrl + up

如中文意思

Select Line Move below

选中行下移

Ctrl + down

如中文意思

Symbol-view

进入变量、函数跳转面板。

Ctrl + R

如中文意思