atom 編輯器是github平臺上推出的一款完全免費的輕量級開源文本代碼編輯軟件。
atom編輯器中文版是基于electron的框架開發(fā),擁有直觀簡潔的界面和深度可定制系統,兼容VIM模式,集強大的代碼補全、語法高亮等功能于一體,同時提供豐富的插件庫和主題庫,完美支持CSS、HTML、JavaScript等網頁編程語言。
它號稱“21世紀可黑客的文本編輯器”。GitHub支持并開源,并支持跨平臺。和brackets編輯器一樣基于瀏覽器開發(fā),意味著你可以使用less(包含css)來定制編輯器界面,coffeescript(與js類似)編寫插件定制功能。有很多和sublimne類似的地方,比如:命令面板,還有許多快捷鍵。Atom本身不與特定的程序語言開發(fā)廣聯,默認內置多種語言包,支持html、css、java、c、php等,不過它常常被用于前端開發(fā)。

【基本介紹】
Atom 代碼編輯器支持 Windows、Mac、Linux 三大桌面平臺,完全免費,并且已經在 GitHub 上開放了全部的源代碼,Atom windows是GitHub專門為程序員推出的一個跨平臺文本編輯器。具有簡潔和直觀的圖形用戶界面,并有很多有趣的特點:支持 CSS,HTML,JavaScript 等網頁編程語言。它支持宏,自動完成分屏功能,集成了文件管理器。
在代碼編輯器、文本編輯器領域,有著不少的「神器」級的產品,如歷史悠久的 VIM、Emacs 以及如今當紅的 SublimeText。另外還有 EditPlus、NotePad++、UltraEdit 等一大堆流行的利器,可謂百家爭鳴。
然而,作為目前全球范圍內影響力最大的代碼倉庫/開源社區(qū),GitHub 的程序員們并不滿足于此。他們使用目前最先進流行的技術重新打造了一款稱為“屬于21世紀”的代碼編輯器——Atom, 它開源免費跨平臺,并且整合 GIT 并提供類似 SublimeText 的包管理功能,支持插件擴展,可配置性非常高……
【軟件特點】
(1)多平臺支持(Windows、Mac、Linux)
(2)界面美觀、現代化,使用舒適
(3)多文件管理(Atom提供了文件樹列表的功能)
(4)設置管理很方便,不用像Sublime需要自己手動安裝第三方管理插件
(5)由GitHub打造,社區(qū)活躍,免費使用
(6)支持各種編程語言的代碼高亮和代碼補全(部分需要插件支持)
(7)原生Git的支持
(8)原生Markdown支持(實時預覽、代碼高亮,比Mou的代碼高亮效果好很多)
(9)主題插件越來越豐富

【軟件亮點】
開源–遵循MIT協議,代碼托管在github上面;
多平臺支持–支持MAC/WIN/LINUX;
豐富的插件庫和主題庫;
類sublime–風格和sublime text極其相似,不管是風格還是操作上,快捷鍵上一些是通用的;
采用包管理技術–采用了node.js來訪問文件系統和包管理;
強大的生命力–背靠github社區(qū),這對于atom來說,可以注入源源不斷的生命力。
【軟件功能】
作為一個現代的代碼編輯器,Atom有著各種流行編輯器都有的特性,功能上非常豐富,支持各種編程語言的代碼高亮(HTML/CSS/Javascript/PHP/Python/C/C++/ObjectiveC/Java/JSON/Perl/CoffeeScript/Go/Sass/YAML/Markdown等等)、與大多數其他編輯器相比,Atom的語言支持已經算是覆蓋非常全面了。另外,它的代碼補全功能(也叫Snippets)也非常好用,你只需輸入幾個字符即可展開成各種常用代碼,可以極大提高編程效率。
另外,Atom同樣支持SublimeText的幾個重要的功能,譬如GotoAnything、GotoSymbol、GotoLine、命令面板等等,就連快捷鍵也是一模一樣的!相信ST的用戶將會比較輕松地過渡到Atom去。實際上,從功能上來看,目前的Atom編輯器基本就是Sublime的一個復刻版,只是技術實現方式不同,插件的技術也有所差異。

和git完美結合工作
Atom編輯器可以和GIT完美結合,所有對代碼、文本的修改都能體現在編輯器的界面上。比如在文件內新寫的代碼會在左邊標記為綠色,刪除的標記為紅色,修改的標記為黃色。在左邊的目錄導航也能方便的看到文件改動:有改動的文件其文件名和所在文件夾名都會被標記為高亮顯示。編輯器底部會顯示當前所在分支和對文件的修改行數統計,對于GIT用戶來說非常方便。
基于web技術構建
和之前介紹過的微軟VisualStudioCode編輯器一樣,Atom也是基于WEB技術(Chromium+Node.js)開發(fā)的,簡單理解的話編輯器本身其實是一個跑在本地的網頁,這足以讓無數WEB工程師為之興奮!用戶可以用Javascript來編寫編輯器插件,用CSS把主題界面改成任何你喜歡的樣式等,這使得編寫插件、主題、二次開發(fā)的門檻的降低了許多。這也能解釋從Atom發(fā)布到現在不長的時間里,Atom的Package和主題數量都快速增長上來了。
不過,也正因為它基于WEB技術構建的,目前處于初步階段的Atom在性能上與傳統的編輯器還有點差距,在打開大文件時尤為明顯,而在一些機器上也容易出現CPU占用率過高等問題,這一點確實有待改進,而且還是需要大幅改進。
【漢化教程】
首先選擇【file】->【setting】

