Atom 绝赞插件

• • • 文件图标: file-icons
    • 标签栏根据不同文件格式显示色彩: filetype-color
    • 小地图：minimap
    • 实时预览HTML页面: atom-html-preview
    • 同步备份atom设置到github: Sync-settings
    • 自动补全 autocomplete-plus
    • 支持html和css格式文件中代码速写插件: emmet
    • webserver服务器插件: atom-live-server

文件图标: file-icons

根据不同文件后缀名显示不同类型图标

标签栏根据不同文件格式显示色彩: filetype-color

在标签栏不同格式文件显示不同的颜色的标题，支持二度设置。

小地图：minimap

用过 Sublime Text 的友友们都知道有一个很实用的功能，就是内部编辑那里有一个小小的代码图,
这货就是补全 Atom 这个功能的,支持高亮代码,还可控，具体看内部设置。

实时预览HTML页面: atom-html-preview

Atom编辑器内实时预览的工具。

• 快捷键
  
  • 默认快捷键： CTRL + P 调用，会和内置核心插件冲突(切换文件那个)
  • 修改版快捷键： CTRL + F12 (感觉方便使用且没有冲突的快捷键)
• 修改自定义键盘映射文件：

#实时浏览器调用快捷键
  'atom-text-editor':
    'ctrl-F12':'atom-html-preview:toggle'

atom 内置了 Dev Live Reload 这个插件；
这个插件的作用就是重新加载所有样式和规则，
有点类似 linux 的 source xx.sh 一样..即时生效。
调用快捷键是 CTRL + SHIFT + ALT +R
当然，关闭 atom 再开 atom 编辑器也能达到重新加载所有样式规则的效果……

同步备份atom设置到github: Sync-settings

同步 Atom 的设置文件，自定义快捷键，用户风格，初始化脚本及代码片段，还支持已安装的插件同步。

• 初始化设置

  • 进入设置中心找到该插件，点击该插件的 setting 项进入到二步设置；
  • 打开自己的 github 创建一个personal access token
  • 复制生成的 token 序列，粘贴到插件的 sync-settings 插件的二步设置相关的 Token 项中。
  • 打开 github 的 gist 服务，创建一个 gist。
  • 将 gistID 粘贴到 sync-settings 插件的二步设置相关的 gistID 项中。
    
    • 注:gistID就是在你的gist页面网址最后的那串32位的16进制数字。
    • 类似39d20859457f059a84b66577c80d4d38
      

• 使用方法(配置完毕后)

  • 在文档编辑页面，按下全局命令搜索面板(Ctrl+shift+p)
  • 搜索sync- ，会有可选项
    
    • sync-settings:backup – 备份当前配置;
    • sync-settings:restore – 恢复配置，(将gits上的配置文件)直接覆盖(本地);
    • sync-settings:view-backup – 执行备份后到线上查询备份,访问gist;
    • sync-settings:check-backup – 查询最后一次备份是否正常;
    • 备份成功和失败都有一条信息提醒。
      

自动补全 autocomplete-plus

完善自带 autocomplete,有二度设置，接下来列出的一些有二度设置

• autocomplete-python — 你懂得，更加细致
• autocomplete-paths — 实用派，路径补全
• autocomplete-html — 你懂得，更加细致
• autocomplete-bibtex — Github的markdown语法
• autocomplete-snippets — 如名字
• autocomplete-css — 你懂得，更加细致
  
  • less-autocompile — 实时编译
  • docblockr — 注释插件，非常的实用

支持html和css格式文件中代码速写插件: emmet

html中用法

a、新建空文件后,改变文本格式为html(点击atom最右下角显示的文本格式来改变),
然后在文本空白处输入标签名html、head、div、article、a…后按tab键.
b、多倍数个的同类标签: li*3
c、快速设置class/id属性默认的div标签: .clsName/idName然后tab会出来class/id为clsName/idName的div标签
d、快速设置class/id属性的任意标签: 如h1.title/h1#title出来id/class为title的h1标签
e、>嵌套符来速写嵌套关系的标签: ul>li*3>a
f、{}设置标签内value值:如ul>li{value1}+li{value2}

css中用法

新建空文件后,改变文本格式为css(点击atom最右下角显示的文本格式来改变),
只需书写属性和值的第一个缩写字母+值。

//典型速写举例
//1、输入db后按tab键
display: block;
//2、输入dib后按tab键
display: inline-block;
//3、输入mb10
margin-bottom: 10px;
//4、输入m10%
margin: 10%;

更多缩写用法请查看emmet官网

webserver服务器插件: atom-live-server

用法介绍:

ctrl-shift-3 launch live server on port 3000.
ctrl-shift-4 launch live server on port 4000.
ctrl-shift-5 launch live server on port 5000.
ctrl-shift-8 launch live server on port 8000.
ctrl-shift-9 launch live server on port 9000.

更多请参考atom-live-server官网

关于atom的绝赞插件有好的会随时再更新。
end