[基礎]前端, 就從編輯器說起

前言

前端不像其他的老牌語言, 有幾個固定的 IDE, 前端只需要一個純文本編輯器即可, 因此只要集成了稍微幾個有助於編碼的功能, 就能叫做前端編輯器, 如果有全流程的成套解決方案, 即滿足從代碼拉取 git 到代碼編輯的基礎功能, 到代碼斷點 debugger, 再到遠程調試, 再到發布的集成, 叫 IDE 也不為過.

我需要的功能有:

1. 語法高亮當然是基本功能
2. 強大的搜索功能, 最好是在搜索的時候就能編輯而不是先到搜索頁, 然後再到搜索結果頁, 修改完了再返回搜索頁點進去下一個搜索結果.
3. 支持 mac/linux 通用快捷鍵(如 ctrl + a回到行首, ctrl + e 回到行尾)
4. 當我在眾多文件中來回編輯的時候能夠返回/前進到之前的游標所在的地方
5. 能夠通過簡單的點擊跳轉到變數定義的地方而不是讓我肉眼找或者搜索浪費時間
6. 代碼提示/自動完成等

以下是我使用過的編輯器的使用心得和最後推薦, 不喜歡看過程的(哎, 這個浮躁的社會)直接看最後的推薦即可

記事本

當我剛開始學習 html 的時候, 我使用 win 的記事本, 敲遍了某個不記得名字的 HTML 書上的所有例子, 一周就基本入門了 css 和 html

Dreamweaver

之後我使用 Dreamweaver, 代碼提示挺不錯, 所見即所得雖然是個 feature, 但是基本不可用, 因為畫出來的界面會有大量冗餘代碼, 而且那個時候響應式的概念剛剛剛出現, Node 也橫空出世, 因此很快就拋棄了.

Editplus

之後使用過 editPlus, 是個文本編輯器, 支持高亮, 但是也就是個加強版的記事本. 放

Sublime

之後就是大名鼎鼎的 sublime, 眾多的插件非常好用, 打開文件的速度也快的不得了, 但是分割窗口的操作複雜, 有時候需要在不同tab打開相同文件內容, 可以是可以, 但是操作挺麻煩的, 而且最多只能分四個窗口, 不能隨心所欲的分割窗口. 放棄

Webstrom

之後就入了 webstrom, 從此愛上了這款 IDE, 是的叫它編輯器已經不正確了, 因為它集成了很多前端開發過程中用到的工具, 如 Git, Node 支持, 遠程調試支持, 斷點調試應用支持, 安裝插件的話還有資料庫如 SQL, MongoDB 的支持. 也因為對 wb 的喜歡, 嘗試 JetBrains 下的其他IDE, 如intelliJ IDEA 寫 Java, 以及 Pycharm 寫 Python, 都很不錯.

但是令人懊惱的是, 這個軟體因為是用 java 開發的, 一次編譯到處運行體現的不錯, 因此其內存佔用和 cpu 佔用很高, 需要很高的配置才能用的舒服.

我本人的電腦是15年15寸低配, i7雙核集顯, 16寸內存, 256G SSD. 只用一個 Retina 屏幕, 開發體驗很完美, 但是做前端開發不可能只有一個屏幕, 我本人如果條件允許會使用三個屏幕, 一個寫代碼, 一個看設計稿, 一個看頁面效果.

但是我自己在使用的過程中發現, 我的 mac 在只外接1個4k 屏幕(解析度3840x2160), 然後把wb 窗口放到4k 屏幕上的話是非常吃顯卡的, 在我的集顯電腦上的表現就是打字的時候 cpu 佔用會飆高到400%, 打字不限於中文輸入和英文輸入, 均如此, 卡的完全無法使用. 測試過的唯一的可以解決此問題的方法是把解析度調到最低, 也就是1920x1080(沒記錯的話), 然後把 wb 的字體調到合適的大小, 我調整的編輯器字體是6, 界面字體是8

但是這個問題解決的也很勉強, 因為如果臨時不用外接 4k 屏, 而將其放到自帶 retina 顯示屏的時候, 字體很小完全看不清. 因此這個辦法只能臨時解決而已.

除了這點, wb 可以稱的上是完美, 我需要的功能它都能滿足, 我不需要的功能它也竭盡所能的提供, 贊.

Vscode

看了尤大推薦的 Vscode, 於是使用了下, 功能很強大, 插件很好用, 但是就像微軟一貫的作風一樣, 細節總是不足, 甚至還有點不爽, 比如 max/linux 上通用的 ctrl+a 回到行首, 在 vscode 中就是回到所在行的最前面, 而不是回到當前行的文字內容的最前面. 這種情況對有縮進的行來說極其痛苦, 況且代碼縮進再正常不過了, 每次一按 ctrl+a, 就到了行首, 還得再按幾遍 ctrl+f 將游標向後移動幾位才行.

另外, 寫代碼的時候需要分割窗口, 但是 vscode 最多只能分三個, 而且多分窗口的 feature 需求, 在16年末的時候就有人提給開發組, 依然一直沒有做. 也沒有插件能夠支持, 這兩點讓我徹底放棄了 vscode.

Atom

我看到我的的同事們, 好幾個都在使用 Atom, 於是我也使用了下, 很不錯. 但是要配合插件使用, 而且插件安裝源要切換成國能的 tb 源才行, 不過無所謂, 只需要一點簡單的配置, 就能滿足我開頭列出的6點基本需要.

我安裝的 Atom 的插件有:

1. 各種必備框架的支持(Angular/Vue/React), 及語法(ES5/ES6/JSX)的支持, 需要的話搜索即可
2. atom-beautify 格式美化
3. atom-ernjs 智能提示
4. emmet 縮進自動出來 tag, 但是其默認快捷鍵 ctrl+e 跟Mac/Linux 的返回行首, 衝突了, 需要手動修改下快捷鍵才行
5. file-icons 讓文件 icon 看起來好看
6. hyperclick 配合下一個使用
7. js-hyperclick 按住 Command + 滑鼠左鍵跳轉到函數定義的地方, 配合上一個使用
8. last-cursor-position 找到游標的上一個/下一個位置, 這點在 Webstrom 就是工具欄的前進後退按鈕

總結

如果 Webstrom 能夠在我的4K 屏幕上不卡頓的話, 其當之無愧是完美的 IDE

因此我推薦折中的方案: Atom 編輯器

(頭圖無關, 完)

推薦閱讀：