爱前端

实用的 atom 插件

实用的 atom 插件

sublime text 确实是前端开发的神器,但入坑三四年一直使用,难免会有些视觉疲劳,最近折腾起了atom编辑器,发现这货也是前端开发的利器,没错,就是利器。

俗话说,人靠衣装,佛靠金装,再好的编辑器也不会在软件本身集成各种插件,第三方支持等,于是就需要我们针对自己的日常开发选择一些常用的、实用的插件,最大程度的提高日常开发效率。

Ⅰ:atom 是什么鬼

Atom 是github在2015年开源的一款编辑器,相比较于sublime text,最吸引人的莫过于 Atom 是基于 Chromium Embedded Framework,基本上就是个 web app,源码都是 CoffeeScript 写的,连界面都可以用 CSS 来自定义。

Atom 的扩展也是用 JS 或者 Coffee 在 Node + webkit 的环境下开发,并且可以使用 npm 的包,这对于前端和 Node 开发者是很有诱惑力的,需要的话完全可以把 Atom 打造成一个 IDE。

官网:atom官网,可以在官网下载进行安装,安装过程很简单,这里就不进行赘述了。

Ⅱ:好用的 atom 插件

  • 点击菜单里面的 Preferences(抑或使用快捷键 cmd + ,),点击 install 选项,输入要安装的插件,点击安装即可。
  • 通过 Preferences-install 来安装插件经常会遇到问题,好在atom做的很人性化,我们可以通过终端来进行插件安装,命令为 apm,是不是有点眼熟,这个基于atom 的一个包管理器,他过这个命令可以愉快的他过终端来安装你想要的插件啦,是不是很方便

apm 安装的方法如下:

# 安装指定包
$ apm install <package_name>
# 安装指定版本的包
$ apm install <package_name>@<package_version>
# 查找包
$ apm search <package_name>
# 查看包更多详情
$ apm view <packge_name>
# 查看当前已安装包(包含atom里面自带的一些包和你自己安装的包)
$ apm list

apm list 里面我安装的如下:

/Users/liucui/.atom/packages
├── activate-power-mode@0.5.2
├── atom-beautify@0.29.7
├── autocomplete-paths@1.0.2
├── color-picker@2.1.1
├── docblockr@0.7.3
├── emmet@2.4.3
├── file-icons@1.7.11
├── git-plus@5.13.4
├── javascript-snippets@1.2.1
├── linter@1.11.4
├── linter-jshint@2.1.0
├── markdown-scroll-sync@2.1.2
├── markdown-table-formatter@2.8.3
├── minimap@4.23.5
├── minimap-find-and-replace@4.5.1
├── terminal-panel@1.14.1
└── vim-mode@0.65.1

那么到底有哪些好用的、必备的插件呢,下面就来给大家推荐几个所常用的。

1、emmet

前端开发都懂得的,html 代码补全,使用方法还有文档可以查阅emmet使用文档

下载链接:emmet

2、file-icons

不同格式的文本现实不同颜色和类型的图标,便于分辨。

file_icons_bg

下载链接:file-icons

另外:siti-ui 主题也可以以不同的颜色和类型图标展示不同类型文件,大家可以下载试试。

3、color-picker

顾名思义,颜色采集器,非常清晰好用。快捷键 cmd+shift+code 启动。

color-picker

下载链接:color-picker

4、atom-beautify

美化格式插件,规范缩进,删除多余空行等等。快捷键 ctrl+option+b 启动使用。

下载链接:atom-beautify

5、markdown-scroll-sync

atom 自带markdown 预览功能,快捷键 ctrl+shift+m会打开两个面板的视图,但文档太长的时候,不会跟着同步滚动,这个插件就是做这个用的,滚动文档的时候预览内容同步滚动。

markdown-scroll-sync

下载链接:markdown-scroll-sync

6、minimap

编辑器右侧小面板,快捷展示当前编辑的内容在整个文档中的位置。

minimap

下载链接:minimap

7、docblocker

便捷的添加注释代码,/** 按tab键即添加注释代码快。

docblocker

下载链接:docblocker

8、terminal-panel

快速调取使用终端面板,快捷键 『ctrl+`』 启动,底部工具条的 + 也可以点击展示终端面板。

terminal-panel

下载链接:terminal-panel

9、javascript-snippets

js/nodejs 方法快捷输入,不过有些方法的简写需要去文档里面熟悉一下,多用几次你会发现真的可以提高效率。

javascript-snippets

下载链接:javascript-snippets

10、autocomplete-paths

代码提示补全插件,

autocomplete-paths

下载地址:autocomplete-paths

11、linter

代码风格检查工具

linter

单单装了linter 还不行,我们要针对自己使用的语言不同去安装不同的语言支持,例如,我装了js的检查工具:linter-jshint,大家可以根据需要自行安装,语言风格审查列表

下载链接:linter

12、vim-mode

atom 的vim 模式,安装后按ESC键即启用vim 模式,在另一篇文章 编辑器的vim模式使用 中,有详细的介绍,让你的 Atom 用起来超乎你的想象。

13、activate-power-mode

这个插件纯粹是用来炫技的,只适合拿来玩玩,长时间使用,我相信你的视力一定会下降的,不要怪我没提醒你哦。

activate-power-mode

下载链接:activate-power-mode

Ⅲ:另附--常用快捷键

快捷键 说明
shift + cmd + p 命令版(可以看到所有快捷键)
alt + shift + s 查看文件相关语言的代码块(snippet)
cmd + f 搜索当前文件
cmd+shift+f 搜索整个项目
alt + cmd + [ 代码折叠, 我不喜欢用
alt + cmd + ] 代码展开
cmd + / 快速注释当前行
cmd + [ 代码左缩进
cmd + ] 代码右缩进
cmd + b 快速跳转打开的文件
alt+B或alt+left 光标按单词左移
alt+F或alt+right 光标按单词右移
cmd+right或ctrl+e 光标移动到行最右最后一个非空字符
cmd+left或ctrl+a 光标移动到行最左第一个非空字符
cmd + up 光标移动到文件头
cmd + down 贯标移动到文件尾
ctrl + g 行跳转, 语法为行号:列号
cmd + r 按当前文件方法跳转
cmd + t 全项目模糊查找关键字并跳转
ctrl + m 按照括号匹配跳转
cmd + F2或cmd+fn+f2 给某一行设置书签显示在行号右侧

Ⅳ:后记

我们常常会被一些惯用的东西束缚住,作为一个开发者,要时刻提醒自己对新鲜事物充满好奇,把眼界放宽,多看看外面的世界,走出去,你会发现,世界会是另一个样子。