很多前端的同学都在用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. Android 学习资源收集

    1.2015最流行的Android组件.工具.框架大全 地址  http://www.open-open.com/lib/view/open1436262653692.html

  2. MetInfo 5.1 自动化getshell工具

    title: MetInfo V5.1 GetShell一键化工具 date: 2016-06-08 22:40:32 categories: Hacker tags: - Hacker - Tool ...

  3. BZOJ 3639: Query on a tree VII

    Description 一棵树,支持三种操作,修改点权,修改颜色,问所有与他路径上颜色相同的点的最大权,包含这两个点. Sol LCT. 用LCT来维护重边,对于每个节点在建一个set用来维护轻边,这 ...

  4. nginx windows负载均衡入门

    前言 做了几年开发,都是只管码代码,没有参与过项目的部署,为了知识体系更加完整,于是开始学习一下负载均衡.查了一下资料,觉得用nginx +iis 比较简单,于是小试牛刀. 步骤 准备工作 下载ngi ...

  5. FreeCodeCamp心得

    <img>    <input>  tags are self-closing. So that there is only one tag without a slash i ...

  6. struts2笔记

    Struts2 中, HTML 表单将被直接映射到一个 POJO,通过params拦截器,类中定义对应属性,及对应set方法即可. Struts2 中,任何一个POJO都可以是一个action类. S ...

  7. in (1,2)and in('1,2')解决

    select wm_concat(org_name) from mstorg where instr((select pass_dists from licrequests where req_no= ...

  8. js变量及其作用域(附例子及讲解)

    Javascript和Java.C这些语言不同,它是一种无类型.弱检测的语言.它对变量的定义并不需要声明变量类型,我们只要通过赋值的形式,可以将各种类型的数据赋值给同一个变量   工具/原料   Ch ...

  9. myeclipse maven 安装

    myeclipse 上安装 Maven3   环境准备: JDK 1.6.45 Maven 3.0.5 myeclipse 8.5 安装 Maven 之前要求先确定你的 JDK 已经安装配置完成.Ma ...

  10. 给DOM生成的元素添加事件

    问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 ...