很多前端的同学都在用sublime text,我之前也在使用,但是后来接触到了Atom,就被它的高颜值深深的吸引了~~不愧是GitHub的工程师哦~审美就是高  Atom

作为一个跨平台的编辑软件,安装和使用都是十分的方便,刚刚接触的同学也很容易在上面找到sublime text的影子,这非常方便像我这样的人搬过来,那么最基础我就不介绍了,今天这篇就给刚刚接触Atom的同学带来一些常用的插件,你会发现,原来Atom可以变得更美丽~~

插件篇

效果可在插件首页中查看

atom-beautify:这是个美化代码的插件,几乎支持所有主流的语言,完全可以满足前端同学的使用。

autocomplete-paths:常用IDE的同学会常常在引入图片的时候发现只要输入 . 或者/ 或者文件夹名称的时候就会自动显示出文件夹中的内容,非常的实用,强烈推荐。

autoprefixer:很多前端的同学在写css样式的时候常常忘记了添加兼容性前缀,例如-webkit-等内容,所以在写完css之后只需要这个插件就可以自动的帮你添加好所有需要的兼容性前缀。

color-picker: 作为一个有审美的设计向前端,常常需要确认自己的颜色属性是否是完美的,那么就需要这个插件,你就可以在任何一种颜色属性上看到一个完整的取色器。

docblockr: 我们不仅仅要写代码,还要养成写好注释的习惯,而经常看开源框架的同学会发现那些大神的代码前都会有一段完美的注释,写清了所有的参数和使用方式,你会觉得大神不仅仅代码专业,态度也是非常的认真,其实,有了这个插件,你仅仅需要一个tab键就可以写出一样专业的注释!强烈推荐!!!

emmet:用sublime text的同学都知道这个插件,我这里就不多说了。

file-icons:你不觉得每一个文件前面都要有个漂亮的图标嘛~没错,你就需要它!

grunt-runner:作为一个前端,grunt相信大家都听说过,因为这个插件你就可以直接在编辑器里面操作你的grunt任务了。

git-plus:虽然原生的Atom就支持了git命令,但是这个插件会让你更加喜欢在Atom中使用git,这非常方便在Windows上使用git的同学。

linter:你觉得你的代码写的很不专业吗?这个插件会自动提示你代码中不规范的地方,如果你希望得到更完整的提示的话可以尝试更加详细的系列,例如linter-jshint

markdown-formatmarkdown-writer:如果你不是Mac用户,并且十分喜欢使用markdown来写东西的话,那么你一定会爱上在Atom上写markdown的感觉~~

minimap:用过sublime text的同学一定知道右边那方便的缩略图,难道这么好用的工具Atom上会没有吗?不会!这个插件就会让你见到熟悉的缩略图,那么为什么要用插件呢?因为这个插件可以继续安装插件!你会发现一个真正强大的缩!略!图!

package

说明

minimap-codeglance

用过Webstrom的同学都会记得有个代码放大镜的功能,这个插件就会让你的鼠标移动到缩略图上的时候放大显示那边部分的代码

minimap-find-and-replace

当你想替换单词的时候你会想起ctrl+D,可以你知道全篇有多少你要替换的字符串吗?通过这个插件你就可以在缩略图上看到所有你选中的字符串

minimap-git-diff

通过这个插件,每当你修改你的代码的时候你就会在缩略图上看到和之前git中的区别

minimap-highlight-selected

当你选中部分代码的时候,它就会高亮的出现在缩略图中

minimap-linter

这个插件让你的缩略图显示的更加漂亮和完整

apm install

说了这么多,我们如何给缩略图安装插件呢?通过这个命令就可以在命令行中下载安装你需要的缩略图插件了

project-manager:做完一个前端狗,我相信你开发的不仅仅只有一个项目吧~那么你就需要这个插件来在一个Atom中管理你所有的项目。

javascript-snippets:这个插件也是我强烈推荐的!!!你以为只有html才有Emmet吗?太年轻了你!这个插件会告诉你javascrpt也有Emmet一样的插件!只需要输入几个字母,一个tab就让你完成了一长串的代码!!

expose:当你一次性打开多个文件的时候也许你会使用分屏来查看,但是我相信你的屏幕不会大到让你无限的分屏,那么就需要在多个文件中切换,或者是查看多个文件,那么你可以点击最上边的标签,那有没有更方便的呢?有的!!那就是这个插件,shift+atl+e,就是这个效果:

就问你!美!不!美!

vim-mode:如果你是个忠诚的vim党,我相信这个插件你一定会喜欢的!

主题篇

虽然原生的Atom就很漂亮了,但是既然Atom那么注重插件,主题用插件也是很常见的,在这里我就推荐我一直使用和十分推荐的一个主题,atom-material-ui,为什么我还要用这个插件呢?因为这个插件不仅仅配色很好看,更重要的是它有很多的动画,让你的编辑器更加生动,你会更喜欢它的,每天打码的心情都会好很多哦~

但是有个注意的地方,如果你使用了酷炫的expose插件的话,需要在主题的插件中将

这里关闭,否则expose插件不会出现那么酷炫的效果。

结束

今天就到这里了,最后上一张我目前编辑器的全家福~虽然费力几天的时间去调配自己喜欢的编辑器,但是我就是喜欢折腾这个漂亮的编辑器,每天打码都看着这个漂亮的家伙~不仅仅心情愉悦~打码的效率都高了~2333~~

