Atom Packages(插件)推荐

自从看了李笑来的那篇博文后,尝试使用 atom 编辑器后,喜欢上了清爽的界面和可定制化的功能
webstorm 很强大,但启动速度比较慢,对 markdown 的支持界面不是很友好
sublime 也很方便,但大部分是深色主题,新手不自己安装插件几乎无法使用
atom 不装插件也 ok 的,但为了有更好的体验,推荐一些自己在用的好用插件

注:目前涉及到的主要是前端相关的

各插件的官方页面,统一使用 https://atom.io/packages/插件名 即可检索到
如果想安装全部的,可以使用 sync-settings 一键克隆我的配置^_^

Atom 设置备份同步(重要)

首先这个插件是最重要的,可以保存 atom 包含插件在内的所有配置

sync-settings

数据时保存在 github 里的 gist 里的,首次使用时需要按文档的介绍配置插件里的 personal access token 和 gist id

  1. 创建 personal access token,权限必须勾选 gist
  2. 创建一个新的 gist,文件名 Filename 填写 package.json,描述和文件内容随意填点什么
  3. 从右上角 copy 链接,其中的这段数字就是 gist id
1
<script src="https://gist.github.com/xiaweiss/051f5e8f98d6836a5465fcb195fcae8b.js"></script>

使用时,按 cmd + shift + p 来打开 atom 的命令窗口

1
2
3
4
5
sync-settings:backup  备份
sync-settings:restore 恢复
sync-settings:view-backup 查看所有的备份,会打开 gist
sync-settings:check-backup 本地设置和 gist 最新备份是否相同
sync-settings:fork 输入 gist id 来 fork 他人的配置

我的是 gist id: 051f5e8f98d6836a5465fcb195fcae8b

编辑器优化

package description
atom-clock 显示时间
autosave-onchange 自动保存
file-icons 按不同文件类型显示图标
highlight-selected 双击高亮显示所有这个单词出现的地方
js-hyperclick 点击跳转到定义的位置
move-cursor-improved 光标移动的修正:有东亚字符(日语、汉字时),按上下箭头时使光标可以垂直移动
pigments 显示色值的颜色
platformio-ide-terminal 编辑器内的命令行工具,但只能使用系统默认的 terminal
regex-railroad-diagram 使用图形显示正则表达式
sort-lines 排序/删除重复行。选中要排序的区域,按 F5 即可
structure-view 默使用 ctrl + O(字母) 文件结构
todo-show 可以在项目里找到特定的注释,TODO、NOTE、REVIEW 等等,使用快捷键 ctrl+shift+t 打开列表
tree-view-copy-relative-path 文件目录里复制的相对路径
tree-view-panes 文件目录里显示打开的文件
tree-view-search-bar 文件目录搜索栏
tree-view-sort 排序文件目录,可以选择各种方式来排序左侧文件树
wordcount 字数统计

minimap 缩略图滚动条

package description
minimap 类似 sublime 右侧代码缩略图的功能,好处是加宽了滚动条,适合拖拽
minimap-highlight-selected 高亮选中词
minimap-pigments 显示色值的颜色

git 版本控制

package description
git-log 查看整个项目的分支树
git-time-machine 查看对比当前文件的历史版本,使用 alt+t 打开面板
split-diff 显示修改的地方,并且可以对比,甚至选择其中一方

split-diff 使用 ctrl+alt+t 开启对比
ctrl-alt-n 跳转到下一处(next)
ctrl-alt-p 跳转到上一处(prev)
ctrl-alt-. 把左边的应用到右边去(> 取左边)
ctrl-alt-, 把右边的应用到左边来(< 取右边)

代码格式化

配置请见 JavaScript 代码格式化

package description
editorconfig 统一编辑器格式
linter-eslint eslint 代码检查、格式化
linter-js-standard standard 代码检查
prettier-atom prettier 格式化
standard-formatter standard 格式化

html、css、less 语法支持

package description
autoclose-html 输入 > 时补全标签
less-compiler 只需要在 less 文件开头加一行注释,保存时就会自动编译为新文件
px-rem-tooltip 查看转换前的单位
px2rem-plus px转rem

markdown 支持

package description
markdown-table-editor 使用 Tab 键自动格式化表格格式,使用户可以在源文件里清晰看到表格
markdown-preview-enhanced 最好的 markdown 插件,使用前请关闭 markdown-preview

Vue

package description
language-vue 语法支持
vue2-autocomplete 自动补全
vuejs2-snippets 自动补全

React

package description
language-babel 支持 JSX、ES201x、Flow、GraphQL 语法等
react-snippets 自动补全

注意不要使用插件 react ,因为它和 language-babel 冲突,而后者支持的范围更广

React Native

package description
atom-react-native-style 样式辅助
language-babel 支持 JSX、ES201x、Flow、GraphQL 语法等
react-native-components 组件辅助

不推荐 facebook 官方的 nuclide,因为它会改变整个 atom 编辑器的界面,并且和语法检查的 lint 工具冲突
不利于其他项目和语言的代码编写

微信小程序

package description
atom-wx 语法高亮
wxapp 微信小程序自动补全

图片来源:https://www.pixiv.net/member_illust.php?mode=medium&illust_id=63967458

夏味 wechat
欢迎添加我个人微信,互相学习交流