我的前端故事----优美的编辑器GitHub Atom
很多前端的同学都在用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-format,markdown-writer:如果你不是Mac用户,并且十分喜欢使用markdown来写东西的话,那么你一定会爱上在Atom上写markdown的感觉~~
minimap:用过sublime text的同学一定知道右边那方便的缩略图,难道这么好用的工具Atom上会没有吗?不会!这个插件就会让你见到熟悉的缩略图,那么为什么要用插件呢?因为这个插件可以继续安装插件!你会发现一个真正强大的缩!略!图!
|
package |
说明 |
| 用过Webstrom的同学都会记得有个代码放大镜的功能,这个插件就会让你的鼠标移动到缩略图上的时候放大显示那边部分的代码 | |
| 当你想替换单词的时候你会想起ctrl+D,可以你知道全篇有多少你要替换的字符串吗?通过这个插件你就可以在缩略图上看到所有你选中的字符串 | |
| 通过这个插件,每当你修改你的代码的时候你就会在缩略图上看到和之前git中的区别 | |
|
当你选中部分代码的时候,它就会高亮的出现在缩略图中 |
|
|
这个插件让你的缩略图显示的更加漂亮和完整 |
|
|
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的更多相关文章
- Github Atom开源文本代码编辑器- 由 Github 打造的下一代编程开发利器
个人理解:Github 热度超凡的一个项目Atom,electron是整个atom的核心,对于electron可以理解成 electron =io.js + Chromium 通过 Electr ...
- Github Atom
码代码新神器-Github Atom 周末闲着没事,逛论坛发现了一个新的编辑器,由github发布的Atom编辑器.瞬间被吸引了,所以就去尝试着折腾了一下,后来发现这个编辑器确实很不错,他的特点就 ...
- 学会了 Vim 还有必要用 GitHub Atom 或者 Sublime Text 么?
亦俊 ,90后,Vim 专栏作者 563 人赞同 Vim 知乎专栏:http://zhuanlan.zhihu.com/hack-vim 用过 [ Visual Studio 2015 ] [ Sub ...
- Github Atom 1.12.0-beta3 发布
Github Atom 1.12.0-beta3 发布了,Atom 是 Github 专门为程序员推出的一个跨平台文本编辑器.具有简洁和直观的图形用户界面,并有很多有趣的特点:支持CSS,HTML,J ...
- 我的前端故事----我为什么用GraphQL
背景 今年我在做一个有关商户的app,这是一个包含商户从入网到审核.从驳回提交到入网维护的完整的生命周期线下推广人员使用的客户端软件,但故事并没有这么简单... 疑问 随着app的逐渐完善,遇到的问题 ...
- 我的前端故事----关于redux的一些思考
背景 我一个前端,今年第一份工作就是接手一个 APP 的开发...一个线下 BD 人员用的推广 APP,为了让我这个一天原生开发都没有学过的人能快速开发上线,于是乎就选择了 react-native ...
- 我的前端故事----Ajax方式和jsonp的实现区别
很久没有更新博客了,毕业2个月了,这段时间一直在忙于工作,一直没有时间更新,最近做的活动突然发现之前的经验居然忘记了...索性想想还是重新开始用博客记录平日里的工作经验吧,吐槽就到这里了,这篇记录的是 ...
- 我的前端故事----关于前端数据&逻辑的思考
最近重构了一个项目,一个基于redux模型的react-native项目,目标是在混乱的代码中梳理出一个清晰的结构来,为了实现这个目标,首先需要对项目的结构做分层处理,将各个逻辑分离出来,这里我是基于 ...
- 我的前端故事----来聊聊怎么写react-native上的样式吧
我遇到了什么问题? 不久之前我重构了一个古老的项目,总结了一些js方面的想法,不过对于一个前端项目而言不仅仅只由js组成的嘛,上学的时候老师和我说HTML+CSS+JS对应的是页面的骨架.皮肤和肌肉. ...
随机推荐
- C#基础:LINQ 查询函数整理
1.LINQ 函数 1.1.查询结果过滤 :where() Enumerable.Where() 是LINQ 中使用最多的函数,大多数都要针对集合对象进行过滤,因此Where()在LINQ 的操作 ...
- Python目录
- 利用SQLite_Expert实现Excel表转SqLite数据库
1.保留excel数据中需要的字段,删除无关字段. 2.将excel另存为cvs格式文件.<另存名称如:jizhan.cvs 则导入后表名即为jizhan> 3.看下图,新建数据库,命名为 ...
- android 移动网络实时抓包
2G.3G环境,那就必须root进去tcpdump 方式抓. 准备: 一.root CF-auto-root: http://autoroot.chainfire.eu/ 需要清理全部数据,注意备份 ...
- 点击页面判断是否安装app并打开,否则跳转app store的方法
常常有这样的场景,咱们开发出来的APP需要进行推广,比如在页面顶部来一张大Banner图片,亦或一张二维码.但往往我们都是直接给推广图片加了一个下载链接(App Store中的).所以咱们来模拟一下用 ...
- Mongodb 基础(Z)
Mongodb的客户端支持 作为一款非常成熟NoSQL数据库,Mongdb对各种编程语言的支持已经非常完善了,目前已经支持各大主流编程语言包括:1,mongo shell 2,Python 3,Jav ...
- Atom安装以及activate-power-mode atom package插件安装
1.首先安装node.js,不然没有npm命令可用. 现在很多开源程序都使用npm来管理依赖包,所以node.js必备呀. 2.去下载atom安装包和activate-power-mode-0.5.2 ...
- Servlet引擎tomcat之安装
原文来自:https://www.digitalocean.com/community/tutorials/how-to-install-apache-tomcat-8-on-ubuntu-14-04 ...
- .net中的反射(转载)
原文地址:http://www.cnblogs.com/Stephenchao/p/4481995.html 两个现实中的例子:1.B超:大家体检的时候大概都做过B超吧,B超可以透过肚皮探测到你内脏的 ...
- C#连接SQLServer数据库基本实现
(在这写下来,防止以后忘记) 在VS2012中新建一个Windows窗口应用程序,并在Form中放置DataGridView和Button两个控件,在Button的单击响应事件中连接数据库: priv ...