windows下Atom安裝與使用
阿新 • • 發佈:2019-01-31
初次接觸這個編輯器,發現比sublime好用。折騰一上午,由於各種不懂尤其是安裝外掛浪費好長時間,其實很簡單。廢話不多說,直接開始。(希望能夠對你有幫助)
1.下載
下載之後雙擊檔案AtomSetup-x64.exe
執行有點慢,稍微等一會。之後顯示這個介面
2. 配置環境變數
安裝Atom過程太輕鬆了什麼都不需要,是不是有點慌,安裝在哪裡呢?
由於我們安裝外掛需要用到apm這裡命令,這裡需要將其新增到環境變數裡面,如圖。
在桌面Atom圖示→右擊→屬性→檢視安裝位置。我的安裝位置是在:C:\Users\erdou\AppData\Local\atom。
現在配置環境變數:在PATH後面新增
;C:\Users\erdou\AppData\Local\atom\bin
注意前面有一個英文狀態分號。
這樣就可以使用apm命令了。
開啟命令視窗看是否可以使用apm
Win+R → cmd → apm ls
檢視安裝了哪些包:
apm ls
如果沒有安裝外掛會顯示:
Community Packages (0)
後來發現其實也可以不用配置apm環境變數。有npm就可以了。不知道會不會有影響(如果有問題後續會完善)。
選單欄
File | 檔案的儲存開啟,專案的儲存開啟,最後一次的專案載入,關閉及設定中心,以及使用者自定義的配置(配置檔案,初始化指令碼,樣式風格,程式碼片段,快捷鍵配置檔案)等 |
---|---|
Edit | 檔案編輯的操作,檔案編碼格式,及行跳轉等 |
View | 過載頁面,全屏,字型大小的縮放等 |
Find | 都是關於查詢的 ,跟Sublime text極其相似,快捷鍵基本一樣 |
Package | 包,就是外掛列表的集合點 |
Help | 幫助文件,軟體更新,協議等 |
3. 更改atom主題
下載方法:在install頁搜尋seti_ui等主題名稱即可,(主題seti_ui的作者:jesseweed)
4.atom外掛安裝
1.方法一、
這是最簡單的外掛安裝,但可能會安裝很慢。(如果安裝特別慢,就直接用方法二)
2.方法二、
以安裝emmet外掛為例子:
- Ctrl+Shift+P: 打開面板
- 輸入:install packages選擇install Packages Themes
- 輸入要安裝的外掛名字emmet
- 點入外掛介紹 找到github地址
- 開啟git切換到 C:\Users\erdou.atom\packages
git clone https://github.com/emmetio/emmet-atom
- 切換到安裝的外掛資料夾
cd emmet-atom
npm install
- 重啟Atom
下面是參考:
cd ~/.atom/packages
git clone https://github.com/emmetio/emmet-atom
cd emmet-atom
npm install
3.前端必備外掛
- atom-html-preview — 瀏覽器實時預覽效果 (得更改快捷鍵,快捷鍵更改方法在下面)
- color-picker — 取色器,太讚了有木有,,比sublime那個好用,不卡,啟動超快
- emmet — HTML,CSS快速編寫的神器,emmet官網還有視訊演示
- atom-ternjs—-JavaScript 自動補全外掛還可以配置語言版本和指令碼庫
- docblockr — 程式碼註釋工具,提供程式碼註釋的模板
- jquery-snippets — jQuery 程式碼段
- javascript-snippets — JavaScript 程式碼段
- atom-ternjs — JavaScript 自動補全外掛還可以配置語言版本和指令碼庫
- atom-beautify — 格式化程式碼
- autocomplete-paths — 路徑補全,比如下找到某個圖片的位置
- autocomplete-sass — sass 語法自動補全
- atom-bootstrap3 — bootstrap3程式碼提示
- autocomplete-plus — 完善自帶autocomplete 程式碼自動補全外掛
- autoprefixer — 自動給 css 檔案中的屬性新增廠商字首
- project-manager — 強大的,快速的開啟專案的外掛,非常的有用
- run-in-browser — 將當前的 html 在瀏覽器中開啟
- open-in-browser — 將當前的 html 在瀏覽器中開啟
- linter — 程式碼驗證外掛 (下面是前端可能用到的)
- linter-jshint, for JavaScript and JSON, using jshint
- linter-coffeelint, for CoffeeScript, using coffeelint
- linter-scss-lint, for SASS/SCSS, using scss-lint
- linter-less, for LESS, using less
- linter-csslint, for CSS, using csslint
顯示效果外掛
- react — 對 react 語法高亮支援,並且有補全效果
- file-icons — 在目錄樹 tree-view 的檔案前面加上響對應的 logo
- highlight-column — 高亮當前游標所在的列
- highlight-line — 高亮當前游標所在的行
- highlight-selected — 在當前編輯的檔案中高亮全部匹配的單詞
- pigments — 對 css 檔案中使用的顏色進行響應顏色的高亮
- minimap — 用過Sublime Text的都知道有一個很實用的功能,就是內部編輯有一個小小的程式碼圖,這貨就是補全atom這個功能的,支援高亮程式碼
美化篇外掛
- file-icons — 增加許多圖示,在側邊藍檔名前面的icon,,很贊
- filetype-color — amazing,,在標籤欄不同格式檔案顯示不同的顏色的標題,支援二度設定
- color-picker — 調色盤,可以選中自己鐘意的顏色,而且可以在面板中調整透明度
markdown寫作工具外掛
- markdown-scroll-sync—-編寫 markdown 可以根據寫到的部位,右邊預覽可以實時的滾動
- markdown-table-formatter—-對 markdown 語法繪製的表格格式化
協作篇外掛
- git-plus — 與Sublime Text 的sublimegit功能基本一致
(有好的外掛會繼續更新補充)
5.如何更改Atom快捷鍵
1.開啟keymap.cson檔案:
2.把要改的快捷鍵寫在最下面,依次新增。
'atom-text-editor':
# F12在瀏覽器預覽html頁面
'f12':'rib:run-in-browser'
#右邊欄實時瀏覽器呼叫快捷鍵
'ctrl-F12':'atom-html-preview:toggle'
6. 快捷鍵
英文 | 中文 | 快捷鍵 | 功能 |
---|---|---|---|
New Window | 新建介面視窗 | Ctrl + Shift + N | 如中文意思 |
New File | 新建檔案 | Ctrl + N | 如中文意思 |
Open File | 開啟檔案 | Ctrl + O | 如中文意思 |
Open Folder | 開啟資料夾 | Ctrl + Shift + O | 如中文意思 |
Add Project Folder | 載入專案目錄 | Ctrl + Alt + O | 如中文意思 |
Reopen Last Item | 重新載入上次專案 | Ctrl + Shift + T | 如中文意思 |
Save | 儲存檔案 | Ctrl + S | 如中文意思 |
Save As | 另存為 | Ctrl + Shift +S | 如中文意思 |
Close Tab | 關閉當前編輯文件 | Ctrl + W | 如中文意思 |
Close Window | 關閉編輯器 | Ctrl + Shift + W | 如中文意思 |
Undo | 撤銷 | Ctrl + Z | 如中文意思 |
Redo | 重做 | Ctrl + Y | 如中文意思 |
Cut | 剪下 | Shift + Delete | 如中文意思 |
Copy | 複製 | Ctrl + Insert | 如中文意思 |
Copy Path | 複製文件路徑 | Ctrl + Shift + C | 如中文意思 |
Paste | 貼上 | Shift + Insert | 如中文意思 |
Select All | 全選 | Ctrl + A | 如中文意思 |
Select Encoding | 選擇編碼 | Ctrl + Shift +U | 就是設定檔案的編碼 |
Go to Line | 跳轉到某行 | Ctrl + G | 支援行列搜尋,Row:Column |
Slect Grammar | 語法選擇 | Ctrl + Shift + L | 和Sublime的Syntax設定功能一樣 |
Reload | 過載 | Ctrl+ Alt +R | 重新載入當前編輯的文件 |
Toggle Full Screen | 全屏 | F11 | 如中文意思 |
Increase Font Size | 增大字型 | Ctrl + Shift + “+” | Sublime的Ctrl + 也能生效 |
Decrease Font Size | 減小字型 | Ctrl + Shift + “-“ | Sublime的Ctrl - 也能生效 |
Toggle Tree View | 展示隱藏目錄樹 | Ctrl + | Sublime的Ctrl+K,+B這裡也可以生效 |
Toggle Commadn palette | 全域性搜尋面板 | Ctrl + Shift + P | 和Sublime的大同小異 |
Select Line | 選定一行 | Ctrl + L | 如中文意思 |
Select First Character of Line | 選定游標至行首 | Shift + Home | 如中文意思 |
Slect End of Line | 選定游標至行尾 | Shift + End | 如中文意思 |
Select to Top | 選定游標處至文件首行 | Ctrl + Shift + Home | 就是游標處作為分割線,取文件上部分 |
Select to Bottom | 選定游標處至文件尾行 | Ctrl + Shfit + End | 就是游標處作為分割線,取文件下部分 |
Find in Buffer | 從快取器搜尋 | Ctrl + F | 與Sublime一致 |
Replace in Buffer | 高階替換 | Ctrl + Shift + F | 與Sublime一致 |
Select Next | 匹配選定下一個 | Ctrl + D | 和Sublime一模一樣有木有 |
Select All | 匹配選定所有 | Alt + F3 | 和Sublime一模一樣有木有 |
Find File | 查詢檔案,選定開啟 | Ctrl + P | 與Sublime不一樣 |
Delte End of Word | 刪除游標處至詞尾 | Ctrl + Del | 如中文意思 |
Duplicate Line | 複製當前行追加到後面 | Ctrl + Shift + D | 如中文意思 |
Delete Line | 刪除一行 | Ctrl + Shift + K | 如中文意思 |
Toggle Comment | 啟用註釋 | Ctrl + / | 與Sublime一致 |
Toggle developer tools | 開啟Chrome偵錯程式 | Ctrl + Alt + I | 神奇啊 |
Indent | 增加縮排 | Ctrl + [ | 向右縮排 |
Outdent | 減少縮排 | Ctrl + ] | 向左縮排 |
Move Line Up | 行向上移動 | Ctrl + up | 如字面意思 |
Move Line Down | 行向下移動 | Ctrl + Down | 如字面意思 |
Join Lines | 行連結 | Ctrl + J | 追加 |
newline-below | 游標之下增加一行 | Ctrl + Enter | 與sublime 一致 |
editor:newline-above | 游標之上增加一行 | Ctrl + Shift + Enter | 與sublime 一致 |
pane:show-next-item | 切換編輯的標籤頁 | Ctrl + Tab | 如中文意思 |
Fuzzy Finder | 檔案跳轉面板 | Ctrl + T | 如字面意思 |
Select Line Move above | 選中行上移 | Ctrl + up | 如中文意思 |
Select Line Move below | 選中行下移 | Ctrl + down | 如中文意思 |
Symbol-view | 進入變數、函式跳轉面板。 | Ctrl + R | 如中文意思 |