標籤：

Web 前端 IDE 用的都是什麼啊？

01-02

寫node ，angular什麼的你們都用什麼，用webstorm還說sublime啊

強烈推薦IDEA，前後端均是大殺器。

作為Jetbrain所有ide的爸爸，當然也是webstorm的爸爸，加之超豐富的插件支持，MEAN全棧，Java全家桶，php，python寫起來都非常爽。前端支持的框架也是非常之多。

集成各種伺服器，各種資料庫，各種自動化工具，習慣了以後再也不會想用其它ide

Chrome DevTool，所見即所得。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

（1）修改本地文件

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

（2）在線編輯JS和CSS，刷新後仍保持修改。Chrome插件，Flip the Script，

過去我用 Visual Studio + Sublime Text 輕重搭配.

現在只用 VSCode 了.

對我來說, VSCode 的集成度不多不少, 正好合適. 最近隨著 TypeScript Salsa 的不斷更新, JavaScript 開發體驗也越來越好, 比如已經能認識多數 JSDoc 中標註的類型, 不需要再單獨寫 .d.ts. (為獲得最佳體驗, 建議同步更新到 TypeScript 最新 nightly build.)

很重要的是, VSCode 免費, 開源, 跨平台. ESLint, JSHint 等都有好用的插件, 最新版也加入了默認 EOL, 自動去除尾部空白等, 非常適合作為團隊首選編輯器. ;)

用brackets的悄悄路過

嚴肅滴寫代碼的時候，必須用 Jetbrain 家的 IDE。

Editplus

------------------------------------------------------

用了十幾年了，看來是個很小眾的編輯器

更新：剛剛升級到了 WS 2016，發現它也支持 JavaScript 使用 .d.ts 智能提示了，雖然在 async fetch 的例子上還有點問題，提示的體驗也比 VS Code 差一點。但是總體來說，WebStorm 在功能上是全面超越 VS Code 的。除了三個不足：

1. 收費，但是作為生產力工具並不貴。

2. 比較吃配置，在系統資源吃緊的情況下會卡。

3. 界面可能有些土。

我更推薦輕量而且開源的 VS Code，結合 .d.ts 開發 JavaScript，智能提示非常棒。

截幾張圖：

VS Code 知道這個 data 是 Buffer 哦。

await 返回的值類型也知道。

VS Code 智能提示的背後是 TypeScript 和 .d.ts 定義文件，相比分析 JS 代碼得到的智能提示，.d.ts 方案速度相當快，而且提示很精確，部分彌補了 JS 作為一門動態類型語言的不足。

也許你不會喜歡 TypeScript，但是 VS Code 和 .d.ts 絕對值得一試。

另外，VS Code 開發 CSS 和 HTML 也不錯，內置 emmet、css 補全和 less 語法，可以滿足一般需求。

寫了一個簡單的例子，配好了 config 和 dts, clone 到本地用 VS Code 打開就可以試用了 - GitHub - meowtec/vscode-is-smarter

Hbuilder

WebStorm

JavaScript重構 結合 快捷鍵，這才是真正的神器。。其他特性，其他IDE就可以完成了。

按下Command + Option + Shift + T，會有重構的菜單出現

重構之前最好要有測試！！！！！！！！！！

重構之前最好要有測試！！！！！！！！！！

重構之前最好要有測試！！！！！！！！！！

重構之前最好要有測試！！！！！！！！！！

重構之前最好要有測試！！！！！！！！！！

重構之前最好要有測試！！！！！！！！！！

重構之前最好要有測試！！！！！！！！！！

重構之前最好要有測試！！！！！！！！！！

重構之前最好要有測試！！！！！！！！！！

1. Shift + F6：重命名變數

只需要選中你需要重構的變數名(Command + W)，如下的github，按下快捷鍵改為GithubAPI，引用的地方都會修改。

2. Command + Option + N： 內聯

選中下面的github，按下快捷鍵

代碼就會變成

3. Command + Option + V：提取變數

當你有多個變數重複的時候，可以用這個快捷鍵幫你一起替換。

4. Command + Option + M： 提取方法

當你的函數太長的時候，可以用這個快捷鍵，將其中的一部分抽成一個方法。

。

不過，重構最強大的是同廠下的Intellij IDEA，是最好的Java語言IDE。但是這個Idea不是一般的貴，只能用公司的——ThoughtWorks

Idea下的重構快捷鍵有：

說到底還是用Java的底蘊渾厚。

紙上得來終覺淺

別人再怎麼說也只能作為參考、選項

你要通過實際使用，來打造你自己的 IDEs + plugins 組合

這世上，沒有最好的，只有更適合自己的

vs和webstorm

