①Visual Studio Code：有著強大的外掛生態系統，在使用JavaScript框架和庫構建應用程式時或者使用nodejs時推薦使用Visual Studio Code。

②webstrom 是jetbrains公司旗下一款JavaScript 開發工具。目前已經被廣大中國JS開發者譽為“Web前端開發神器”、“最強大的HTML5編輯器”、“最智慧的JavaScript IDE”等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。

① vscode: 輕量功能強大，提供了對多語言的內建支援，可擴充套件性特變高，內建執行終端。

② atom: 可擴充套件性也很高，缺點比較卡記憶體。

今天給大家分享8款前端程式設計師最愛用的程式碼編輯器，來看看你用哪款？

學程式設計從模仿開始，照書上一個字元一個字元的把程式碼敲進編輯器，編譯，執行，輸出“Hello word！”。Fine， you got it。

我覺得入門從模仿開始是必經之路，入門之初有時候一個字元一個字元的敲，也不能把簡單的程式敲對，能發現錯誤，debug，就能有收穫！

Good Luck！

Adobe Dreamweaver CC

Atom

Sublime Text

Brackets

WebStorm 11

Notepad++

HBuilder

Beyond Compare

最後在對前端程式設計師提點建議：

當我們在寫程式碼的時候，我們的腦子裡到底在想什麼？

當然不是某個語言的具體細節，除非是為了試驗*(*p++)++之類的古怪目的。我們思考的是流程，是關係，說的籠統些，是方法。編碼的過程，只不過是把思維的結果具體化，變成計算機能夠理解的字元而已。

希望我分享的這8款程式碼編輯器能幫到大家。

目前前端使用的編輯器主要有以下幾種。atom,sublime text,vscode等等。這三款編輯器實現自己的外掛各有不同。但是在使用上並沒有太大的差別。

我個人覺得你喜歡使用哪一款就使用哪一款。

vs code這款編輯器比較萬能。它是由微軟開發的一款非常優秀的兵器。如果你非常適應微軟的產品，那麼我相信你會喜歡他的。

atom是由github開發的一款編輯器。這款編輯器也非常的好用。它擁有豐富的外掛以及非常優雅的介面。我個人就是使用這款兵器，我還是覺得非常好用的。

無論怎麼樣自己喜歡就好，工具只是工具而已。

前端的編輯器很多，這個也沒什麼特殊的標準，哪個一定好，哪個一定不好，只要能高效、保質保量的完成工作就行，下面我介紹幾款常用的前端程式碼編輯器，感興趣的可以下載嘗試一下：

1.VS Code：這個是微軟開發的一個免費、開源、跨平臺的程式碼編輯器，支援幾十種程式語言，包括Html，CSS，JS等，小巧靈活、執行效率高，支援常見的程式碼高亮、語法提示、智慧補全、錯誤檢查、Git等功能，而且外掛擴充套件豐富，配置後，可直接除錯執行Java，C++等程式，是一個很不錯的程式碼編輯器，也很適合前端開發：

2.Sublime Text：這也是一個免費、跨平臺、小巧的程式碼編輯器，支援的程式語言與VS Code差不多，輕便、靈活、執行效率較高，支援常見的程式碼高亮、語法檢查、自動補全等功能，安裝相關外掛後，也可以完成程式碼的除錯和執行，對於前端開發來說，也是一個很不錯的程式碼編輯器：

3.Atom：這個是GitHub專門為廣大程式設計師開發的一個程式碼編輯器，免費、開源、跨平臺，支援常見的Html，CSS ，JS，Java，C++等程式語言開發，程式碼高亮、自動補全、語法提示、輕便靈活，是一個非常不錯的程式碼編輯器：

4.Notepad++：這個大部分人都應該聽說過，其實就是記事本的增強版，支援多達27種程式語言，包括前端的Html，CSS，Javascript等，自動補全、語法提示等功能也不錯，小巧靈活，使用方便，是一個很不錯的前端程式碼編輯器：

