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

更轻易的体式格局写文档解释。

运用体式格局： /** <tab>

emmet

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

emmet-jsx-css-modules

适用于 css 模块的 emmet 东西。 .foo 如今将扩大为 <div className = {style.foo}> </ div>，而不是 <div className =“foo”> </ div>。

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