我的前端故事----优美的编辑器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-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~~

<( ̄▽ ̄)>

时间: 2024-10-12 08:12:59

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

我的前端故事----欢乐大富翁( ̄︶ ̄)↗ (摇骰子+棋盘)

十一马上就要到了~~做为前端的小伙伴~活动页面必然是少不了了~那怎么吸引眼球呢?当然是玩游戏啦~这次就带来一个我为十一做的小游戏,作为活动页中的衬托~~ 那我们要做个什么样的游戏呢?先上图~ 由于实际的效果图因为是公司的活动,我就不贴出来了~这里用这个棋盘来大致说明一下效果咯~下面是游戏规则: 1,当用户看到棋盘的时候,棋子出现在上一次停留下来的位置: 2,当用户点击开始后,中间的骰子开始摇动,最后停止在服务器返回的数字前: 3,当骰子结束动画后,棋子还是移动,一步一步的向前移动,遇到四个顶点的

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

亦俊 ,90后,Vim 专栏作者 563 人赞同 Vim 知乎专栏:http://zhuanlan.zhihu.com/hack-vim 用过 [ Visual Studio 2015 ] [ Sublime Text 3 ] [ WebStorm 9 ] [ IDEA 14 ] [ atom ](这货尼玛有很多BUG!)等等编辑器. 我想说,只有Emacs 和 Vim 最适合我..学会Vim 之后我几乎不想换其他任何编辑器(Emacs除外,来烧死我吧),目前在玩Vim.(由于是做Web开发,

我的前端故事----轮盘转起来(+﹏+)~

转眼间,马上又到了中秋了,忽然想到了有到了做活动的日子了~每逢佳节必活动的传统一直是我们前端的职责所在,去年我介绍了游戏机,大富翁,那今年的活动就来个轮盘开奖吧~其实这个东西在 pc 端上已经烂大街了,无数的 demo,插件可以帮助我们实现这个功能,所以我也就随大流的去找了个知名的 jQuery 插件去实现这个功能,可惜我做的是移动端的开发...平时基本都是原生 javaScript 做开发,顶多上一个 zepto,为了这个功能上一个 jQuery 总觉得不是那么地道,不过现在的jquery压缩

前端开发工程师必备编辑器:Sublime Text2

Sublime Text2有这么几个优点: 1.速度飞快.2.界面简洁.3.功能强大.4.插件众多.5.快捷键多.6.可以不保存关闭下次再开编辑.7.界面好看,可定制. 当然它最重要的还是插件众多,使得它的功能庞大. 安装Sublime Text 2插件的方法: 1.直接安装 安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录(菜单->preferences->packages). 2.使用Package Control组件安装 也可以安装package

我的前端故事----来聊聊react-native应用的健康监控

监控什么 今天我们来聊聊如何监控你的应用程序,这里的监控说的不是让我们去监控用户,而是监控应用的健康状态,什么是健康状态呢?对于后端的同学来说,在微服务的架构下,每个子服务是否正常工作.返回的结果是否满足预期,这些就算是健康状态,再举个例子,你的台式机,对于操作系统来说,每个硬件是否能正常的工作.工作的稳定性,这些都是需要关注的健康状态. 既然我们关心健康状态,那么我们该如何衡量一个"设备"的健康状态呢?对于上面的例子,CPU运行的温度.硬盘读取的速度.子服务执行的效率,这些都可以作为

github atom创建自己的语法高亮

使用atom一段时间了,有些插件还不是很成熟.比如项目中使用protobuf,早就有人写了语法高亮(https://github.com/podgib/atom-protobuf),但是效果不是很好.于是决定自己写一个. atom linux的配置目录在~/.atom下,里面有一个packages目录,所有安装的插件(或者叫做包)都在这里.所有在这里的包在启动时都会自动加载.因此,我们直接在这里创建一个包. cd .atom/packages mkdir language-protobufcd

github atom 试用

github的编辑器atom 1.0已经出来了,在https://atom.io/ 我之前在win上一直用notepad++写了两年脚本.最近改写lua了,项目组统一用的sublime text.sublime text在win下输入中文光标不跟随(好像有解决办法,没去折腾),而在ubuntu下直接是没法输入中文.看到atom出来了,赶紧试用一把. 说实在的,跟sublime text还是很像的,快捷键ctrl+p这些都一样.所以使用上就不说什么了,说一下设置.atom的设置界面比sublime

工具篇-编辑器(Atom &amp; Sublime Text3)初体验

如何优雅地使用Sublime Text 折腾了一下Atom和Sublime Text编辑器,之前在Windows下处理文本主要用的是UltraEdit,打开文件编辑用的Gvim. 就自己之前的体验(linux后台开发),从Windows用SecureCRT连接到服务器,平常也有些需要记录的文本,说脱离鼠标操作很不显示,很多时候还是要用鼠标来切换.选择复制.粘贴等等,仅仅追求纯键盘操作的话其实比较影响效率. 而造成这种问题的原因是没有选对工具.试了一下这两款编辑器,结合vim插件和各种其他插件,便

前端常用插件、工具类库汇总(下)

前言 对本文感兴趣可以先加个收藏,也可以转发分享给身边的小伙伴,以后遇到类似的场景就来看看具体的插件及其用法. 上一篇<前端常用插件.工具类库汇总(上)>内容摘要: " 动画库 滚动库 轮播图 滚屏 弹出框 消息通知 下拉框 级联选择器 颜色选择器 时间日期处理 表单验证 分页插件 " >>前端常用插件.工具类库汇总(上) 本篇延续上一篇的内容继续给大家带来一系列关于前端插件.工具类的内容. 富文本编辑器 wangEditor http://www.wanged