5.Hbuilder：這個是中國產的一個前端開發的IDE，專門用於web開發，介面柔綠、清爽護眼，支援常見的自動補全、語法提示等功能，還支援Markdown功能，可以將開發的前端網頁雲端打包成安卓或iOS手機應用，是一個非常不錯的前端編輯器：

6.WebStorm：這是一個重量級的Web開發IDE，由Jetbrains公司研發，Web開發的神器，常見的程式碼高亮、智慧補全、語法提示、Git等功能，這個軟體都支援，除此之外，還支援單元測試、程式碼重構、程式碼分析等功能，在大型專案開發中，經常會用到，是一個很不錯的前端IDE：

Sublime Text比較輕，但是需要裝很多外掛，使用起來還是挺好的。

最近一直用vs code，挺好用的，各種補全，高亮等功能都不錯。

.Hbuilder：這個是中國產的一個前端開發的IDE，專門用於web開發，介面柔綠、清爽護眼，支援常見的自動補全、語法提示等功能，還支援Markdown功能，可以將開發的前端網頁雲端打包成安卓或iOS手機應用，是一個非常不錯的前端編輯器： 支援中國產

推薦一款手機端編碼器，支援20多種語言，可以線上執行，可以檢視程式碼

http://suo.im/4ULa8m

隨著web前端設計的職業需求愈來愈大，做前端開發的隊伍也日益壯大。“工欲善其事，必先利其器”，網際網路上大大小小的編輯工具那麼多，哪一個最好用呢?都有什麼特點呢?其實在於個人的喜好，用的順手才是最重要的下面介紹幾個供參考

Brackets

預設有兩個主題，可以透過安裝theme包拓展新的主題。親測brackets的外掛商店並不是很好用，安裝外掛可以透過網頁的外掛商店查詢安裝包.zip的連結，然後透過連結安裝。佈局方面只支援左右或者上下兩種方式。但是編輯器有一個很逆天的自帶功能（雖然其他編輯器也可以透過外掛實現），可以一鍵開啟一個瀏覽器視窗，同步預覽在編輯的網頁渲染效果，HTML和CSS的修改可以頁面無重新整理的即時顯示。另外一個逆天的功能是，直接在HTML程式碼的位置修改CSS，還可以直接在CSS程式碼段中選擇編輯顏色。編輯器不整合nodejs除錯，親測node-debug外掛也不是很好用。

Hbuilder

類似eclipse的介面，功能也是大而全。主打“綠柔”主題，為了宣傳也是很拼。有很豐富的配置選項，這也是Hbuilder作為一個IDE和其他幾個編輯器很大的區別。同時支援邊看邊改模式Hbuilder最強大的是可以很方便做移動端開發，甚至直接打包hybrid應用。Hbuilder是基於eclipse開發的，所以也是使用的eclipse外掛。在外掛選單，Hbuilder推薦了一些常用外掛，基本覆蓋了前端開發需要的各種功能。

Dreamweaver

簡稱DW，有著很好聽的中文名字“夢想編織者”這可能是使用最廣泛的編輯器啦，說到web前端，大家想到的使用工具一般都是Dreamweaver，就是因為使用的人多，使用教程很多，所以他也是比較適合初學者的一款軟體。其中，DW3.0不足3M，乃是經典版，在配置很低的電腦上也能速度很快地流暢執行。可以說，這是一個非常經典的編輯器，中規中矩，大部分常規功能都有。

Atom

有人說他是21世紀駭客文字編輯器，卻擁有著小清新的顏值，UI互動也是做得非常好。軟體本身體積很小，是一個開源免費的軟體，支援多種語言，擁有豐富的外掛，可以自定義介面。但是不太適合開啟執行大檔案，svn的支援也比較差。不過他有著比較強大社群支援，有社群支援的話，就代表著軟體一直有人在維護，持續開發。

Visual Studio Code

