Github开源编辑器Atom常用插件及安装方法

简记

工欲善其事,必先利其器!

这款被称为“21世纪”的代码编辑器——Atom, 是开源免费跨平台的,并且整合 GIT 并提供类似 SublimeText 的包管理功能,

同时,支持插件扩展,可配置性非常高……,乍一看,像极了Sublime Text,但当你在使用时却感觉还是特别爽!!!

更多:Atom中文简介


预览

先放几张靓图,感受一下!

炫酷黑

分屏

Solarized主题

Solarized分屏


基于Github的常用插件

目前Atom编辑器最新的版本是: v1.3.1,附上官网:Atom官网,长这样的:

Atom官网样视=式

当然, 你也可以在Github上直接找到下载地址:Github上的下载地址


安装插件前准备

[1] 先了解下Atom的设置界面:

打开Atom后使用键盘快捷键“Alt”,可以打开和隐藏菜单栏,不妨试试看,选择File -> Settings,便可以打开设置界面(如图):

设置界面

设置界面主要有六个部分:

1: Settings: 通用设置;
2: Keybindings: 快捷键设置;
3: Packages: 插件管理;
4: Themes: 设置和安装主题;
5: Updates: 更新插件
6: Install: 安装插件 或主题

在Settings界面,我们先做一下常用的设置:

1: Core Settings -> File Encoding: utf-8;
2: Editor Settings 中:
Audo Indent 选上;
Font Family中 Windows默认使用Consolas字体,很适合编程,可以自定义,写上字体名称即可;
Fonts Size: 设置字体大写;
Line Height: 设置行高,如1.3;
Show Indent Guide:缩进下垂线,选上;
Show Line Number: 行号,选上;
Soft Wrap: 超出行长度限制后,自动折行;
Tab Length: 4;

其他的都保持默认吧!!!


[2] 翻墙:加速插件下载速度

就用蓝灯吧,GitHub搜索lantern,Windows自动安装无需任何设置,记得使用Google Chrome不一样的体验,附上lantern地址:lantern Github下载地址,打开浏览器是这样的:{Youtube, facebook,都上去了!速度还可以}

lantern

YouTuBe

FaceBook


插件安装

本文推荐使用Atom自带插件管理器进行安装

安装方法

在Settings界面的Install选项中,可以搜索插件或者主题进行下载安装,有的可能会提醒重启Atom才能激活,界面下边还有Hot推荐插件列表:

插件界面


插件[1] minimap

顾名思义,这款插件在窗口的右边栏打上遮罩,为 Atom 加上 Sublime Text 的源码预览图,提供丰富的自定义选项,值得一用,效果如1。

minimap效果图


插件[2] activity-power-mode

Atom装逼插件,配上个青轴机械键盘,我看见代码在跳舞啊,动次动次动动次!!!

activity-power-mode官方地址

activity-power-mode效果图

装上之后使用快捷键:Ctrl + Alt + o 激活


插件[3] autocomplete-plus

当输入的时候,提供可能的候选项。
autocomplete-plus效果图


插件[4] javascript-snippets

输入特殊的字符后自动扩展成对应的代码片段。
javascript-snippets效果图


插件[5] git plus

在 Atom 里面执行 Git 命令,不用来回切换终端和编辑器。

git plus效果图


插件[6] merge-conflicts

解决Atom中合并冲突插件!
merge-conflicts官方地址

merge-conflicts效果图


插件[7] Script

可以根据文件名称,或所选的代码块,或行号执行代码,支持大多数编程语言!!!
Script官方地址

Script效果图


插件[8] atom-ctags

使用 ctags 来强化自动完成功能,需借助于 autocomplete-plus。
atom-ctags官方地址

atom-ctags效果图


插件[9] autocomplete-python

Python包、变量、方法、函数声明等自动匹配
autocomplete-python官方地址

autocomplete-python效果图


插件[10] color-picker

