Atom 是 Github 出品,基于 Electron 开发的跨平台编辑器。
之前是 Sublime 重度使用者,因为 React Native 出了个只支持 Atom 的插件,于是开始折腾 Atom,以前没用是因为它太慢了,一个月卸三次装三次,目前 1.9 版本性能提升了好多,插件都是基于 JS,目前插件数量跟 Sublime 的差不多,毕竟是基于浏览器,使用的技术都是前端熟悉的。
那么,从更换主题开始吧…
更换主题
下面是原来 Sublime 使用的界面主题和语法颜色,很高大上:
|
|
在 Atom 中安装界面主题 material-ui 和语法颜色 oceanic-next,文档说的很详细
修改主题
使用了上面的主题和颜色后,发现编辑区的背景颜色跟 sublime 用的不一样,因为 Atom 本质上是个 Chrome 浏览,第一个想法就是调出控制台 (alt+cmd+i),查看这个节点 atom-text-editor
的样式 ,接着按照 material-ui 的文档修改主题:
|
|
如果擅长前端的童鞋用 Atom 上手会很高效,这玩意就是个浏览器,^_^ !
插件们
-
Atom 内置
whitespace
插件会『覆盖』掉 EditorConfig 配置,导致trim_trailing_whitespace
和insert_final_newline
在.editorconfig
中无效,参考 github issue
(##2016-08-03##) Markdown
-
内置的
markdown-previwe
很好用,(shift+ctrl+m)打开实时预览,还能设置 github 的样式,很酷 -
让预览视图随着编辑光标位置滚动,滚的很准!
-
-
错误提示的 UI 做的真好
-
如果安装了
nuclide
会引发配置错误提示,参考这里
问题不大,但是每次出现很烦,所以 Disablelinter-flow
,反正nuclide
本身有nuclide-flow
支持 Flow 检测
-
点击文本跳转的基础,支持各类扩展跳转,如安装
js-hyperclick
插件支持变量定义跳转等-
JS 点击变量跳转到定义处…强大到远超我想像
-
-
代码智能提示,还支持 ES6,它是会扫描代码作分析的,快赶上 IDE了。
-
选中文本后,高亮其他相同文本,双击变量最实用
-
require、src 等路径提示
-
愉快的写注释文档,包括方法等…
-
选中正则之后,展示可视化的匹配路径,酷~
-
导航区文件图标,图标齐全好看
-
手写 HTML 的神器,有个快捷键会跟 markdown preview 冲突,参考这里
-
本地记录文件历史
-
颜色相关工具,包括:把
rgb(x,x,x)
背景色变成相应颜色,选色…牛 -
代码格式化,支持巨多语言
-
自动更新插件,虽然设置里面点一下就可以,但是自动不更好吗
-
快速打开本地 git 项目,省得切换一次命令行
-
像 Sublime 那样在右侧有个全景代码小图,支持很多扩展
-
语法支持 ES6、JSX、Flow …,还支持预览 babel 或 react 编译结果
(nuclide)[https://atom.io/packages/nuclide]
帮助开发 ReactNative、Flow 相关项目,装完感觉更像 IDE
nuclide 的 tree-view 覆盖原来的,所有原来 tree-view 上 git 状态颜色就看不到,参考这里,不用 nuclide 的 tree-view,
同时也失去它的 remote file sync 等功能(open-recent)[https://atom.io/packages/open-recent]
像 Sublime 的 File -> Open Recent,搞不懂为啥不内置
(react)[https://atom.io/packages/react]
JSX 语法高亮、格式化…最喜欢的事 HTML->JSX
(term3)[https://atom.io/packages/term3]
终端
(todo-show)[https://atom.io/packages/todo-show]
找出所有
// TODO
(tool-bar)[https://atom.io/packages/tool-bar]
让 Atom 支持 toolbar,需要安装其他扩展插件
(Advanced Open File)[https://atom.io/packages/advanced-open-file]
快速打开硬盘上某个文件,如果不存在则创建,支持相对项目路径,创建多个文件,真方便
(keybinding-resolver)[https://atom.io/packages/keybinding-resolver]
查看快捷键对应哪些命令,命令冲突时最好用了
Git
(git-plus)[https://atom.io/packages/git-plus]
便捷 git 操作
(merge-conflicts)[https://atom.io/packages/merge-conflicts]
merge 冲突的时候,用上它方便逐个修改冲突
(source-preview)[https://atom.io/packages/source-preview]
转化后的代码预览,是一个基础插件,需要配合其他 provider 插件
疑难杂症
安装插件速度慢
在
~/.atom/.apmrc
配置 npm 镜像1registry = https://registry.npm.taobao.org或者命令行
1apm config set registry https://registry.npm.taobao.org
CC BY-NC-SA 3.0 CN
本著作采用 署名-非商业性使用-相同方式共享 3.0 中国大陆 进行许可
欢迎转载,但转载请注明来自 zhenyong.site,并保持转载后文章内容的完整