zoukankan      html  css  js  c++  java
  • 我的前端故事----优美的编辑器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,就是这个效果:

    12

    就问你!美!不!美!

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

    主题篇

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

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

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

    结束

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

            <( ̄▽ ̄)>

    31

  • 相关阅读:
    伪元素 first-letter
    html语义化 -------<fieldset>和<legend>
    《ASP.NET MVC4 WEB编程》学习笔记------ViewBag、ViewData和TempData的使用和区别
    《ASP.NET MVC4 WEB编程》学习笔记------.net mvc实现原理ActionResult/View
    《ASP.NET MVC4 WEB编程》学习笔记------RenderBody,RenderPage,RenderSection
    《转》Visual Studio 2010 终极定制安装精简方法
    《转》IIS中配置通配符应用程序映射
    IIS安装时,添加/编辑应用程序扩展名映射 确定按钮不可用。
    异常:操作可能会破坏运行时稳定性
    petri网学习心得
  • 原文地址:https://www.cnblogs.com/fuhuixiang/p/4840866.html
Copyright © 2011-2022 走看看