選擇【Install】然后搜索要安裝的擴展,我這里要安裝的是atom-chs-menu,這是個漢化用的插件,然后點一下【Packages】里進行搜索

Atom安裝擴展 會看到上面的搜索結果,然后點一下【Install】開始安裝
安裝之后不用重啟自動轉換成了中文 安裝之后的包可以在【Packages】里進行管理

【基礎使用】
命令面板當你按下 cmd-shift-P 并且當前焦點在一個窗格上的時候,命令面板就會彈出來。
在這個教程中我們會用類似 cmd-shift-P 的形式來運行命令,這是 Atom 在 Mac 上的默認快捷鍵,如果你在其他的平臺上使用 Atom, 可能會稍有不同。如果某個快捷鍵無法工作,你可以通過命令面板來查找正確的快捷鍵。
在 Atom 中幾乎所有的操作都通過這種搜索驅動的菜單來完成,你只需要按下 cmd-shift-P 來搜索命令,而不必在復雜的傳統菜單欄間點來點去。

除了搜索數以千計的命令之外,命令面板上會顯示每個命令對應的快捷鍵,這意味著你可以在使用這些命令的同時學習對應的快捷鍵,以便之后使用。
在本書的剩余部分我們會向你介紹一些命令,你可以在命令面板中搜索,或使用對應的快捷鍵。
偏好設置Atom 有很多選項和偏好設置,你可以在設置界面修改它們。

在設置界面中,你可以修改主題、修改文本折行的行為(wrapping)、字體大小、縮進寬度、滾動速度等選項。你也可以用這個界面安裝新的插件和主題。
你可以通過菜單欄中 Atom 下的 Preferences 菜單項打開設置界面。你也可以在命令面板中搜索 settings-view:open 或使用快捷鍵 cmd-,.
修改主題你可以在設置界面中修改 Atom 的主題,Atom 內建了 4 個不同的 UI 主題,分別是亮色和暗色版本的名為 Atom 和 One 的主題。以及 8 個不同的語法著色主題。你可以通過點擊左邊欄的 Themes 選項卡來改變當前主題,或安裝新的主題。

UI 主題會修改標簽欄、左側目錄樹(tree view)等 UI 元素的顏色;而語法著色主題修改編輯器中文字的語法高亮方案。你只需要簡單地在下拉框中選擇另一項,即可修改主題。
文本折行你可以通過設置界面指定 Atom 處理空白和折行的策略。

當你啟用了 Soft Tabs, Atom 將會在你按 tab 鍵時用空格來替代真正的制表符,Tab Length 則指定了一個制表符代表多少個空格,或者當 Soft Tabs 被禁用時多少個空格相當于一個制表符。
如果開啟了 Soft Wrap 選項,Atom 會在一行中的文本超出屏幕顯示范圍時將其折為兩行,如果禁用了這個選項,過長的行將簡單地超出屏幕顯示范圍,你必須要橫向移動滾動條才能看到剩余的部分。如果 Soft Wrap At Preferred Line Length 選項被開啟,則總是會在 80 個字
測試功能(Beta Features)在 Atom 的開發(fā)過程中,偶爾會有一些新功能,但沒有默認啟用給所有用戶。如果你愿意的話,你可以在設置界面中提前體驗這些功能。

這對于插件開發(fā)者來說非常有用,開發(fā)者可以在一個功能被默認啟用之前,測試他們維護的插件與新功能的兼容性。
【使用方法】
首先,打開Atom編輯器, 使用Cmd+N新建一個文件, 使用Cmd+S保存文件,將文件名改為new.html, 在new.html中鍵入html四個字符,然后按tab鍵。

