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

Atom插件及使用的更多相关文章

  1. Atom插件安装

    Atom插件安装 Atom狂拽炫酷插件之activate-power-mode 引语: 在前文中提到了关于插件的安装,似乎简单易操作,不过最后我发现是我自己想简单了. activate-power-m ...

  2. Atom插件安装及常用插件推荐

    Atom是个不错的文本编辑工具,也该可以改造成IDE用,主要靠插件实现各种扩展功能. 因为网络环境的原因,在线安装不容易成功,一般选择手动安装. 以下是我搜索网络资源后总结的手动安装方法. Atom插 ...

  3. Atom 插件安装

    “webstom” 目前还没免费版的 不过类似的倒是有个! 首先想到的一句话是:还在为webstom不是正版而发愁吗? 其实很小的时候我们的世界是非黑即白的,但慢慢长大后,发现其实还有灰色的存在! 工 ...

  4. sublime & atom 插件

    1. autofilename(sublime) autocomplete-paths (atom): 自动路径 2. autoprefixer: 自动添加前缀  : https://github.c ...

  5. atom插件

    1.Sync Settings 搭配github,同步你的atom插件信息,配置信息,让你轻松实现一台电脑配置,多台电脑共享. 2.Emmet 能够基于Emmet语法产生HTML,做过前段开发的不会不 ...

  6. Atom插件下载失败解决办法

    转自:http://www.cnblogs.com/20145221GQ/p/5334762.html#正题 一般方法(Atom自动安装) 打开Atom >> Packages >& ...

  7. 1月11日Atom 插件安装。

    查看已安装的Atom插件(前提:已经安装Atom) 打开终端 输入apm ls命令,回车. 未安装任何插件时,显示如下 Built-in Atom packages (89) ...此处省略... / ...

  8. atom插件安装引发的nodejs和npm安装血案

    最近在写前端网页,学习就要从高大上的地方开始,于是我打算装一个atom编辑器. 本来就是由github客户端的,再装个atom也算是配套了吧,其实本白也是蛮费心思的,技术不怎么地,什么神器都再努力地使 ...

  9. 离线安装ATOM插件

    refer to https://blog.csdn.net/ytangdigl/article/details/75168695 cd ~/.atom/packages git clone http ...

  10. 实用的 atom 插件

    推荐几款我喜欢的Atom插件 时间 2017-05-05 09:00:00  Hi Linux 原文  http://www.hi-linux.com/posts/28459.html 主题 Atom ...

随机推荐

  1. 【Python + Selenium】之unittest测试用例满足条件,进行跳过测试Skip

    直接上代码: __author__ = 'zc' import unittest class demoSkipTest(unittest.TestCase): a = 70 b = 50 print( ...

  2. mybaits返回插入成功后的自增值

    mybaits返回插入成功后的自增值 在项目中,我们经常遇到这样的情况:insert语句成功后,需要自增的id值,这个时候,我们可以通过mybatis的 useGeneratedKeys 来实现,具体 ...

  3. shell脚本注释方法

    [1]单行注释 利用“#”对单行进行注释. 示例应用,新建文本,命名为test_single.sh 输入内容: # 单行注释 echo '单行注释' echo '123' # echo '456' e ...

  4. hihoCoder #1312 : 搜索三·启发式搜索(A*, 康托展开)

    原题网址:http://hihocoder.com/problemset/problem/1312 时间限制:10000ms 单点时限:1000ms 内存限制:256MB   描述 在小Ho的手机上有 ...

  5. php函数unserialize数据返回false问题分析

    unserialize的这个问题是由一个emlog论坛用户在使用时报错而发现的 问题表现情况如下: emlog缓存的保存方式是将php的数据对象(数组)序列化(serialize)后以文件的形式存放, ...

  6. Window系统下MongoDB安装及远程访问

    1.编辑mongodb 安装文件夹bin\mongod.cfg 把bindIP 改为 127.0.0.1, 192.168.1.180(局域网IP) 可以参考https://blog.csdn.net ...

  7. 九度OJ 1181:遍历链表 (链表、排序)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:2733 解决:1181 题目描述: 建立一个升序链表并遍历输出. 输入: 输入的每个案例中第一行包括1个整数:n(1<=n<=1 ...

  8. bash编程基础

    bash变量 变量命名: 1.不能使用程序中的关键字(保留字) 2.只能使用数字.字母和下划线,且不能以数字开头 3.要见名知义 变量类型: 数值型:精确数值(整数),近似数值(浮点型) 字符型:ch ...

  9. win7旗舰版 安装IIS中出现的问题

    最好先安装IIS成功了,再安装VS2010或者别的版本 1.hppt 错误500.19,-Internal server erroe,无法访问的请求野蛮,因为该页的相关配置数据无效,HTTP Erro ...

  10. What is MEAN?

    MEAN.JS is a full-stack JavaScript open-source solution, which provides a solid starting point for M ...