我的前端故事----优美的编辑器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#过滤html标签
public string HtmlFilter(string html) { //设置要删除的标记 string[] lable = { "font ...
- codeblocks16.01 中配置Opencv3 姿势
VS太大安装时间长,考虑到效率问题,可以使用opencv+codeblocks opencv3没有codeblocks版本,需要自己编译,编译过程略. 已编译版本下载地址 http://pan.bai ...
- CSS中不定宽块状元素的水平居中显示
CSS中不定宽块状元素的水平居中显示 慕课网上的HTML/CSS教程 http://www.imooc.com/view/9 其中有三种方法 第一种是加入table标签 任务是实现div元素的水平居中 ...
- 【openStack】Libcloud 如何支持 keystone V3?
Examples This section includes some examples which show how to use the newly available functionality ...
- ACM/ICPC 之 计算几何入门-叉积-to left test(POJ2318-POJ2398)
POJ2318 本题需要运用to left test不断判断点处于哪个分区,并统计分区的点个数(保证点不在边界和界外),用来做叉积入门题很合适 //计算几何-叉积入门题 //Time:157Ms Me ...
- Asp.net 解决下载乱码问题,支持火狐、IE、谷歌等主流浏览器
public static void DownFileStream(MemoryStream ms, string fileName) { if (ms !=Stream.Null) { ) { fi ...
- maven学习(中)- 私服nexus搭建
接上回继续,相信大家对maven每次都联网从国外站点下载依赖项的龟速网络已经不坎忍受了,今天先来看看如何搭建"仓库私服",目前nexus是使用比较广泛的私服软件之一,下面将介绍基本 ...
- CISCO VLAN ACL
对于cisco VLAN ACL 首先得定义 standard ACL或 extented ACL用于抓取流量 注意这里的抓取流量不是最终的对流量的操作,而是决定什么样的流量用VLAN ACL 来处理 ...
- Linux 安装Mono环境 运行ASP.NET(二)
一.安装libgdiplus 前面我们已经安装了apr.apr_util.pcre和httpd apache .现在我们来安装libgdiplus Libgdiplus是一个Mono库,用于对 ...
- Linux C编程学习之开发工具2---GDB调试器
简介 GDB是一个功能强大的交互式程序调试工具,主要工作在字符界面下. GDB不仅可以用来调试C/C++ 语言编写的程序,还可以用来调试 Pascal.Objective-C,以及Fortran等语言 ...