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

LiangJ 发布于2019-08-20 16:55 / 1893人阅读

摘要：开发者的终极配置原文作者原文链接根据多年以来不断完善配置的经验，决定这次给也来一个大改造。快捷键帮助开发人员在不同的编辑器之间保持一致的编码风格。一组专注，用于优化现代开发生产力的命令集，目标是符合推荐的代码规范。

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

原文作者：Elad Ossadon

原文链接：The Ultimate Atom Editor Setup (+for JS/React)

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

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

实用工具 atom-beautify

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

快捷键：⌃+⌥+B

prettier-atom

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

快捷键：⌃+⌥+F

atom-transpose

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

快捷键：⌥+T

case-keep-replace

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

快捷键：⌘+⌃+R

change-case

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

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

copy-path

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

duplicate-line-or-selection

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

快捷键：⌘+⇧+D

editorconfig

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

file-icons

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

git-plus

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

highlight-selected

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

local-history

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

project-manager

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

快捷键：⌘+⌃+P

atom-reveal-file-in-finder

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

快捷键：⌘+⌃+P

related

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",
]

set-syntax

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

快捷键：⌘+⇧+P

sort-lines

排序/删除重复行。

sublime-style-column-selection

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

快捷键：⌥+Drag

tab-foldername-index

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

sync-settings

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

toggle-quotes

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

快捷键：⌘+⇧+’

atom-spotify2

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

HTML/CSS/JS/React Specific Packages atom-ternjs

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

atom-wrap-in-tag

为选择的文本增加标签。

快捷键：⌥+⇧+W

autoclose-html

自动添加关闭标签。

autocomplete-modules

自动补全 require/import 声明。

color-picker

很厉害的颜色选择器。

快捷键：⌘+⇧+D

docblockr

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

使用方式： /**

emmet

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

emmet-jsx-css-modules

适用于 css 模块的 emmet 工具。 .foo 现在将扩展为

，而不是

。

es6-javascript

一组专注 ES6，用于优化现代 JavaScript 开发生产力的命令集，目标是符合 Airbnb 推荐的代码规范。

js-hyperclick & hyperclick

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

pigments

在项目文件中显示颜色。

linter-eslint

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

tree-view-copy-relative-path

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

lodash-snippets

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

language-babel

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

react-es7-snippets

React ES7 snippets for atom

atom-jest-snippets

Jest 测试提示

我的主题 UI Theme: one-dark-ui Syntax Theme: dracula-theme 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

云服务器 GPU云服务器 java开发手册终极版 java开发环境的配置开发用的云服务器配置 linux系统如何配置java系统的开发环境

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83256.html

前端周刊第55期：10X 程序员？

摘要：本文作者王仕军，商业转载请联系作者获得授权，非商业转载请注明出处。想知道我接下来会写些什么欢迎订阅我的掘金专栏或知乎专栏前端周刊让你在前端领域跟上时代的脚步。 showImg(https://segmentfault.com/img/remote/1460000009407536?w=592&h=314); 共 2127 字，读完需 4 分钟。我本周读到 1 篇比较有趣的文章叫做《Th...

KaltZK 2019-08-20 16:31 评论0 收藏0
2016-JavaScript之星

摘要：在，是当之无愧的王者，赢得了与之间的战争，攻陷了的城池。于月发布了版本，这一版本为了更好的表现加入了渲染方式。前端框架这个前端框架清单可能是年疲劳的元凶之一。的创建者，目前在工作为寻找构建简单性和自主配置性之间的平衡做了很大的贡献。春节后的第一篇就从这个开始吧~本文已在前端早读课公众号上首发原文链接 JavasScript社区在创新的道路上开足了马力，曾经流行过的也许一个月之后就过...

Binguner 2019-08-20 14:04 评论0 收藏0
(译 & 转载) 2016 JavaScript 后起之秀

摘要：在年成为最大赢家，赢得了实现的风暴之战。和他的竞争者位列第二没有前端开发者可以忽视和它的生态系统。他的杀手级特性是探测功能，通过检查任何用户的功能，以直观的方式让开发人员检查所有端点。 2016 JavaScript 后起之秀本文转载自：众成翻译译者：zxhycxq链接：http://www.zcfy.cc/article/2410原文：https://risingstars2016...

darry 2019-08-20 14:04 评论0 收藏0
听说2017你想写前端？

摘要：前端的工作更具有挑战性，方向更多样化假设我今年要入前端开发的坑这里强调前端是因为，现在很多，安卓开发加入大前端的这个称呼。安卓版微信在截稿之前是大概的版本最新是并且持续了年不变，据说是为了稳定。作者：Jay（沪江开发工程师）本文为原创文章，转载请注明作者及出处不好意思，没有像其他公众号一样赶着发文章，每年到这个时候总有一大波什么今年前端预测，技术框架预测什么的。我这次写这篇文针对的...

legendmohe 2019-08-20 19:10 评论0 收藏0
听说2017你想写前端？

摘要：前端的工作更具有挑战性，方向更多样化假设我今年要入前端开发的坑这里强调前端是因为，现在很多，安卓开发加入大前端的这个称呼。安卓版微信在截稿之前是大概的版本最新是并且持续了年不变，据说是为了稳定。作者：Jay（沪江开发工程师）本文为原创文章，转载请注明作者及出处不好意思，没有像其他公众号一样赶着发文章，每年到这个时候总有一大波什么今年前端预测，技术框架预测什么的。我这次写这篇文针对的...

lifefriend_007 2019-08-01 17:33 评论0 收藏0