Atom主题插件美化教程

一、下载安装Atom

贴上官网：https://atom.io/

自己下载安装软件

二、安装插件

打开面板，可以看到如下：

对应的Themes就是可更换的主题。在这一共分为两块，UI Theme和Syntax Theme，一个是UI的，一个是文件语法的，这里可以选择相应的主题。

安装主题

可以通过Installed Themes安装主题，这里我使用的都是Material的主题，大家也可以尝试下。

在给大家推荐几个主题也不错，可以尝试下：

• isotope-ui
• seti-ui
• monokai-flat

安装插件

安装插件Atom比Sublime做的稍微细致些，Atom有对插件的设置，以及插件介绍等。

插件安装直接选中Install，进行搜索即可，这里也是推荐一些我常用的插件，大家可以进行参考。

• Emmet- 这个是书写HTML、CSS的神器，用过的都说好，相关语法文档可以看官网cheat-sheet,安装上面的语法也是经常写的就记住了。

• autoprefixer - 用来补全CSS前缀的，会自动生成浏览器前缀
• color-picker - 取色器，比Sublime那个好用，快
• linter- 这个是检查各种语言的语法错误的，可以使用linter这个，也可以针对某些语言使用特定的lineter
  
  + linter-jshint, <span class="hljs-keyword">for</span> JavaScript <span class="hljs-keyword">and</span> JSON, <span class="hljs-keyword">using</span> jshint + linter-coffeelint, <span class="hljs-keyword">for</span> CoffeeScript, <span class="hljs-keyword">using</span> coffeelint + linter-tslint, <span class="hljs-keyword">for</span> Typescript, <span class="hljs-keyword">using</span> tslint + linter-php, <span class="hljs-keyword">for</span> PHP <span class="hljs-keyword">using</span> php -l + linter-pylint, <span class="hljs-keyword">for</span> Python, <span class="hljs-keyword">using</span> pylint + linter-scss-lint, <span class="hljs-keyword">for</span> SASS/SCSS, <span class="hljs-keyword">using</span> scss-lint + linter-less, <span class="hljs-keyword">for</span> LESS, <span class="hljs-keyword">using</span> less + linter-csslint, <span class="hljs-keyword">for</span> CSS, <span class="hljs-keyword">using</span> csslint + linter-stylint, <span class="hljs-keyword">for</span> Stylus, <span class="hljs-keyword">using</span> stylint + linter-stylus, <span class="hljs-keyword">for</span> Stylus, <span class="hljs-keyword">using</span> stylus

  1 2 3 4 5 6 7 8 9 10 11

  +     linter-jshint, <span class="hljs-keyword">for</span> JavaScript <span class="hljs-keyword">and</span> JSON, <span class="hljs-keyword">using</span> jshint +    linter-coffeelint, <span class="hljs-keyword">for</span> CoffeeScript, <span class="hljs-keyword">using</span> coffeelint +     linter-tslint, <span class="hljs-keyword">for</span> Typescript, <span class="hljs-keyword">using</span> tslint +     linter-php, <span class="hljs-keyword">for</span> PHP <span class="hljs-keyword">using</span> php -l +    linter-pylint, <span class="hljs-keyword">for</span> Python, <span class="hljs-keyword">using</span> pylint +     linter-scss-lint, <span class="hljs-keyword">for</span> SASS/SCSS, <span class="hljs-keyword">using</span> scss-lint +     linter-less, <span class="hljs-keyword">for</span> LESS, <span class="hljs-keyword">using</span> less +     linter-csslint, <span class="hljs-keyword">for</span> CSS, <span class="hljs-keyword">using</span> csslint +     linter-stylint, <span class="hljs-keyword">for</span> Stylus, <span class="hljs-keyword">using</span> stylint +     linter-stylus, <span class="hljs-keyword">for</span> Stylus, <span class="hljs-keyword">using</span> stylus

• autocomplete-plus 自动补全功能，可以设置一些语言的自动提示补全，挺好的
• atom-ternjs js 代码提示，可以提示browser、es5、es6、jquery都可以
• atom-beautify 格式化代码
• atom-minify css/js压缩神器,执行压缩快捷键
  • ctrl-shift-m:执行压缩，生成一个带min后缀的(如果不想使用min可以进行设置修改)
  • ctrl-alt-shift-m / ctrl-cmd-shift-m:全局开启或者关闭保存自动生成压缩软件
  • ctrl-alt-shift-h / ctrl-cmd-shift-h:全局开启或者关闭执行后弹出的消息面板
• less-autocompile 实时编辑的工具
• atom-css-comb 对于css代码进来排版的
• docblockr 注释插件
• file-icons 文件图标，侧边栏前面的icon
• git-plus git协作工具
• minimap 编辑器内部的代码缩略视图
• active-power-mode 装逼插件，代码酷炫的效果
• power-mode 也是装逼插件，大家自行去试验

其它插件大家可以自行google，还有很多好玩的插件等待大家来发掘~~

三、安装源被墙的解决措施

由于源在国外，所以可能会被墙，提示网络问题，或者干脆下不下来。这时候，我们可以通过github下载手动安装插件或主题。

进入插件安装官网：https://atom.io/packages

搜索想下载的插件，点进去，再点击"Version"，进入github

此时再点击“source code”，下载源代码

将源码解压至Atom插件目录：C:\Users\username\.atom\packages

此时再进入Atom，提示错误。此时再进入相应的目录手动安装，注意需要安装Node.js环境。代码如下

四、其他解决方法

1.首先在电脑上安装nodejs,和git工具。atom的安装目录（windows）是 C:\Users\Administrator.atom\packages （mac 下：cd ~/.atom/packages）所以最好用命令工具进这个目录再安装。
2.在https://atom.io/packages 找到自己要安装的插件，进入插件详情页面，repo里会有github地址，比如我安装color-picker
3.在命令行里，git clone https://github.com/thomaslindstrom/color-picker.git83 
4.cd color-picker
5.npm install
6.重启atom