新編碼神器Atom使用紀要

時間 2019-11-05

原文原文鏈接

Atom是 Github 專門爲程序員推出的一個跨平臺文本編輯器。她很大程度上繼承了SublimeText的美，而又不只如此。有費了蠻大力氣總結了一篇關於SublimeText文章: 如何優雅地使用Sublime Text，這其中能夠感覺我的對於Sublime的鐘愛。而現在試用了 Atom 一個多月以來，我被迫見異思遷了，幸虧我不是一個喜新厭舊的男人～在編碼砌字時，不少時候一款編輯器的標籤不夠用的，因此如今兩款兼而用之。html

原文首發(我的博客～晚晴幽草軒): 新編碼神器Atom使用紀要前端

Atom與SublimeText3對比

Atom1.0以後，有比Sublime更美的UI，不輸Sublime的插件包，比Sublime更加溫馨的細節，好比：Atom下 cmd-\ 顯示或隱藏目錄樹；（Sublime默認是 Ctrl＋K+B ）。vue
更爲簡潔人性化的設置/插件安裝等（固然SublimeText也不太複雜）。git
Atom算是一款web app，源碼都是 CoffeeScript 寫的，連界面均可以用 CSS 來自定義，擴展能夠用JS開發，徹底能夠深度定製打造本身的IDE。Sublime基於Python，二者擴展性都很是強。程序員
Atom 暫時仍是免費的。而SublimeText，額，一直會彈那個框(使用網上註冊碼？)。github
對 Markdown的支持更加完美(見下文)；這一點真心是讚的不要不要的。web
類Web App嘛，對各平臺的支持更爲有好；好比：在mac下打開xxx文件/文件夾，Atom：terminal下直接 atom xxx 便可。而SublimeText會相對繁瑣不少，好比爲其添加系統別名，可參見Mac必備軟件漸集之ZSH－終極Shell。windows下，安裝了 Atom，就已經在鼠標右鍵列表了。shell
Atom,類Web的年輕一代編輯神器，在打開軟件速度上稍遜SublimeText3。相比之下，對大文件響應處理上相比之下，還需很大提高。不過潛力仍是挺足的。npm
Atom 有友好的中文社區Atom China。windows

關於如何初步使用Atom，能夠參見官方手冊：Atom 基礎使用。

Atom安裝篇

Atom軟件自己安裝

能夠去Atom官網下載安裝包，跟普通安裝一致。

能夠在終端terminal中安裝：

Mac OS
```
brew install Caskroom/cask/atom
```

Window OS

能夠用管理員身份打開Powershell，而後用 choco install 去安裝 Atom.

choco install atom

這一點具體能夠參見文章：Win下必備神器之Cmder

Atom的插件安裝

Command+Shift+P呼出設置界面，點擊 Install ，在調出的頁面輸入框中輸入你想安裝的插件名，搜索這個插件，而後再出現的插件選項中點擊下載。
Atom編輯器還自帶了一個叫作apm(Atom Package Manager)的包管理工具，用過npm的同窗應該對包管理工具不會陌生，咱們能夠經過apm查找Atom插件，安裝和刪除插件等操做。好比對emmet插件的操做。
```
//查找  
  ~ apm search emmet  
  //安裝
  ~ apm install emmet  
  //刪除  
  ~ apm remove emmet
```

Atom快捷鍵篇

文件切換

ctrl-shift-s 保存全部打開的文件
cmd-shift-o 打開目錄
cmd-\ 顯示或隱藏目錄樹
ctrl-0 焦點移到目錄樹
目錄樹下，使用a，m，delete來增長，修改和刪除
cmd-t或cmd-p 查找文件
cmd-b 在打開的文件之間切換
cmd-shift-b 只搜索從上次git commit後修改或者新增的文件

目錄樹操做

