JS/React 開發者的 Atom 終極配置

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