新編碼神器Atom使用紀要
來自: http://www.jeffjade.com/2016/03/03/2016-03-02-how-to-use-atom/
Atom 是 Github 專門為程序員推出的一個跨平臺文本編輯器。她很大程度上繼承了SublimeText的美,而又不僅如此。有費了蠻大力氣總結了一篇關于SublimeText文章: 如何優雅地使用Sublime Text ,這其中可以感受個人對于Sublime的鐘愛。而如今試用了 Atom 一個多月以來,我被迫見異思遷了,幸好我不是一個喜新厭舊的男人~在編碼砌字時,很多時候一款編輯器的標簽不夠用的,所以現在兩款兼而用之。
Atom與SublimeText3對比
- Atom1.0之后,有比Sublime更美的UI,不輸Sublime的插件包,比Sublime更加舒適的細節,比如: cmd-\ 顯示或隱藏目錄樹。
- 更為簡潔人性化的設置/插件安裝等(當然SublimeText也不太復雜)。
- Atom算是一款web app,源碼都是 CoffeeScript 寫的,連界面都可以用 CSS 來自定義,擴展可以用JS開發,完全可以深度定制打造自己的IDE。Sublime基于Python,兩者擴展性都非常強。
- Atom 暫時還是免費的。而SublimeText,額,一直會彈那個框(使用網上注冊碼?)。
- 對 Markdown 的支持更加完美(見下文);這一點真心是贊的不要不要的。
- 類Web App嘛,對各平臺的支持更為有好;比如:在mac下打開xxx文件/文件夾,Atom:terminal下直接 atom xxx 即可。而SublimeText會相對繁瑣很多,比如為其添加系統別名,可參見 Mac必備軟件漸集之ZSH-終極Shell 。windows下,安裝了 Atom ,就已經在鼠標右鍵列表了。
- Atom 有友好的中文社區 Atom China 。
關于如何初步使用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后修改或者新增的文件
導航
(等價于上下左右)
ctrl-p 前一行
ctrl-n 后一行
ctrl-f 前一個字符
ctrl-b 后一個字符
alt-B , alt-left 移動到單詞開始
alt-F , alt-right 移動到單詞末尾
cmd-right , ctrl-E 移動到一行結束
cmd-left , ctrl-A 移動到一行開始
cmd-up 移動到文件開始
cmd-down 移動到文件結束
ctrl-g 移動到指定行 row:column 處
cmd-r 在方法之間跳轉
目錄樹操作
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-ui A 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呼出設置界面自行更改。
</div>