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等等

6.atom-ternjs

JavaScript 语法智能提示

7. file-icons

让你的每个文件都有个好看的图标

8.Pigments

Pigments能够根据颜色代码直接显示该颜色。

9.Minimap

Minimap提供完整的源码预浏览作用，能够定位你正在编辑的文件总貌。

10.Minimap cursorline

Minimap cursorline是能够你光标移到时，同时在文件总貌预览中跟随移动，从而判断你当前位于文件的哪个位置。

11.Autoclose HTML

让你自动闭合HTML标签

12.Double-tag

能让同时编辑html的开始与结束标记，如果你增加一个 HTML开始语法，它会自动跟随写出结束语法，比如键入<div>开始，自动有</div>结束语法。

13.open-in-browser

可以再.html文件上右击可以让你直接在游览器中打开

14. highlight-line 与 Highlight selected

能够高亮选中行，单词，使用Ctrl-U或Cmd-U能够多选单词。

15.Code peek

能够快速提示和编辑其他文件中的函数功能，不必要再单独打开那个文件了。

16.docblockr

这个插件可以帮助你快速的生成注释，很多高级的编辑器都有这个功能，只是atom没有内置实现
ified-chinese-menu**

atom提供的都是英文版，若是英文不好的，可以使用简体中文插件来汉化atom编辑器

18.hyperclick和js-hyperclick

这两个插件配合，作用是跳转到变量声明或者定义的地方，非常有用！！！，mac下使用comman+click，windows下使用contrl+click来跳转

18.autocomplete-paths

在项目依赖某个路径的文件时非常有用，可以自动路劲提示，超实用

19.react

用于jsx 代码高亮

20.stylus-language

用于stylus语法高亮

21.platformio-ide-terminal

可以打开一个终端

参考文章：
1、atom编辑器社区插件推荐
2、Atom必不可少插件推荐