Atom插件及使用

Atom比较好用的编辑工具之一,之前用过 HBuilder 和 Sublime Text ,个人感觉HBuider适合初级人们的人用。

Atom好处之一是他的packages管理安装非常方便,你也可以选择各种你喜欢和需要用的插件,Sublime Text也有很多插件但是管理上来看比Atom弱了一些。

下面是Atom的一些好用的前端web开发插件:

 备注:点击插件名可以看到详细介绍

1.Emmet

他的前身是大名鼎鼎的Zen coding,可以快速生成代码,提高编码速度

 

2.atom-beautify

代码格式化,windows快捷键是ctrl+alt+b,Mac快捷键是control+command+b

 

3.autocomplete-paths

文件路径自动提示

 

4.autoprefixer

css前缀自动补全,超级方便有没有

5.csscomb

使用这个工具可以帮助你重新排列CSS中定义的属性,帮助你按照你预定义的排序格式生成新的CSS 戳这了解更多 (小伙伴也可以自行百度)

 

6.open-in-browser

右键左侧菜单让html在浏览器中打开,不用再去文件里双击啦~

 

7.open-in-browsers

和上一个差不多的功能,看你喜欢那个了

 

8.color-picker

取色器,快捷键CMD-SHIFT-C/CTRL-ALT-C

9.minimap

类似sublim text右边的代码缩略图

10.linter

顶级插件,如果你用到 linter-jshint 之类的插件就需要安装

 

11.linter-jshint

Linter plugin for JavaScript, using jshint(和第12一个作用,如果装了linter就安装这个)

 

12.jshint

检查你的javascript代码

 

13.javascript-snippets

js片段代码自动补全,就像用emmet写html一样 查看示例

 

14.atom-ternjs

该插件能对一个对象中拥有的对外提供的属性和方法都能通过suggest的形式提示出来,能对一个对象对外提供的接口有一个选择过程,可以理解为js代码自动提示。

15.file-icons

左侧树状图下,根据文件类型左侧显示不同图标

16.activate-power-mode

超酷的写代码效果,写代码的时候会有碎片飞起

17.highlight-selected

选择某段代码自动高亮相同代码,还有个minimap-highlight-selected可以小的缩列图里的代码也高亮见第18

18.minimap-highlight-selected

这是个可以小的缩列图里的代码也高亮

19.pigments

编辑器中直接查看代码所代表的颜色,工具虽小但是很实用

20.docblockr

智能代码注释,让注释更有规范

 

21.js-hyperclick

js变量、方法点击跳转,(备注:还需要安装 hyperclick 插件)

22.atom-html-preview

atom 代码编辑实时预览html页面

 

23.simplified-chinese-menu

汉化中文包,有需要的安装,其实英文看习惯了也还好

 

24.git-plus

在 Atom 里面执行 Git 命令,不用来回切换终端和编辑器 

 

25.git-control

git面板 

 

26.autoclose-html

自动闭合html标签

 

这有个其他的博客,也有许多插件:http://blog.csdn.net/qq_30100043/article/details/53558381

posted @ 2017-02-23 16:15  为师灭了你  阅读(10523)  评论(0编辑  收藏  举报