Atom插件及使用
Atom比较好用的编辑工具之一,之前用过 HBuilder 和 Sublime Text ,个人感觉HBuider适合初级人们的人用。
Atom好处之一是他的packages管理安装非常方便,你也可以选择各种你喜欢和需要用的插件,Sublime Text也有很多插件但是管理上来看比Atom弱了一些。
下面是Atom的一些好用的前端web开发插件:
备注:点击插件名可以看到详细介绍
1.Emmet:
他的前身是大名鼎鼎的Zen coding,可以快速生成代码,提高编码速度
代码格式化,windows快捷键是ctrl+alt+b,Mac快捷键是control+command+b
文件路径自动提示
4.autoprefixer:
css前缀自动补全,超级方便有没有

5.csscomb:
使用这个工具可以帮助你重新排列CSS中定义的属性,帮助你按照你预定义的排序格式生成新的CSS 戳这了解更多 (小伙伴也可以自行百度)
右键左侧菜单让html在浏览器中打开,不用再去文件里双击啦~
和上一个差不多的功能,看你喜欢那个了
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代码
js片段代码自动补全,就像用emmet写html一样 查看示例
14.atom-ternjs:
该插件能对一个对象中拥有的对外提供的属性和方法都能通过suggest的形式提示出来,能对一个对象对外提供的接口有一个选择过程,可以理解为js代码自动提示。

15.file-icons:
左侧树状图下,根据文件类型左侧显示不同图标

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

选择某段代码自动高亮相同代码,还有个minimap-highlight-selected可以小的缩列图里的代码也高亮见第18
18.minimap-highlight-selected:
这是个可以小的缩列图里的代码也高亮
19.pigments:
编辑器中直接查看代码所代表的颜色,工具虽小但是很实用
20.docblockr
智能代码注释,让注释更有规范
js变量、方法点击跳转,(备注:还需要安装 hyperclick 插件)
atom 代码编辑实时预览html页面
汉化中文包,有需要的安装,其实英文看习惯了也还好
24.git-plus
在 Atom 里面执行 Git 命令,不用来回切换终端和编辑器
25.git-control
git面板
自动闭合html标签
这有个其他的博客,也有许多插件:http://blog.csdn.net/qq_30100043/article/details/53558381
Atom插件及使用的更多相关文章
- Atom插件安装
Atom插件安装 Atom狂拽炫酷插件之activate-power-mode 引语: 在前文中提到了关于插件的安装,似乎简单易操作,不过最后我发现是我自己想简单了. activate-power-m ...
- Atom插件安装及常用插件推荐
Atom是个不错的文本编辑工具,也该可以改造成IDE用,主要靠插件实现各种扩展功能. 因为网络环境的原因,在线安装不容易成功,一般选择手动安装. 以下是我搜索网络资源后总结的手动安装方法. Atom插 ...
- Atom 插件安装
“webstom” 目前还没免费版的 不过类似的倒是有个! 首先想到的一句话是:还在为webstom不是正版而发愁吗? 其实很小的时候我们的世界是非黑即白的,但慢慢长大后,发现其实还有灰色的存在! 工 ...
- sublime & atom 插件
1. autofilename(sublime) autocomplete-paths (atom): 自动路径 2. autoprefixer: 自动添加前缀 : https://github.c ...
- atom插件
1.Sync Settings 搭配github,同步你的atom插件信息,配置信息,让你轻松实现一台电脑配置,多台电脑共享. 2.Emmet 能够基于Emmet语法产生HTML,做过前段开发的不会不 ...
- Atom插件下载失败解决办法
转自:http://www.cnblogs.com/20145221GQ/p/5334762.html#正题 一般方法(Atom自动安装) 打开Atom >> Packages >& ...
- 1月11日Atom 插件安装。
查看已安装的Atom插件(前提:已经安装Atom) 打开终端 输入apm ls命令,回车. 未安装任何插件时,显示如下 Built-in Atom packages (89) ...此处省略... / ...
- atom插件安装引发的nodejs和npm安装血案
最近在写前端网页,学习就要从高大上的地方开始,于是我打算装一个atom编辑器. 本来就是由github客户端的,再装个atom也算是配套了吧,其实本白也是蛮费心思的,技术不怎么地,什么神器都再努力地使 ...
- 离线安装ATOM插件
refer to https://blog.csdn.net/ytangdigl/article/details/75168695 cd ~/.atom/packages git clone http ...
- 实用的 atom 插件
推荐几款我喜欢的Atom插件 时间 2017-05-05 09:00:00 Hi Linux 原文 http://www.hi-linux.com/posts/28459.html 主题 Atom ...
随机推荐
- PHP -- 问题
@.源码安装,最开始,自己通过 ./config make make install三步,啥参数也没加,安装好之后,发现/usr/local/php下就一个man文件夹,死都没找到php-fpm之 ...
- 使用badboy录制脚本 结合Jmeter一起测试。
1.badboy介绍 Badboy是一款不错的Web自动化测试工具,如果你将它用于非商业用途,或者用于商业用途安装Badboy 的机器数量不超过5台,你是不需要为它支付任何费用的.Badboy提供了将 ...
- js浅度克隆/深度克隆
首先弄明白几个概念: 一. 具体数据类型分为两种: 1.原始数据类型 2.引用数据类型 原始数据类型存储的是对象的实际地址,包括: number.string.boolean.还有两个特殊的nul ...
- html5小趣味知识点系列(一)spellcheck
发现一些h5的系ode知识点增加一些趣味性 实用性 不敢妄自评论 觉得有用就用一下 没用就路过一下 spellcheck属性 它的功能是针对用户输入的文本内容进行拼写和语法检查 用于input 和 ...
- ASP.NET动态网站制作(14)-- CSS3
前言:这节课主要讲解CSS之前没有讲到过的知识点以及CSS3的一些内容. 内容: 1.内容参考博文:http://www.cnblogs.com/ruanmou/p/4832214.html. 后记: ...
- windows下php配置redis
方法/步骤 1.使用phpinfo()函数查看PHP的版本信息,这会决定扩展文件版本 2.根据PHP版本号,编译器版本号和CPU架构, 选择php_redis-2.2.5-5.5-ts-vc11- ...
- 爬虫入门【1】urllib.request库用法简介
urlopen方法 打开指定的URL urllib.request.urlopen(url, data=None, [timeout, ]*, cafile=None, capath=None, ca ...
- ubuntu下操作端口的方法
最简单的一个操作:sudo ufw status可检查防火墙的状态,我的返回的是:不活动 sudo ufw version防火墙版本: ufw 0.29-4ubuntu1 Copyright 2008 ...
- Latent Activity Trajectory (LAT)
https://www.microsoft.com/en-us/research/wp-content/uploads/2016/02/funcZone_TKDE_Zheng.pdf Specific ...
- 1.搭建Django开发环境
1.安装python(版本3.5.1) 官网下载:https://www.python.org/downloads/release/python-351/2.更新pip 命令:python -m pi ...