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
1234567891011+ 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 2 |
cd C:\Users\username\.atom\packages\...... npm install module_name |
四、其他解决方法
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