看之前
首先,看这篇文章之前,你应该知道如何查找和安装atom插件,如果不会的话,那也不要紧。
对不起,我不教。
O(∩_∩)O~,开玩笑的。
安装方法
- 打开Atom的设置——Install-然后直接搜索插件名字,找到插件后直接点击install按钮就可以了。
打开终端工具,直接输入
1apm install atom-clockatom-clock
就是插件的名字
干货(根据你自己需求安装)
atom-clock
显示系统时间
这基本上是给mac用户的一个插件,因为时间显示的地方是在Atom界面的右下角,windows系统时间默认就是在右下角,全屏也会在右下角有系统时间显示,除非你隐藏任务栏;然而mac系统是在右上角显示时间,全屏后就不会显示了。
atom-beautify
让代码格式更规范好看些
file-icons
文件图标
里面有海量的图标,每种不同的文件都有不用的图标来显示,装完之后,atom瞬间上了一个档次。
minimap
迷你地图
在你的atom右上角显示一个迷你地图,鼠标移上去后有齿轮,可以设置
autocomplete-modules
模块名自动补全
autocomplete-paths
自动文件路径提示
很方便的一个插件,如果安了插件,你的路径都是全拼出来的,那拼错的的概率很大
simplified-chinese-menu
简体中文包
英文不是很好的同学可以下载使用这个插件,但是有时候会导致设置页面的错位的情况,自己看情况使用。
atom-bootstrap3
bootstrap 的自动代码提示
bootstrap 的class名那么长,谁能记得住啊,记住用法才是重点,名字就交给这个插件。
没图就不能脑补了吗?
open-in-browser
打开浏览器预览
前端程序猿的开发利器,直接会在右键菜单里添加open-in-browser的选项,点击就能打开浏览器了,但是打开的是默认的浏览器
身为一个程序猿,这还需要图?
browser-plus
打开atomn内置浏览器预览页面
也是右键选择打开,内置浏览器用的是webkit的内核
open-in-browsers
打开更多的浏览器
请注意:和上上个插件open-in-browser
不一样,多了一个s,但是功能强大了很多,
右键你的html文件打开选项,tip:鼠标放到文字上右键,否则自己领悟痛苦把。
直接点击按钮,在atom的左下角,分别是:IE,Google Chrome,Firefox,Opera,Safari,(最后一个你应该猜的出来,猜不出来也没关系,说明你比一般人笨一点而已。)
simple-drag-drop-text
拖动代码段
不需要拷贝加粘贴,直接选中你要拖动的代码段,然后按住鼠标直接拖动到指定位置
我就是图
color-picker
取色器
当你需要颜色的时候,在任意位置,shift
+command
+c
键直接出来取色界面,(windows用户脑补键位)
css-color-name
提示颜色代码
pigments
color name 和rgba还有其他的一些颜色类代码,让他们在编译器页面显示颜色
还可以通过插件里的Marker Type
设置显示颜色的样式
emmet
HTML/CSS代码快速编写神器
快速手写 HTML, CSS, Sass / SCSS / LESS
- 比如输入“!”或“html:5”,然后按Tab键生成HTMl初始化
- 比如轻松添加类、id、文本和属性
- 比如,ul>li*3可以生成多个标签
- ……
详细版的说明:http://www.iteye.com/news/27580
atom-ternjs
ES5, ES6, ES7, Node.js, jQuery, Angular 等等 js 代码自动补全
要什么共享单车
jquery-snippets
jquery代码片段补全
一款可以快速写JQ的插件,输入snippet简写,tab键或者Enter触发补全,基本涵盖了JQ的所有方法和事件。
css-snippets
css代码片段补全
同理,css代码补全
接下来的图片请脑补
javascript-snippets
原生javascript代码片段补全
同理,js代码补全,写代码效率提高20%
要什么自行车
activate-power-mode
一个小游戏而已,有强迫症的别玩,伤身体,玩多了,那地方会虚的
sync-settings
备份插件
可以备份ATOM的全局设置、插件、按键绑定(keymaps)、界面样式、代码片段(snippets )、 init script。
详细版说明:http://blog.csdn.net/zsl10/article/details/51891306
linter
基本语法检查框架
linter-ui-default
显示,警告,错误界面
必须安装以上两个插件,才能安装下面的插件。
linter-jshint
js代码检查工具linter-csslint
css代码检查工具linter-htmlhint
HTML代码检查工具
git-plus
丢掉终端,在 Atom 里面执行 Git 命令
完
.
.
.
.
好吧,骗你了,最后来个很带感的UI主题
就骗你了,怎么了。
没错,就是它atom-material-ui
觉得不好看的跳过,下面的不用看了。
觉得好看的,我们两继续:
记得在install里面选择themes搜索
安装完成后,打开插件设置
然后我们开始设置,
来跟着我一起设置看看效果
前方多图预览
好了,最后给你们三个同系列的,代码颜色主题atom-material-syntax
atom-material-syntax-dark
atom-material-syntax-light
完
这次不骗你,真的结束了。
推荐:atom官方插件库
推荐:atom官方主题库
如果您看了本篇博客,觉得对您有所收获,请点击右下角的
[分享],没有!
如果您想转载本博客,请注明出处
如果您对本文有意见或者建议,欢迎[留言],留个屁!
感谢您的阅读,请关注我的后续博客