他簡稱VSC，是一款免費開源的現代化輕量級程式碼編輯器，支援幾乎所有主流的開發語言，有語法高亮、智慧程式碼補全、自定義熱鍵、括號匹配、程式碼片段、程式碼對比 Diff、GIT 等優勢，支援外掛擴充套件，並針對網頁開發和雲端應用開發做了最佳化。他有兩大特點， 一是外掛數量多，二是是他是微軟提供支援全職團隊來開發的一款編輯器，這是很難得的。該軟體還同時支援主流三大平臺。

Sublime Text

他有著帥酷介面，黑色打底，男生用帥，女生用酷，上面的程式碼五顏六色，不同型別的標籤顏色不同，語法高亮，甚至可以多行選擇多行編輯。最有特點的是他能夠支援多種佈局和程式碼縮圖，使用者可以根據自己的喜好來調整佈局設定，還可以啟動全屏免打擾模式，精心安心敲程式碼。同時他也有編輯恢復能力，也是他的一大特色之一，有了這個功能，媽媽再也不擔心我忘記儲存程式碼突遇停電啦!

雖然他也是收費的軟體，但是可以不限期免費試用，只是會在使用的時候總會有彈窗。但是他也有些缺點，比如sublime text原生對中文支援不太友好，需要安裝外掛才能解決。

WebStrom

一款被廣大前端設計師譽為“web前端開發神器”的H5編輯器。他與Intellij IDEA同源，繼承了Intellij IDEA強大的JS部分功能，因此也被稱為“最智慧的Java IDE”。大部分編輯器有的智慧程式碼不全，html提示，聯想查詢，程式碼檢查等功能，毫無疑問的他也擁有，而且他還額外有程式碼重構，程式碼結構瀏覽，去掉外圍程式碼，程式碼格式化等等強大而且人性化的功能。可以說唯一的缺點就是要收費吧，如果真的需要長期使用，還是花59美元去買一個正版的。

用的比較多的應該是webstorm，不得不說確實很強大前端開發很便利，不過是收費的，免費的推薦vscode，中國產的就推薦hbuilder

1、Bootstrap

Bootstrap是快速開發Web應用程式的bai前端工具包。它是一個CSS和HTML的集合，它使用了新的瀏覽器技術，給你的Web開發提供了時尚的版式，表單，buttons，表格，網格系統等等。

2、藍湖

藍湖用於檢視標註和切圖下載非常方便

3、Cloud9IDE

Cloud9IDE是一個基於Node.JS構建的JavaScript程式開發WebIDE。它擁有一個非常快的文字編輯器，支援為JS，HTML，CSS和這幾種的混合程式碼進行著色顯示。Cloud9IDE還為node.js和GoogleChrome整合偵錯程式，可以在IDE中啟動、暫停和停止。

4、Notepad++

Notepad++是一款非常有特色的編輯器，是開源軟體，可以免費使用。我們開發人員都是必備的。支援的語言:C,C++,Java,C#,XML,HTML,PHP,Javascript!5、VisualStudioCodeVisualStudioCode是一個運行於OSX，Windows和Linux之上的，針對於編寫現代web和雲應用的跨平臺編輯器。

6、GIMPGIMP是GNU影象處理程式(GNUImageManipulationProgram)的縮寫。包括幾乎所有圖象處理所需的功能，號稱Linux下的PhotoShop。GIMP在Linux系統推出時就風靡了繪圖愛好者圈。

7、SecureHeaders

SecureHeaders是Twitter送給Web開發者的一份大禮，作為一款Web安全開發工具，Secureheaders能夠自動實施安全相關的header規則，包括內容安全政策(CSP)，防止XSS、HSTS等攻擊，防止火綿羊(Firesheep)攻擊以及XFO點選劫持等。

8、FontelloFontello是個圖示字型生成器。這個工具允許使用者把這些圖示web字型放到自己的專案中。主要特性如下：縮小字形集合，減小字型大小;合併一些字型標記到單個檔案中；訪問大量專業級的開源圖示。