Atom编辑器的插件

时间:2021-06-18 20:35:12

先说下atom的插件安装方法吧,因为没用过苹果电脑,所以这里就只说下windows的操作吧。

ctrl+, “调出设置面板

Atom编辑器的插件

点击install按钮,进去搜索插件面板

1.expose

Atom编辑器的插件

在搜索框搜索expose,默认搜索的是packages,即插件,这里会有点慢,要等待一会儿,搜索完成后,点击install按钮,我这里是已经安装好的了,安装也要一会儿时间

安装完成后,既可以使用该插件了,快捷键是  shift+alt+e ,点击快捷键后,出现下图

Atom编辑器的插件

出现该界面后,可以直接键盘,1-9,数字进行切换,也可以←(方向键向左)和→(方向键向右)进行切换,最后enter(回车)即可进入页面。

2.color-picker

可以直接跳出颜色面板,快捷键

ctrl+alt+c

Atom编辑器的插件

3.file-icons

安装此插件后,左侧的菜单树中不同的文件会标示上不同的小图标,下面两图分别是安装之前和安装之后

Atom编辑器的插件
     
Atom编辑器的插件

4.atom-beautify

格式化代码插件,使用方法:

ctrl+shift+p

,调出搜索框输入beautify,出现如下

Atom编辑器的插件

enter第一行后代码就自动格式化

5.autoprefixer

自动补全代码前缀,写完需要补全的代码,安装后的使用方法:

1)在css或者scss文件中,直接ctrl+shift+p,调出搜索框,输入插件名

Atom编辑器的插件

如上图,使用插件后,代码自动补全

2)在html文件中,需要选中style中的css代码,在进行上面1)的操作

6.advanced-open-file

新建文件或者打开某文件的插件,这是个很有用的插件呦,快捷键:ctrl+alt+o,

Atom编辑器的插件

若要新建文件,则选择对应的目录,输入名称后回车即可,若要打开某文件,则切换至改文件下,回车即可以进入该文件

7.open-in-browers

可以是html文件直接在浏览器中打开的插件,使用方法:在文件上右键出现操作面板

Atom编辑器的插件

选择想要的浏览器即可

第二种方法,当安装完这个插件后,如果当前打开的是html文件,这文件的左下角的工具啦会出现下面图中的五种小图标,分别对应不同的浏览器,点击相应的即可

Atom编辑器的插件

8.autocomplete-paths

自动补全路径,当遇到需要输入路径的时候,这个插件可以出现提示,如下

Atom编辑器的插件

9.Build Sass

自动编译sass文件成css文件,使用方法如下

Atom编辑器的插件

10.emmet  (
!好用)

这个插件应该都知道,sublime中同样好用的插件,自动补全代码,非常好用的插件,如下

Atom编辑器的插件

输入后点击tab键变成

Atom编辑器的插件

11.cssComb

整理css的插件,使用方法:ctrl+shift+p调出搜索框,输入csscomb确定即可

Atom编辑器的插件

12.minimap

安装这个插件后,会出现类似于sublime text的右侧小地图的东西

Atom编辑器的插件

悬浮还会出现操作按钮

Atom编辑器的插件

点击操作按钮后还出现一些选项,可以自己都试试

Atom编辑器的插件

13.Bookmarks

这个插件应该是安装atom的时候自带的,不过挺好用的,中文就是字面意思:书签,快捷键如下

Windows

  • alt-ctrl-f2 

    to add/remove a bookmark on the current line 增加或者移除当前行的书签

  • ctrl-shift-f2 

    to remove all bookmarks in the current editor 去掉当前编辑框的所有书签

  • ctrl-f2 

    to view all the bookmarks 查看所有书签

  • f2 

    to move the cursor to the next bookmark 跳转到当前光标的下一个书签处

  • shift-f2 

    to move the cursor to the previous bookmark. 跳转到当前光标的上一个书签处