Edge
  • Introduction
  • 文章
    • 如何将 emoji 当成单色 icon 使用
    • 在 web 使用 JavaScript 模块
    • 从零开始写一个 Promise 库
    • 魔幻语言 JavaScript 系列之类型转换、宽松相等以及原始值
    • React 整洁代码最佳实践
    • 魔幻语言 JavaScript 系列之 call、bind 以及上下文
    • 编写扁平化的代码
    • ES6 Promise:模式与反模式
    • 在 Node.js 中使用原生 ES 模块
    • 在工作中学习
    • JavaScript 中的匿名递归
    • 面向初学者的高阶组件介绍
    • CSS Animations vs Web Animations API
    • JavaScript 异常的防范与监控
    • 喜欢用 Git 做的一些小事
    • 移除在 ESM 模式生成的严格模式
    • 编写现代 JavaScript 代码
    • JavaScript 模块化现状
    • JS/React 开发者的 Atom 终极配置
    • 使用 ES6 的浏览器兼容性问题
    • 为什么是 JSONP
    • 实现不定尺寸图片居中的几种方式
    • Base64 简要笔记及其他
    • 关于内存对齐的一点注解
    • 康威生命游戏的简单实现
    • 使用双端队列模拟动态数组的部分功能
    • 三种变长编码方法的 C 实现
  • 聚沙成塔
    • Node.js
      • 包管理器
    • 基于 OS X 开发指南
    • OS X 小技巧
    • 基于 Windows 开发指南
    • Web Tools
    • Service Worker
    • vim
    • shell
    • 奇技
    • 程序员
    • BFC
    • 事件循环
    • 获取自定义全局变量
    • 颜色格式转换 rgb -> hex
    • 页面间 post 传参
    • 函数重载
    • Tree shaking
    • RequireJS tips
  • 算法
    • 约瑟夫问题
    • 简单排序
    • 快速排序
    • 快速排序优化
    • 三路快排和选择
    • 裴波那契
  • ECMAScript
    • 原型
    • Object.is
  • ES6+
    • ES6 Modules
    • import & export
  • React
    • setState
    • react 与 iscroll 的点击问题
    • pureRender
  • git
    • 重写提交信息
    • http 记住密码
  • 拾遗
    • 拾遗
Powered by GitBook
On this page
  • 实用工具
  • atom-beautify
  • prettier-atom
  • atom-transpose
  • case-keep-replace
  • change-case
  • copy-path
  • duplicate-line-or-selection
  • editorconfig
  • file-icons
  • git-plus
  • highlight-selected
  • local-history
  • project-manager
  • atom-reveal-file-in-finder
  • related
  • set-syntax
  • sort-lines
  • sublime-style-column-selection
  • tab-foldername-index
  • sync-settings
  • toggle-quotes
  • atom-spotify2
  • HTML/CSS/JS/React Specific Packages
  • atom-ternjs
  • atom-wrap-in-tag
  • autoclose-html
  • autocomplete-modules
  • color-picker
  • docblockr
  • emmet
  • emmet-jsx-css-modules
  • es6-javascript
  • js-hyperclick & hyperclick
  • pigments
  • linter-eslint
  • tree-view-copy-relative-path
  • lodash-snippets
  • language-babel
  • react-es7-snippets
  • atom-jest-snippets
  • 我的主题
  • UI Theme: one-dark-ui
  • Syntax Theme: dracula-theme
  • Install EVERYTHING!
  1. 文章

JS/React 开发者的 Atom 终极配置

PreviousJavaScript 模块化现状Next使用 ES6 的浏览器兼容性问题

Last updated 6 years ago

原文作者:Elad Ossadon

原文链接:

根据多年以来不断完善 Sublime Text 配置的经验,决定这次给 Atom 也来一个大改造。这个过程花费了好几个月的时间,但成果还是很卓有成效的,我现在非常满意这份配置。

这份清单将分为实用工具和 React 专用,并涉及到快捷键绑定。

实用工具

可以在 Atom 中 美化 HTML,CSS,JavaScript,PHP,Python,Ruby,Java,C,C ++,C#,Objective-C,CoffeeScript,TypeScript,Coldfusion,SQL等。

快捷键:⌃+⌥+B

使用 Prettier 来格式化 JavaScript 代码,配有强大的 ESlint 集成。

快捷键:⌃+⌥+F

Atom 的转置更像是字符串翻转。在 Sublime 可以将选中的两个字符串进行交换,看起来更有用。

快捷键:⌥+T

使用这个插件可以在替换文本的时候可以保留原来的命名风格。

快捷键:⌘+⌃+R

一个可以快速改变当前选择文本命名方式的工具。比如可以从 camelCase 转换到 snake_case 等。

快捷键:⌘+K ⌘+C/S

可以灵活地复制文件路径。