颜色拾取器,在编辑器里面挑选颜色。通过右键选择 Color picker ,或者 cmd + shift + c/ctrl + alt + c 快捷键调出颜色选择面板。支持 HEX, HEXA, RGB, RGBA, HSL, HSLA 形式指定的颜色值。
color-picker官方地址

color-picker效果图


插件[11] python-tools

Python提高生产力的必备工具!!!

默认快捷键:ctrl+alt+u
python-tools官方地址

python-tools效果图


插件[12] xml-formatter

XML代码格式化工具, 默认快捷键:SHIFT-CTRL-X
xml-formatter官方地址

xml-formatter效果图


插件[13] autocomplete-paths

自动匹配文件路径工具!
autocomplete-paths官方地址

autocomplete-paths效果图


插件[14] atom-html-preview

html文档预览工具, 默认快捷键:CTRL-SHIFT-H
atom-html-preview官方地址

atom-html-preview效果图


插件[15] atom-beautify

格式化代码,更统一的代码风格, 支持HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, and SQL等语言代码!必备!!!
atom-beautify官方地址

插件[16] file-icons

显示文件类型对应的图标,升级插件后可能需要重启Atom。
file-icons官方地址

file-icons效果图


插件[17] java-importer

帮助Java用户自动导入依赖的包。
java-importer官方地址


插件[18] jshint

验证你的 JavaScript ,写更专业的 JavaScript 代码。
jshint官方地址

jshint效果图


插件[19] csslint

CSSLint 会报告出不合规定的 CSS 规则!
csslint官方地址


插件[20] csscomb

CSSComb 的一个扩展工具, CSSComb 帮你写出更漂亮的 CSS !
csscomb官方地址


插件[21] autoprefixer

AutoPrefix的一个扩展工具,自动为 CSS 属性添加特定的前缀。

autoprefixer官方地址


插件[22] emmet

手写 HTML 多少显得专业,但是手写的问题在于得大量的代码。Emmet大幅提升手写的效率。非常值得一装。

emmet官方地址


插件[23] vim-mode

在Atom中使用vim!

vim-mode官方地址


插件[24] sync-settings同步Atom

安装了这么多的插件,并且这么多的设置,如何备份同步呢?Atom并没有账号支持啊?其实,sync-settings插件可以完成相关工作,非常出色!

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

sync-settings官方地址

sync-settings 设置方法:

1: 进入Atom设置中心找到该插件,进去setting;

2: 打开自己的github创建一个a new person access token , 然后复制生成的token序列, 粘贴到sync-settings插件的setting里面;

3: 再打开github的gist服务,创建一个gist,并复制生成gist id(注意这个id就是你创建的gist服务对应的URL中除去你的用户名,之后的部分),也粘贴到sync-settings插件的setting里面
4: 配置完毕后, 在文档编辑页面,按下全局命令搜索面板(Ctrl+shift+p),搜索sync-,会有可选项:

  • sync-settings:backup – 这条命令是备份当前的配置
  • sync-settings:restore – 这条命令是回复配置,是直接覆盖的;
  • sync-settings:view-backup – 这条是当你执行备份后到线上查询你的备份的,也就是到你的gist code里面
  • sync-settings:check-backup – 这条是查询最后一次是否正常

效果图如下所示:

sync1效果图

同步成功与失败的提示信息:

sync2效果图

最后在Github中gist服务中多了许多Atom插件的备份配置信息,使用的是coffee脚本保存的,如图:

sync3效果图


注意

1: Atom提供的插件非常多,都来自于Github,遇到问题可以直接在Github上提问;
2: 插件更新后,可能会失效,重启是个不错的解决办法 ;
3: 推荐几个常用功能,默认已安装:

1>. ctrl + g: 只要 ctrl + g 后输入行号, 就能跳转到指定的行 ;
2>. ctrl + shift + p: 调出功能详情,如按下快捷键后输入pane命令,查找split列表项,点击后实现分屏功能;
3>. Atom-Material这个主题真心不错,是Android material风格。


@@@@@@@@@@@@@@@@@---END---@@@@@@@@@@@@@@@@@

Enjoy it ? Donate me ! 求鼓励,求支持!
0%