然后,在
標簽之間輸入完成html頁面標題以后,再次鍵入tab鍵通過一個關鍵詞來插入一段代碼塊,通過tab鍵在這段代碼塊的輸入點之間移動光標,通過快捷鍵Alt+Shift+S來列出當前文件所提供的所有的Snippets。<br/><img src="/up/1806/201806230946026211.jpg" _xhe_src="/up/1806/201806230946026211.jpg" _xhe_src="/up/1806/201806230946026211.jpg" _xhe_src="/up/1806/201806230946026211.jpg" _xhe_src="/up/1806/201806230946026211.jpg" _xhe_src="/up/1806/201806230946026211.jpg"/><br/><br/>然后,在配置的第一行指定該Snippet應用的文件類型,獲得文件類型字符串最簡單的方式是查看該文件對應的語言插件的Scope項。<br/><img src="/up/1806/201806230946114224.jpg" _xhe_src="/up/1806/201806230946114224.jpg" _xhe_src="/up/1806/201806230946114224.jpg" _xhe_src="/up/1806/201806230946114224.jpg" _xhe_src="/up/1806/201806230946114224.jpg" _xhe_src="/up/1806/201806230946114224.jpg"/><br/><br/>然后,再為Java文件添加一個Snippet項,在設置頁面查看language-java插件的插件信息,插件信息的第一排Scope的值為source.java,Java文件的文件類型字符串就是一個點號。<br/><img src="/up/1806/201806230946224626.jpg" _xhe_src="/up/1806/201806230946224626.jpg" _xhe_src="/up/1806/201806230946224626.jpg" _xhe_src="/up/1806/201806230946224626.jpg" _xhe_src="/up/1806/201806230946224626.jpg" _xhe_src="/up/1806/201806230946224626.jpg"/><br/><br/>然后,通過Cmd+Alt+Shift+[和Cmd+Alt+Shift+]來折疊或展開全部代碼,通過Cmd+K Cmd+Num來指定折疊哪一層縮進,通過Cmd+Ctrl+Alt+F或Fold Selection命令來折疊任意選中的代碼段。<br/><img src="/up/1806/201806230946331351.jpg" _xhe_src="/up/1806/201806230946331351.jpg" _xhe_src="/up/1806/201806230946331351.jpg" _xhe_src="/up/1806/201806230946331351.jpg" _xhe_src="/up/1806/201806230946331351.jpg" _xhe_src="/up/1806/201806230946331351.jpg"/><br/><br/>最后,使用Cmd+K 方向鍵來創(chuàng)建新的分欄,其中方向鍵的方向決定了分欄的方式,比如Cmd+K ↓就會創(chuàng)建一個新的水平分欄,通過Cmd+K Cmd+方向鍵來在分欄間切換光標焦點。<br/><img src="/up/1806/2018062309464546.jpg" _xhe_src="/up/1806/2018062309464546.jpg" _xhe_src="/up/1806/2018062309464546.jpg" _xhe_src="/up/1806/2018062309464546.jpg" _xhe_src="/up/1806/2018062309464546.jpg" _xhe_src="/up/1806/2018062309464546.jpg"/><br/><h3>【插件推薦】</h3>第一個:<br/>js代碼智能提示<br/><img src="/up/1806/20180623094734130.png" _xhe_src="/up/1806/20180623094734130.png" _xhe_src="/up/1806/20180623094734130.png" _xhe_src="/up/1806/20180623094734130.png" _xhe_src="/up/1806/20180623094734130.png" _xhe_src="/up/1806/20180623094734130.png"/><br/><br/>第二個;<br/>代碼美化<br/><img src="/up/1806/201806230947433157.png" _xhe_src="/up/1806/201806230947433157.png" _xhe_src="/up/1806/201806230947433157.png" _xhe_src="/up/1806/201806230947433157.png" _xhe_src="/up/1806/201806230947433157.png" _xhe_src="/up/1806/201806230947433157.png"/><br/><br/>第三個 :<br/>瀏覽器中打開<br/><img src="/up/1806/201806230947523132.png" _xhe_src="/up/1806/201806230947523132.png" _xhe_src="/up/1806/201806230947523132.png" _xhe_src="/up/1806/201806230947523132.png" _xhe_src="/up/1806/201806230947523132.png" _xhe_src="/up/1806/201806230947523132.png"/><br/><br/>第四個:<br/>實現 HTML、CSS 的快速編寫<br/><img src="/up/1806/201806230948029141.png" _xhe_src="/up/1806/201806230948029141.png" _xhe_src="/up/1806/201806230948029141.png" _xhe_src="/up/1806/201806230948029141.png" _xhe_src="/up/1806/201806230948029141.png" _xhe_src="/up/1806/201806230948029141.png"/><br/><br/>第五個:<br/>代碼高亮<br/><img src="/up/1806/201806230948106369.png" _xhe_src="/up/1806/201806230948106369.png" _xhe_src="/up/1806/201806230948106369.png" _xhe_src="/up/1806/201806230948106369.png" _xhe_src="/up/1806/201806230948106369.png" _xhe_src="/up/1806/201806230948106369.png"/><br/><br/>第六個:<br/>代碼選中時高亮顯示<br/><img src="/up/1806/201806230948221622.png" _xhe_src="/up/1806/201806230948221622.png" _xhe_src="/up/1806/201806230948221622.png" _xhe_src="/up/1806/201806230948221622.png" _xhe_src="/up/1806/201806230948221622.png" _xhe_src="/up/1806/201806230948221622.png"/><br/>