atom插件安装
File>Settings>intall搜索框输入插件名,点击Packages搜索,搜索出来后点击intall安装,建议你先安装(simplified-chinese-menu)这个汉化插件,自后就好用多了。
或者:cd 到用户目录,~/.atom/packages, 执行:apm install goto-definition
0.goto-definition https://atom.io/packages/goto-definition, 函数定义跳转。
1.sublime-style-column-selection.
2.Atom HTML Preview)
3.atom-live-server
4.autoprefixer
5.color-picker
6.emmet
7.file-icons
8.local-web-server
9.markdown-preview-enhanced
10.minimap
11.open-in-browsers
12.px2rem-plus
13.script
14.simplified-chinese-menu
15.activate-power-mode
simplified-chinese-menu, ATOM的汉化插件
file-icons, 文件图标美化
atom-beautify, 代码格式一键美化
last-cursor-position, 光标自由切换到上一次/下一次编辑位置
minimap, 代码小地图
sync-settings, 插件备份、按键绑定备份
activate-power-mode, 输入时有震撼效果
atom-terminal-panel, atom内置命令行工具
Git/github,
git-plus—在 Atom 里面执行 Git 命令,不用来回切换终端和编辑器
git-control—git面板
tree-view-git-status—文件夹git状态
gist-it—快速分享代码到gist.github.com
git-log,图形化git提交记录
markdown
markdown-preview-plus—markdown预览
markdown-preview:编辑实时预览插件,Atom 官方出品
language-markdown:提供 Github Flavored Markdown 等 MD 高亮支持
markdown-writer:方便管理图片、链接等
markdown-scroll-sync:将 markdown-preview 的编辑区和预览区同步滚动
markdown-table-formatter:格式化表格
vim-mode,支持vim模式
script,在atom下运行脚本,支持多种开发语言。
remote-edit,编辑机远程文件
browser-plus, 编辑器内置浏览器
ask-stack, 在atom快速提问stackoverflow
regex-railroad-diagram, 正则表达式图形化
advanced-open-file, 快速的打开文件或新建文件,同时支持路径补全
quick-highlight, 代码高亮
platformio-ide-terminal,终端工具
open-in-browsers, 在安装过的任意浏览器打开代码
merge-conflicts, 在 Atom 里面处理合并产生冲突的文件
linter, 代码校验工具
autocomplete-paths, 填写路径的时候有提示
linter, 代码校验工具(必备)
前端插件推荐
emmet, 加快web开发速度,提供snippet(代码片段)、abbreviation expand(简写展开)功能。
color-picker, 在编辑器里面挑选颜色
language-JavaScript-jsx, 支持JSX语法
atom-html-preview, 实时预览HTML页面
React
react—语法支持
atom-react-native-autocomplete—React Native代码补全
nuclide—facebook基于atom开发的进行react开发的IDE
language-babel, 支持JSX语法
atom-minify, css、js代码压缩
atom-ternjs, js,nodejs,es6补全,高度定制化
jshint, 验证js和jsx语法是否正确
csslint, 验证css语法是否正确
autoprefixer, 自动为 CSS 属性添加特定的前缀
autoclose-html,闭合html标签
pigments, 颜色显示插件
less-autocompile, less文件编译为css文件
php插件推荐
php-class-tree, php类文件下函数展示
php-cs-fixer, php语法检查
php跳转插件(类似其他编辑器的ctrl+click)
需要同时安装以下两个插件:
goto
goto-definition
鼠标光标放置在要跳转的类下,按下快捷键ctrl-alt-enter即可使用
php-debug, php debug
autocomplete-php, php代码自动补全
python插件推荐
python-tools, Python跳转插件
python-debugger, python debug
autocomplete-python, python代码自动补全
linter-pep8, python编码规范检查
打造atom成为golang开发神器
安装主题
atom-theme
atom-editor
monokai-seti
https://atom.io/packages/monokai-seti
安装开发专用字体
使用免费字体“Inconsolata”:
通过这个链接查看和下载这个字体:http://www.levien.com/type/myfonts/inconsolata.html
安装开发语言包
Atom自带的标准包里涵盖了大部分开发语言。我做Go开发还差两个语言包,各自是Dockerfile语法和Google Protobuf语法。这两个在我的项目中大量被使用到。
language-docker: https://atom.io/packages/language-docker
language-protobuf: https://atom.io/packages/language-protobuf
安装插件
go-plus
https://atom.io/packages/go-plus
这个插件提供了Atom中差点儿全部go语言开发的支持。包括 tools, build flows, linters, vet 和 coverage tools。它还包括非常多代码片段和一些其他特性。
在你的命令行中输入以下的命令来确保你安装了全部go tools:
go get -u golang.org/x/tools/cmd/...
go get -u github.com/golang/lint/golint
go-plus有许多的特性,但我在开发时最喜欢的是它可以实时的给我反馈语法错误和编译错误。每当我保存一个文件,go-plus就会在后台执行你提前配置好的要执行的go tools,比如:go vet, go oracle, go build等等,然后将错误和警告在编辑器底部显示出来。这个功能很赞,并且大大提升了开发速度。
atom-go-plus-linter
它相同可以在编辑器的相应行上显示该行的编译错误提示和错误信息,这样你就能非常快的定位哪一行有错。
错误和警告分别用红色和淡黄色做区分。
atom-go-plus-gutter-errors
go-rename
https://atom.io/packages/go-rename
这个插件通过食用Go rename tool。提供非常智能和安全的 变量,方法和结构体重命名功能。当你选中一个目标时。你可以通过快捷键 ALT-R 非常方便的初始化重命名对话框。
让Atom更像VIM
你可能想问我“那为什么不直接使用VIM呢?”情况是这种,我确实有使用VIM一年多。可是我想尝试使用Atom。我非常享受atom的体验,特别是我可以在atom上使用全部的VIM命令。
vim-mode: https://atom.io/packages/vim-mode
vim-surround: https://atom.io/packages/vim-surround
last-cursor-position: https://atom.io/packages/last-cursor-position
在 Keymap 文件里定义一些快捷键:
'atom-text-editor:not(mini).autocomplete-active':
'ctrl-p': 'core:move-up'
'ctrl-n': 'core:move-down'
'.vim-mode.command-mode:not(.mini)':
'ctrl-f': 'core:page-down'
'/': 'find-and-replace:show'
另一个VIM模块Easy-Motion上面没有说到,这是由于它和Atom 1.0不兼容,可是我相信非常快就会有人来更新它或者在创建一个新版本号。
自己定义atom的TreeView
file-icons
https://atom.io/packages/file-icons
我刚開始想这个插件可以让我的tree view色彩丰富,它提针对不同后缀的文件,目录供了大量的icon显示。
然后我使用了一下它,发现它确实非常酷。
而且它可以让我非常快的一扫就能找到我要找的文件。
它还有些配置。可以让你选择显示哪些文件的icon等。
以下你能够看到假设你安装了file-icons插件后你的tree view会变成什么样。试试吧,我确定你会喜欢它的。
file-icons
应用一些自己定义CSS
默认的TreeView行距有些过高,所以我想要改动css降低行间的padding。
另一个要改动的地方是。treeview的字体也要改动成我在编辑框中使用的字体,来保持样式的一致性。我通常使用Inconsolata 。
// style the background color of the tree view
.tree-view {
font-family: "Inconsolata";
font-size: 12px;
}
代码片段(Code Snippets)
大部分流行的编辑器和IDE都会使用code-completion针对不同语言的特定keyword自己主动补全代码。
这样通常可以包括最经常使用的代码,可是离真正的补全还差一截。
可是Atom同意你在snippets.cson文件里创建自己的代码片段仓库。在Atom的菜单条能够打开这个文件,然后你就能够创建自己的代码片段库了。
你须要使用.source.go 作为scope,这样这个片段就仅仅会在你编辑go文件时提示你了。
以下是我近期加入的一些代码片段:
'.source.go':
'return nil and error':
'prefix': 'rne'
'body': 'return nil, err'
'return false and error':
'prefix': 'rfe'
'body': 'return false, err'
'Return True and Nil':
'prefix': 'rte'
'body': 'return true, nil'
'Import logrus':
'prefix': 'logrus'
'body': 'log "github.com/Sirupsen/logrus"'
一旦你创建好代码片段,你立刻就能在编辑器中使用。
我很喜欢这个功能,他能让我编码速度飞快。
atom-complete-snippets
Dash
Dash是一个Mac OS X下的很棒的商业软件。它可以让你在离线模式下实时訪问150+的API 文档。我在做Ruby开发时使用了几年时间,如今做go开发相同适用它。
了解Dash: https://kapeli.com/dash
atom-dash
有一个Atom插件可以让你通过快捷键CTRL-H 直接跳转动dash,这样查询选中方法的方法定义文档就很方便了。
dash
https://atom.io/packages/dash
自己定义编辑器样式
Atom有一个相比其他编辑器很大的长处是,它可以通过食用css全然的自己定义编辑器UI。假设你对atom不惬意。差点儿atom全部方面都可以被你自己改动和提高。
改变 Symbol View 的样式
atom有一个让我非常困扰的区域是原声的Symbols-View对话框,它的行太高了,而且不能非常好的在查看窗体适应非常多行显示。我更喜欢Sublime的显示方式,所以我把atom的symbol view的样式改成和sublime一样。
.symbols-view {
&.select-list ol.list-group li .primary-line,
&.select-list ol.list-group li .secondary-line {
font-family: Inconsolata;
font-size: 14px;
// let lines wrap
text-overflow: initial;
white-space: initial;
overflow: initial;
// reduce line-height
line-height: 1.0em;
padding-top: .1em;
padding-bottom: .0em;
// make sure wrapped lines get padding
// padding-left: 21px;
&.icon:before {
margin-left: -21px;
}
.character-match {
color: rgb(200, 200, 10) !important;
}
}
}
.symbols-view {
&.select-list ol.list-group li .secondary-line {
float: right;
margin-top: -12px;
padding-top: 0em;
padding-bottom: 0em;
font-size: 12px;
color: rgba(200, 200, 10, 0.8) !important;
}
}
这是一个更精简的Symbol View。能够看到行高降低了。行数提示放在了右側:
atom-symbol-view-styles
自己定义行选中效果
有个非常有趣的插件叫 Hightlight-Line:
https://atom.io/packages/highlight-line
这个插件同意你改动选中行的样式。在我的样例中,我在选中行上下側加上了黄色的虚线。
我喜欢这种样式,它可以让我非常好的识别我所选中的区域。
atom-highlight-selected
你能够将‘solid’替换为 ‘dashed’ 或者 ‘dotted’。
atom-text-editor::shadow {
.line.highlight-line {
background: rgba(255, 255, 255, 0.05) !important;
}
.line.highlight-line-multi-line-dashed-bottom {
border-bottom-color: yellow !important;
}
.line.highlight-line-multi-line-dashed-top {
border-top-color: yellow !important;
}
}
为Go代码生成 Ctags
自己主动补全在开发中是一个很重要的功能,同一时候也让开发这很困扰。
有一个很棒的插件叫 gotags 。它可以兼容ctags而且专为go设计。它将AST工具化。而且会解析Go的标准库,很的智能。它比标准的ctags工具生成的ctags好太多。
gotags: https://github.com/jstemmer/gotags
通过以下命令安装gotags
go get -u github.com/jstemmer/gotags
在你的源代码文件夹下运行以下命令声称ctags:
gotags -tag-relative=true -R=true -sort=true -f="tags" -fields=+l .
这将会在你的项目根文件夹下生成新的tags文件,让你的代码提示更加智能。
atom-go-tags