atom那些事

走在前端的大道上——atom那些事

最后更新时间2018年1月11日

atom是一款非常好用的编辑器，现在来介绍一些atom必备的插件

都是在file-->settings-->install 搜索插件的名字，比如：搜索插件language-vue（安装后可能需要重启
）

效果：

1.language-vue

使.vue文件内标签高亮

2.Emmet

能够基于Emmet语法产生HTML。

3.让 atom 编辑器 emmit 插件支持VUE文件

虽然你的atom编辑器安装了emmit插件，但是在vue项目中的.vue文件中并不能使用emmit插件带来的快捷键

找到atom的安装目录下dekeymap.cson did the trick

'atom-text-editor[data-grammar~="vue"]:not([mini])':
    'tab': 'emmet:expand-abbreviation-with-tab'

或者进入终端编辑配置文件

vim ~/.atom/keymap.cson

到文件的最后一行，按 o，插入一行，将下面的代码粘贴进去

'atom-text-editor[data-grammar~="vue"]:not([mini])':
    'tab': 'emmet:expand-abbreviation-with-tab'

然后按 esc退出编辑模式，再输入:wq保存退出，然后重启atom。这就在.vue的文件下支持emmet语法啦

链接：https://github.com/...

4.atom-beautify

快速格式化代码插件,能够美化 HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, 和 SQL语法。

5.Linter linter-csslint linter-jshint

代码规范化检测插件,能够自动覆盖检查源码，产生警告和错误，帮助规范编程，基于实时代码分析。HTML, CSS, SCSS, JavaScript都有各自的Linter。甚至框架也有自己的Linter。

linter-jshint是用jshint来检查代码，想必大家都听说过jshint代码检查工具，它有一个配置文件.jshintrc，这个文件告诉jshint执行的检查规则。通过jshint能发现代码中存在的问题，可以及时避免bug的发生。linter-jshint插件基于atom规则来使用jshint，该插件可以在项目根目录下新建一个.jshintrc来告诉检查规则，也可以不用创建此文件来进行代码检查。
注意：linter-jshint是依赖linter插件来使用的，也就是说必须先安装linter插件；因为linter是一个粗糙的检查，有很多针对专门项的代码检查，如linter-csslint、linter-php等等