cmd-\ 或者 cmd-k cmd-b 顯示(隱藏)目錄樹
ctrl-0 焦點切換到目錄樹(再按一次或者Esc退出目錄樹)
a 添加文件
d 將當前文件另存爲(duplicate)
i 顯示(隱藏)版本控制忽略的文件
alt-right 和 alt-left 展開(隱藏)全部目錄
ctrl-al-] 和 ctrl-al-[ 同上
ctrl-[ 和 ctrl-] 展開(隱藏)當前目錄
ctrl-f 和 ctrl-b 同上
cmd-k h 或者 cmd-k left 在左半視圖中打開文件
cmd-k j 或者 cmd-k down 在下半視圖中打開文件
cmd-k k 或者 cmd-k up 在上半視圖中打開文件
cmd-k l 或者 cmd-k right 在右半視圖中打開文件
ctrl-shift-C 複製當前文件絕對路徑

書籤

cmd-F2 在本行增長書籤
F2 跳到當前文件的下一條書籤
shift-F2 跳到當前文件的上一條書籤
ctrl-F2 列出當前工程全部書籤

選取

大部分和導航一致，只不過加上shift

ctrl-shift-P 選取至上一行
ctrl-shift-N 選取至下同樣
ctrl-shift-B 選取至前一個字符
ctrl-shift-F 選取至後一個字符
alt-shift-B, alt-shift-left 選取至字符開始
alt-shift-F, alt-shift-right 選取至字符結束
ctrl-shift-E, cmd-shift-right 選取至本行結束
ctrl-shift-A, cmd-shift-left 選取至本行開始
cmd-shift-up 選取至文件開始
cmd-shift-down 選取至文件結尾
cmd-A 全選
cmd-L 選取一行，繼續按回選取下一行
ctrl-shift-W 選取當前單詞

編輯和刪除文本

基本操做

ctrl-T 使光標先後字符交換
cmd-J 將下一行與當前行合併
ctrl-cmd-up, ctrl-cmd-down 使當前行向上或者向下移動
cmd-shift-D 複製當前行到下一行
cmd-K, cmd-U 使當前字符大寫
cmd-K, cmd-L 使當前字符小寫

刪除和剪切

ctrl-shift-K 刪除當前行
cmd-backspace 刪除到當前行開始
cmd-fn-backspace 刪除到當前行結束
ctrl-K 剪切到當前行結束
alt-backspace 或 alt-H 刪除到當前單詞開始
alt-delete 或 alt-D 刪除到當前單詞結束

多光標和多處選取

cmd-click 增長新光標
cmd-shift-L 將多行選取改成多行光標
ctrl-shift-up, ctrl-shift-down 增長上（下）一行光標
cmd-D 選取文檔中和當前單詞相同的下一處
ctrl-cmd-G 選取文檔中全部和當前光標單詞相同的位置

括號跳轉

ctrl-m 相應括號之間，html tag之間等跳轉
ctrl-cmd-m 括號(tag)之間文本選取
alt-cmd-. 關閉當前XML/HTML tag

編碼方式

ctrl-shift-U 調出切換編碼選項

查找和替換

cmd-F 在buffer中查找
cmd-shift-f 在整個工程中查找

代碼片斷

alt-shift-S 查看當前可用代碼片斷

在~/.atom目錄下snippets.cson文件中存放了你定製的snippets

定製說明

自動補全

ctrl-space 提示補全信息

摺疊

alt-cmd-[ 摺疊
alt-cmd-] 展開
alt-cmd-shift-{ 摺疊所有
alt-cmd-shift-} 展開所有
cmd-k cmd-N 指定摺疊層級 N爲層級數

文件語法高亮

ctrl-shift-L 選擇文本類型

使用Atom進行寫做

ctrl-shift-M Markdown預覽
可用代碼片斷

b, legal, img, l, i, code, t, table

git操做

cmd-alt-Z checkout HEAD 版本
cmd-shift-B 彈出untracked 和 modified文件列表
alt-g down alt-g up 在修改處跳轉
alt-G D 彈出diff列表
alt-G O 在github上打開文件
alt-G G 在github上打開項目地址
alt-G B 在github上打開文件blame
alt-G H 在github上打開文件history
alt-G I 在github上打開issues
alt-G R 在github打開分支比較
alt-G C 拷貝當前文件在gihub上的網址

推薦一些好用的插件

主題
- seti-uiA dark colored UI theme for Atom with custom file icons. (+Seti Syntax)
- atom-material-ui 好看到爆
- atom-material-syntax
美化
- atom-beautify 一鍵代碼美化
- file-icons 給文件加上好看的圖標
- atom-minimap 方便美觀的縮略滾動圖
git
- atomatigit 可視化git操做
代碼提示
-emmet 這個不用介紹了吧，前端開發必備，誰用誰知道;
- atom-ternjs js代碼提示很強大，高度定製化
- docblockr jsdoc 給js添加註釋
- color-picker 取色器必備插件
- pigments 顏色顯示插件必裝
- terminal-panel 直接在atom裏面寫命令了
- svg-preview svg預覽
- 便捷操做
- advanced-open-file 快速打開、切換文件
代碼校驗
- linter代碼校驗工具;A Base Linter with Cow Powers
Web前端
- autoclose-html 閉合html標籤
- language-vue-component Atom編寫Vue高亮
- vue-autocompile Auto compiles vue in atom
- language-vue Syntax highlighting for vue component files

其插件已至關豐滿，能夠在這裏搜索查找。Packages make Atom do amazing things.

舒爽書寫做(Markdown)

Atom有自帶MarkdownPreview,支持Ctrl＋Shift＋M實時預覽。裝上markdown-writer插件，根據其默認配置:Settings for Keymaps，完美；想必之下比SublimeText下的書寫爽不少；也比簡書，做業部落要更爲強大。好比對已經寫下的文字加粗，選中 Command＋B便可；若是文字還沒寫，空格下 Command＋B 就會生成 **｜**，光標在第二個*以後，非常方便。固然這快捷是能夠更改的， cmd + shift + p輸入setting呼出設置界面自行更改。 markdown-writer書寫 Markdown 默認快捷鍵以下：

快捷鍵操做	做用效果
"shift-cmd-K":	"markdown-writer : insert-link"
"shift-cmd-I":	"markdown-writer : insert-image"
"cmd-i":	"markdown-writer : toggle-italic-text"
"cmd-b":	"markdown-writer : toggle-bold-text"
"cmd-'":	"markdown-writer : toggle-code-text"
"cmd-k":	"markdown-writer : toggle-keystroke-text"
"cmd-h":	"markdown-writer : toggle-strikethrough-text"
"ctrl-alt-1":	"markdown-writer : toggle-h1"
"ctrl-alt-2":	"markdown-writer : toggle-h2"
"ctrl-alt-3":	"markdown-writer : toggle-h3"
"ctrl-alt-4":	"markdown-writer : toggle-h4"
"ctrl-alt-5":	"markdown-writer : toggle-h5"
"shift-cmd-O":	"markdown-writer : toggle-ol"
"shift-cmd-U":	"markdown-writer : toggle-ul"
"shift-cmd->":	"markdown-writer : toggle-blockquote"
'shift-cmd-"':	"markdown-writer : toggle-codeblock-text"
"cmd-j cmd-p":	"markdown-writer : jump-to-previous-heading"
"cmd-j cmd-n":	"markdown-writer : jump-to-next-heading"
"cmd-j cmd-d":	"markdown-writer : jump-between-reference-definition"
"cmd-j cmd-t":	"markdown-writer : jump-to-next-table-cell"