介绍一些适用于 Web 开发者的 Atom 编辑器插件
2016-06-13 15:54
573 查看
Atom 的社区很繁荣,有着丰富的扩展/插件(packages)。安装 Atom 的 Package 非常简单,可以在编辑器的偏好设置里面安装,也可以在命令行中使用
在介绍适用于 WEB 开发的 Package 之前,让我们快速过下如何安装 Atom Packages。
Install atom packages
通过
Atom 自带了一个
命令之后应该输出
确认
autocomplete plus
atom-ctags,使用
javascript-snippets,顾名思义,输入特殊的字符后自动扩展成对应的 Javascript 代码片段。
javascript-snippets
vim-mode
VIM-Mode 支持在 Atom 中使用
emmet
手写
go-to-line,跳转到指定的行,只要
JSHint
csslint, CSSLint 会报告出不合规定的 CSS 规则。
CSSLint
git plug
git-log,在 Atom 里面显示图形化的提交记录。
merge-conflicts,在 Atom 里面处理合并产生冲突的文件。
Mini Map
file-icons,显示文件类型对应的图标。
atom-beautify,格式化代码,更统一的代码风格。
Color Picker
在编辑器里面挑选颜色。通过右键选择
csscomb,CSSComb 的一个扩展工具, CSSComb 帮你写出更漂亮的 CSS !
autoprefixer,AutoPrefix的一个扩展工具,自动为 CSS 属性添加特定的前缀。
localization,国际化 Package ,支持简体中文。但是在我使用的版本
apm命令来安装。
在介绍适用于 WEB 开发的 Package 之前,让我们快速过下如何安装 Atom Packages。
安装 Atom Package
通过偏好设置安装 Package
使用快捷键command + ,/
ctrl + ,打开偏好设置。点击左侧的
Install即可浏览线上的 Package 。 顶部是一个搜索框,可以搜索已经发布在 atom.io 上的 Package ;紧接着是
Feature Packages,即精选的 Package ,列出来的是一些比较优质的 Package 。
Install atom packages
通过 apm
命令安装 Package
Atom 自带了一个 apm的 Package 管理工具。我们可以在命令行下执行以下命令来确认
apm是否已经安装:
apm help install
命令之后应该输出
apm install的详细信息。如果输出不是
apm install的命令信息,打开 Atom 菜单,选择
Install Shell Commands来安装
apm。
确认
apm正确安装后,便可以开始安装 Package 。正如上述执行
apm help install所提示的,安装的命令是:
apm install [<package_name>...]
apm install <package_name>@<package_version>
apm install --packages-filemy-packages.txt
Package 推荐
快捷输入类
autocomplete-plus,当输入的时候,提供可能的候选项。autocomplete plus
atom-ctags,使用
ctags来强化自动完成功能,需借助于
autocomplete-plus。
javascript-snippets,顾名思义,输入特殊的字符后自动扩展成对应的 Javascript 代码片段。
javascript-snippets
vim-mode
VIM-Mode 支持在 Atom 中使用
VIM编辑器的操作方式来编辑。这对我来说是个非常 Killer 的 Package ,在此之前我一直在 WebStorm 上通过一个插件模拟 VIM 操作,异常难用。而在 Atom 上的这个模拟VIM操作,使用起来感觉还是比较顺手的。你可以混合 VIM 操作和普通的编辑操作。
emmet
手写
HTML多少显得专业,但是手写的问题在于得大量的代码。Emmet大幅提升手写的效率。非常值得一装。
go-to-line,跳转到指定的行,只要
ctrl + g后输入行号即可。
Linters
jshint,验证你的 JavaScript ,写更专业的 JavaScript 代码。JSHint
csslint, CSSLint 会报告出不合规定的 CSS 规则。
CSSLint
版本控制类
git plus,在 Atom 里面执行 Git 命令,不用来回切换终端和编辑器。git plug
git-log,在 Atom 里面显示图形化的提交记录。
merge-conflicts,在 Atom 里面处理合并产生冲突的文件。
辅助类
minimap,为 Atom 加上 Sublime Text 的源码预览图,提供丰富的自定义选项,值得一用。Mini Map
file-icons,显示文件类型对应的图标。
atom-beautify,格式化代码,更统一的代码风格。
Color Picker
在编辑器里面挑选颜色。通过右键选择
Color picker,或者
cmd + shift + c/
ctrl + alt + c快捷键调出颜色选择面板。支持
HEX, HEXA, RGB, RGBA, HSL, HSLA形式指定的颜色值。
csscomb,CSSComb 的一个扩展工具, CSSComb 帮你写出更漂亮的 CSS !
autoprefixer,AutoPrefix的一个扩展工具,自动为 CSS 属性添加特定的前缀。
localization,国际化 Package ,支持简体中文。但是在我使用的版本
0.179.0中无法使用。
相关文章推荐
- linux下lk和kernel层通信方式[2]
- java的一些知识(二)
- LInux pthread_join理解
- [转]SQL存储过程
- js中截取字符串的方法
- log4net
- [Linux]I/O多路复用和epoll
- shell cut 用法
- Erlang运行时的错误
- Objective-C Runtime 运行时之一:类与对象
- SpringMVC handlerMapping和handlerAdapter
- static关键字的使用与内存分析
- Android总结篇系列:Android广播机制
- c#中decimal ,double,float的区别
- Object.entries()
- UNIX脚本中#!到底是什么意思
- 奋斗吧,程序员——第五十四章 坐拥美人君莫笑,古来征战几人回
- 最终用户计算一周观察 002
- Required background modes [info.plist 配置后台运行模式]
- git 命令大全