原文看這裡 http://simplyy.space/article/56ecd7303aae9e5a65c46d64

圖片知乎都給弄沒了 orz

atom tips(0):介紹

github 官方介紹：The hackable text editor

atom 的用戶越來越多，尤其是 web 前端開發者，幾乎能和 sublime 分庭抗禮，而且要知道的是 sublime 是 個人開發者並且收費閉源(蛇神說更新慢的一比，bug萬年不修)，而 atom 則是整個社區驅動，插件一年發布上千個(一堆 amazing 的插件)，而且在 web 前端開發方面現在幾乎擁有 sublime 的所有功能（並且更多，關鍵是還可以 hackable 啊）。

總之，我覺得它非常的簡單易用、外形好看、功能強大、hackable、amazing、強大的社區驅動（github 就是它的生態 orz），前端開發者的福音。

外形

atom 的界面 ui 非常的現代化，並且有很多 theme 可以選擇

我的 theme

性能

我知道大家都黑它啟動慢，但是講真，它越來越快了，我這裡第三方插件裝了56個，只要 1.5s 啟動。

同時 Atom編輯器1.0版本以來性能得到了很大的提升，主要是兩個方面，一方面是js層的各種渲染優化，控制項優化，延遲繪製，延遲載入，只繪製當前需要的東西等，另外一方面是將一些核心數據結構移動到 Electron 的 C++層，如今1.54版本性能較去年版本已經有了本質區別，運行時載入是慢些（但也比eclipse快很多），實際使用並沒覺得不如別的編輯器，況且，js層的優化和C層的優化未來還有很大的空間可以進步。 作者：韋易笑 鏈接：如何評價 GitHub 發布的文本編輯器 Atom？ - 韋易笑的回答 來源：知乎 著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

安裝插件

有著 ui 界面的插件頁面，安裝、管理插件會非常方便

豐富的快捷鍵操作

cmd 在 win 下對應為 ctrl

它是基於 electron(Electron 的底層基於Chromium 和node.js)，並且你會發現它非常像 chrome dev tools(cmd + p，cmd + shift + f 等等快捷鍵完全一樣，一套快捷鍵倆地方使用，簡直不能再棒)。

更多在這 SimplyY 的博客文章: 《atom tips(1):常用操作》 鏈接為：http://simplyy.space/article/56ecd89a39a1954f69680f1e

強大的模糊命令

cmd + shift + p 啟動，通過命令輸入框可以使用任何插件（自帶插件和第三方插件）的功能。特別是對於懶得記太多快捷鍵的童鞋的福音（說的就是我。。）

豐富而且 amazing 的插件

SimplyY 的博客文章: 《atom tips(2):web 開發常用插件》 鏈接為：http://simplyy.space/article/56ecd89a39a1954f69680f1f

強大的 snippets 系統

自己定製自己的代碼補全功能，是那麼的簡單。動態語言補全的福音。而且非常的 hackable。

我自己寫了一個 web 開發者常用的， GitHub - SimplyY/simplyy-snippets: atom package for code complete

詳情見這裡 Atom飛行手冊翻譯： 2.6 代碼段

和 git、github 深度配合

你可以直接從當前文件定位到 github 的文件，和 git 的深度配合

詳情見這裡 Atom飛行手冊翻譯： 2.11 Atom中的版本控制

vim + chrome

糾正一下，sublime 算不上是 IDE，就是個編輯器，與 webstorm 沒什麼可比性。

另：vscode 感覺在 IDE 和編輯器這兩者之間，也就是說，既有 IDE 的集成感，又有編輯器的輕量與速度感。

我自己：IDE 和編輯器各來一款，不衝突。（自己目前是 vscode 和 sublime 的組合）

IntellJ IDEA

IDE不怕重，有機器幫你提高效率，難道非要浪費時間？

編碼是個體力活兒，能讓機器乾的一定要讓機器干。

碼農的精力應該投入到更有創造性的工作中去。

所以，WebStorm更佳。

vscode，我就不提代碼提示有多強大了，游標放在一個變數上，文件里所有變數都能被高亮，語法提示非常之完善，不是別的編輯器裝個插件能比的，誰用誰知道。

Github Atom

Sublime Text 3

最近在用國產的hbuilder，還不錯。

ms code 本身就是html／js寫的

Visual Studio Code

web storm太重如翔

推薦閱讀：

※為什麼中國開源界喜歡「自主研發」輪子？
※作為一個伺服器，node.js 是性能最高的嗎？
※如何看待 Azer Ko?ulu 刪除了自己的所有 npm 庫？
※Node.js 適合用來做 web 開發嗎？
※Websocket 用node還是python開發比較好？

TAG:前端開發 | JavaScript | HTML5 | Nodejs | AngularJS |