重复选择文本或者重复一行,跟 Sublime Text 的行为一致,Atom 可以重复一整行。

快捷键:⌘+⇧+D

帮助开发人员在不同的编辑器之间保持一致的编码风格。

Atom 的文件特定图标插件,便于区分不同文件类型。

VIM 风格的 git 插件,在没有终端命令行的时候进行提交等其他 git 操作。

通过双击一个词来高亮整个文件相同的词。

用于维护本地文件历史的插件(对代码文件进行更改的历史记录)。

轻松访问所有项目,还能对项目特定设置和选项进行管理。

快捷键:⌘+⌃+P

可以在工作区或者文件选项卡上打开文件到 Finder 上,快捷命令已经添加到 ⌘+⇧*+P 。

快捷键:⌘+⌃+P

related 提供了访问与当前打开的文件相关的文件的快速方式。 例如,在 .js 和 .spec.js 文件之间切换。

快捷键:⌘+⇧+ R

我的 JS 关联配置 (Menu > Packages > Related > Edit related patterns):

'([^\\/]+)(?!\\.spec).js(x?)$': [
  'tests/$1.spec.js$2#create',
]
'tests/(.+).spec.js(x?)$': [
  '$1.js$2',
]

一种简单的命令方式来设置当前文件语法,与 Sublime 类似。

快捷键:⌘+⇧+P

排序/删除重复行。

alt +单击跨行选择文本块,每行都有插入符号。

快捷键:⌥+Drag

可以替换 TAB 标签内容的插件,在打开相同文件名的文件时保证更高的可读性。

跨 Atom 实例同步设置,键盘映射,用户样式,初始化脚本,代码段和已安装的软件包。 我将所有设置备份到 Gist 并在工作/个人计算机之间进行同步。

快速切换字符串的单引号和双引号。

快捷键:⌘+⇧+’

在 Atom 状态栏中显示在 Spotify 中当前播放歌曲。 不是必要的,但很有趣。

HTML/CSS/JS/React Specific Packages

使用 Tern 为 Atom 提供 JavaScript 代码智能提示,支持 ES5,ES6,ES7,Node.js,jQuery,Angular等。

为选择的文本增加标签。

快捷键:⌥+⇧+W

自动添加关闭标签。

自动补全 require/import 声明。

很厉害的颜色选择器。

快捷键:⌘+⇧+D

更容易的方式写文档注释。

使用方式:/** <tab>

适用于 css 模块的 emmet 工具。 .foo 现在将扩展为 <div className = {style.foo}> </ div>,而不是 <div className =“foo”> </ div>。

点击跳到变量或者 import 定义,js-hyperclick 依赖于 hyperclick。

在项目文件中显示颜色。

允许从 tree view 复制文件的相对路径。

在 Atom 中快速使用 lodash 的代码提示。

支持 JavaScript ES201x,React JSX,Flow和GraphQL语法。

React ES7 snippets for atom

Jest 测试提示

我的主题

Install EVERYTHING!

apm install atom-beautify prettier-atom atom-spotify2 atom-transpose case-keep-replace change-case copy-path duplicate-line-or-selection editorconfig file-icons git-plus highlight-selected local-history project-manager related set-syntax atom-reveal-file-in-finder sort-lines sublime-style-column-selection tab-foldername-index sync-settings toggle-quotes atom-wrap-in-tag atom-ternjs autoclose-html autocomplete-modules color-picker docblockr emmet emmet-jsx-css-modules es6-javascript js-hyperclick hyperclick pigments linter-eslint tree-view-copy-relative-path lodash-snippets language-babel react-es7-snippets atom-jest-snippets one-dark-ui dracula-theme

一个大大提高 HTML 和 CSS 工作流程的插件。

一组专注 ES6,用于优化现代 JavaScript 开发生产力的命令集, 目标是符合 。

&

插件 为 提供 UI 接口,用于对 JavaScript 文件进行静态检查。

UI Theme:

Syntax Theme:

The Ultimate Atom Editor Setup (+for JS/React)
atom-beautify
prettier-atom
atom-transpose
case-keep-replace
change-case
copy-path
duplicate-line-or-selection
editorconfig
file-icons
git-plus
highlight-selected
local-history
project-manager
atom-reveal-file-in-finder
related
set-syntax
sort-lines
sublime-style-column-selection
tab-foldername-index
sync-settings
toggle-quotes
atom-spotify2
atom-ternjs
atom-wrap-in-tag
autoclose-html
autocomplete-modules
color-picker
docblockr
emmet
关于 Emmet
emmet-jsx-css-modules
es6-javascript
Airbnb 推荐的代码规范
js-hyperclick
hyperclick
pigments
linter-eslint
Linter
eslint
tree-view-copy-relative-path
lodash-snippets
language-babel
react-es7-snippets
atom-jest-snippets
one-dark-ui
dracula-theme