磨刀不誤砍柴工，配置你的前端開發環境：Atom

時間 2019-12-04

標籤磨刀砍柴配置前端開發環境 atom 简体版

原文原文鏈接

Atom 是 Github 官方開發的一款可定製化的、跨平臺的文本編輯器。有兩點須要注意一下，一是 Atom 是由 Github 官方開發，二是其定製化程度很是高。前者的結果是編輯器對 Github 很是友好，若是項目託管在 Github 上的話，用 Atom 能夠很方便地進行 Git 操做。後者的結果就是咱們能夠根據本身的須要定製本身的編輯器，使得本身的效率最大化，也讓本身舒舒服服、開開心心地碼代碼。javascript

Atom 的特點

Atom Package Library

Atom 的背後有一個強大的社區，帶來了一大波插件，被稱爲 packages，利用這些 packages 你能夠很好的自定義你的編輯器。java

對 Git 友好

當你在一個 git 項目中添加或修改文件時，Atom 會用特定的顏色標記出來，好比綠色表明新建的文件，黃色表明修改的文件。node

另外，在編輯器的右下角，還能顯示你在哪一個分支，你添加、刪除了多少行。git

Command Palette

命令行面板用 cmd + shift + p / ctrl + shift + p 調出，在這個面板中你能夠輸入命令控制你的編輯器甚至控制你的安裝的 package。npm

Fuzzy File Finder

按鍵： cmd + T / ctrl + T，調出查詢面板，當項目比較大時，你能夠利用這個面板，輸入關鍵字，Atom 便能幫你找到關鍵字所在的文件。服務器

Atom Shell Commands

在打開這項功能以前，須要先安裝 Atom Shell Commands。babel

安裝好了後，就能夠在終端（Terminal）中用命令行控制 Atom。好比：編輯器

atom：在當前目錄下新建一個新的 Atom 窗口ide
atom .：將當前目錄在 Atom 中打開工具
atom myProject：在 Atom 中打開一個特定的文件夾或文件
atom -h：查看 atom 命令後面能夠跟哪些參數

固然你也可使用 apm 命令在終端來安裝 package，前提是安裝了 Node。好比安裝一個叫「pigments」的 package，那麼你可使用以下命令：

apm install pigments

這裏就插播一句，安裝了 Node 後，npm(Node Package Manager) 也一塊兒安裝了，經過 npm 命令能夠安裝 Node 的 package。可是速度通常會比較慢，因此咱們習慣上會再安裝一個 nrm(Npm Regisry Manager)，這是一個 npm 註冊中心的管理工具，npm 註冊中心表明 packages 存放的地方。若是使用默認的註冊中心，那麼安裝時就須要從國外的服務器中下載 package，速度就比較慢，因此咱們會利用 nrm 來將國外的註冊中心切換至中國的 taobao 註冊中心，具體講是利用以下命令：

nrm use taobao

檢查是否成功切換的標誌是輸入 nrm current 或者 nrm ls。而後之後安裝 package 時即可以從國內鏡像進行下載了。

Snippets

將你通常比較常寫的代碼作成模板，方便之後自動填充。

好比我常常須要些 ES6 的類，因此我便將 ES6 類作成模板。

之後，只要我在 JS 文件中輸入 cl 再按 Enter 鍵，則會出現：

這裏解釋一下模板的用法，以我上面的模板爲例。

.source.js：目標文件類型，就是模板只有在 JS 文件中自動填充才能生效
class：模板的名字，僅僅做爲你模板的一個標識
prefix：你在使用時輸入的縮略詞，這例子中我須要輸入 cl 來自動補全代碼
body：模板的正文，單行語句只須要 ''，多行語句則須要 """
$1,$2... 光標的位置，按 Tab 或者 Enter 鍵進入下一個位置

定製你的 Atom

下載好對應操做系統的 Atom 而且安裝後，首先就是進入設置界面（Windows 下的 Settings 或 Mac 下的 Preferences)。Atom 設置的一個我認爲最大的好處就是，她將全部的設置都經過圖形化界面來操做，而不像一些編輯器經過一大堆很繁瑣的配置文件。你會看到設置界面的導航欄：

分別是：