<( ̄▽ ̄)>

我的前端故事----优美的编辑器GitHub Atom的更多相关文章

  1. Github Atom开源文本代码编辑器- 由 Github 打造的下一代编程开发利器

    个人理解:Github 热度超凡的一个项目Atom,electron是整个atom的核心,对于electron可以理解成 electron =io.js + Chromium    通过 Electr ...

  2. Github Atom

    码代码新神器-Github Atom   周末闲着没事,逛论坛发现了一个新的编辑器,由github发布的Atom编辑器.瞬间被吸引了,所以就去尝试着折腾了一下,后来发现这个编辑器确实很不错,他的特点就 ...

  3. 学会了 Vim 还有必要用 GitHub Atom 或者 Sublime Text 么?

    亦俊 ,90后,Vim 专栏作者 563 人赞同 Vim 知乎专栏:http://zhuanlan.zhihu.com/hack-vim 用过 [ Visual Studio 2015 ] [ Sub ...

  4. Github Atom 1.12.0-beta3 发布

    Github Atom 1.12.0-beta3 发布了,Atom 是 Github 专门为程序员推出的一个跨平台文本编辑器.具有简洁和直观的图形用户界面,并有很多有趣的特点:支持CSS,HTML,J ...

  5. 我的前端故事----我为什么用GraphQL

    背景 今年我在做一个有关商户的app,这是一个包含商户从入网到审核.从驳回提交到入网维护的完整的生命周期线下推广人员使用的客户端软件,但故事并没有这么简单... 疑问 随着app的逐渐完善,遇到的问题 ...

  6. 我的前端故事----关于redux的一些思考

    背景 我一个前端,今年第一份工作就是接手一个 APP 的开发...一个线下 BD 人员用的推广 APP,为了让我这个一天原生开发都没有学过的人能快速开发上线,于是乎就选择了 react-native ...

  7. 我的前端故事----Ajax方式和jsonp的实现区别

    很久没有更新博客了,毕业2个月了,这段时间一直在忙于工作,一直没有时间更新,最近做的活动突然发现之前的经验居然忘记了...索性想想还是重新开始用博客记录平日里的工作经验吧,吐槽就到这里了,这篇记录的是 ...

  8. 我的前端故事----关于前端数据&逻辑的思考

    最近重构了一个项目,一个基于redux模型的react-native项目,目标是在混乱的代码中梳理出一个清晰的结构来,为了实现这个目标,首先需要对项目的结构做分层处理,将各个逻辑分离出来,这里我是基于 ...

  9. 我的前端故事----来聊聊怎么写react-native上的样式吧

    我遇到了什么问题? 不久之前我重构了一个古老的项目,总结了一些js方面的想法,不过对于一个前端项目而言不仅仅只由js组成的嘛,上学的时候老师和我说HTML+CSS+JS对应的是页面的骨架.皮肤和肌肉. ...

随机推荐

  1. Jni 调试 : eclipse + Vs 联合调试

    摘要: 本文原创,转载请注明地址 http://www.cnblogs.com/baokang/p/4982640.html 1.在Eclipse 中,Java 类中链接库引用到vs的debug目录下 ...

  2. yii2 登录用户和未登录用户使用不同的 layout

    可以在配置文件中增加一个 “beforeRequest” 事件: 'on beforeRequest' => function () { Yii::$app->layout = Yii:: ...

  3. Http原理理解及内容整理

    更多资料及交流请加群:

  4. DNS解析过程详解

    先说一下DNS的几个基本概念: 一. 根域 就是所谓的“.”,其实我们的网址www.baidu.com在配置当中应该是www.baidu.com.(最后有一点),一般我们在浏览器里输入时会省略后面的点 ...

  5. Linux下编译安装MariaDB

    MariaDB是MySQL的一个开源分支,主要是社区在维护,并且完全兼容MySQL,并且可以很方便的称为MySQL的替代,MariaDB的诞生正是出自MySQL创始人Michael Widenius之 ...

  6. js 实现图片实时预览

    <body> 上传图片: <input type="file" name="file" style="width: 200px; h ...

  7. POJ 2299 Ultra-QuickSort 线段树

    题目链接 题意:求冒泡排序的交换次数,即求逆序数,即求对于每个数前面有多少个数比他大,n < 500,000,0 ≤ a[i] ≤ 999,999,999. 题解:因为值较大,个数较少,所以我们 ...

  8. WINFORM时间控件(DATATIMEPICKER)的显示格式设置

    将DateTimePicker控件拖出来后打开属性,找到Format属性,选择Costum选项: 然后找到CustomFormat属性,按照你要显示的格式来输入,示例如下: 若系统时间为:2016年1 ...

  9. java 多态和内部类

    接口跟接口之间存在继承关系 一个接口可以继承多个接口 一个非抽象类:必须实现接口中的所有方法 一个抽象类实现接口  可以不实现接口中的方法  但是继承与抽象类的类必须要是实现接口中的方法 多态:一个对 ...

  10. Android 如何判断一个应用在运行(转)

    Android 如何判断一个应用在运行  在一个应用中,或一个Service .Receiver中判断一个应用是否正在运行,以便进行一些相关的处理. 这个时候我们需要得到一个ActivityManag ...