前段時間更換了設備，正好趁著這個機會來記錄一下適合前端開發的一個環境，以及推薦提高效率的應用。

[[273383]]

基礎環境

Node.js 是JavaScript運行時，目前前端工程化必不可缺的一個環境。通常我們會選擇穩定版本(LTS)進行下載。

NPM 是javascript的包管理工具，也是目前Node.js默認的包管理工具。一般下載了Node.js后會附帶npm，不用專門的去下載。

YARN 是Fackbook開源的依賴管理包，和npm是做同樣的工作，但相比npm安裝依賴的速度會更加迅速。兩者都是講依賴寫入package.json中，在使用習慣上是相近的。

Git 是最先進的代碼版本控制軟件。

開發環境

關于編輯器

目前前端開發主流的編輯器有 sublimeText、WebStorm、vscode，三種主流器各有特點:

• sublimeText是一個十分輕巧的編輯器，在 macOS 上下載該軟件僅需 15.2MB. 由于輕巧的緣故，很多那你所需的環境需要安裝相應的插件，比如你可能需要某個語言的語法高亮，因此你需要在 store 上找到相應插件來提高你開發體驗。然后該編輯器是付費軟件(雖然可以無限試用
• webStorm 是一個功能強大的編輯器，同時也是一個付費軟件，并不像sublimeText那樣可以無限試用，由于功能太過于齊全，一些低配置的電腦可能會吃不消。以上特點是群友對webStorm的評價，筆者沒有使用該編輯器，不過多評論。
• vsocde 是由微軟開源的一個編輯器，雖然是后起之秀，但開源后該編輯器的設計與體驗迅速吸引了一大批用戶。它內置了一些前端基礎的開發環境，針對Node.js還可以進行短點調試。

筆者一開始也是sublimeText用戶，但自從使用了vscode后就再也回不去了，因為確實是太好用了!

vscode其中有一個插件叫做 setiings sync , 它可以將你的編輯器配置上傳至gist。就算你換了一個全新的設備，下載vscode后，再下載該插件，傳入Token后就可以同步你所有的配置，十分的方便~

vscode的配置可以查看該文章: [[環境搭建] 從零開始配置 vscode](https://anran758.github.io/bl...

關于瀏覽器

前端的工作更多時候是與用戶打交道，我們的工作產出通常在瀏覽器頁面上呈現。

瀏覽器通常提供了開發者工具以供開發者調試，要選擇瀏覽器作為調試可以先參考目前市面的瀏覽器份額： 目前市面上主流的瀏覽器主要就是chrome、Safari、IE/Edge、opera、firefox這五種瀏覽器。國內市場有UC瀏覽器等，但內核的大多都是采用webkit或者兼容低版本IE內核。

從 statcounter 上我們可以看到瀏覽器市場份額，選中 Edit Chart Data, 再選擇 Region 為 China, 我們就能看到中國瀏覽器市場份額的數據, 以 2018.07 - 2019.07 的趨勢為例:

從統計數據來看目前主要的趨勢還是以chrome所使用的webkit內核作為主流，同時chrome的開發者工具對于開發人員十分的友好，因此有很多的開發者選擇了該瀏覽器作為首選的調試工具。chrome還有一個便利就是登陸了谷歌賬號后，可以在別的機器上進行同步插件和配置。

打開chrome，右鍵頁面并選中 "檢查"即可打開開發者工具，chrome的具體使用參考下面幾篇文章:

• Chrome 鍵盤快捷鍵
• Chrome 開發工具指南

關于設計圖

每個團隊的設計師提供的設計圖可能是不一致的，有些團隊的設計師可能使用Skitch, 一個可以直接導出為html文件的設計圖、有些則直接提供PSD文件。

如果要在兩者當中選擇，那么我更喜歡PSD的設計圖。雖然Skitch導出的設計圖可以直接查看每個元素的尺寸，但沒有標注和測量的功能。PSD文件通常是源文件，可以在設計軟件中打開，可以查看具體設計的詳細信息。

打開PSD文件通常有兩種方式：

• Photoshop這個著名的設計軟件就不必再多說了吧，優點是功能齊全，你想要的這里都有，缺點是具備一定的學習成本，功能繁多帶來的問題就是眼花繚亂。
• PxCook 就是專門為前端與設計師協作的工具，閹割了開發所用不到的功能，具備各種標注于測量。

擴展應用

有了以上的環境其實就可以投入開發了，但實際工作中還是不太夠用，我們需要添加一些好用插件或者工具可以增加效率~

chrome 插件

下面推薦一些比較好用的開發類插件，但鏈接需要科學上網才能訪問：

Markdown Preview Plus

markdown 是程序員最常用的一個文件之一，默認情況下chomre查看markdown是無格式文字展示，可以安裝此插件將markdown格式為文檔。

Enhanced GitHub

該插件將增強github的功能，能顯示倉庫的大小，能夠支持下載單個文件等。

GitHub Hovercard

該插件提供 hover card, 顯示用戶信息、倉庫信息、issue、ccommit 信息等。

JSONView

JSON是一個通用的數據格式，無論是前端還是后端都會跟這個數據格式打交道，有時我們直接在URL打開會返回JSON接口后，會在頁面上顯示一串字符串對象，并不太方便閱讀數據。

該插件就是格式化返回的JSON, 使其美觀。

NIM(Node.js 調試管理工具)

Node.js的調試工具，具體教程商城頁有介紹。

Vue.js devtools、Redux DevTools、React Developer Tools

對應前端框架開發必備的 devtools，需要的時候再安裝也不遲。

Proxy SwitchyOmega

開發中還是必不可免會有使用代理的情況，該插件可以輕松快捷地管理和切換多個代理設置。

應用

Sourcetree

Sourcetree 是Git GUI，使用可視化界面來對代碼進行版本控制，操作起來會比較友好。

Git flow

該包封裝了release、feature、hotfix等項目代碼管理流程，減少輸入git命令過程。git flow也被封裝進了 SourceTree 中，只不過一個是帶有 UI 界面的軟件，另一個是直接在命令行使用的包，滿足不同人的需求。

Postman

Postman是一個跨平臺的應用，它擁有完整的API開發環境，該應用前后端的朋友都能使用的了。在Chrome插件商城中你也能找到它，安裝后會自動將該應用離線下載至本地。如果你更偏愛于命令行，可以嘗試curl。

Mac 環境

針對 macOS 環境的補充

Homebrew: macOS 的包管理器，如果需要使用 macOS 進行開發的話，請務必安裝該包!

scrollreverser： 可以將鼠標和觸摸板設置不同的方向。

ShadowsocksX-NG: 查看更廣闊知識庫的鑰匙

SwitchHosts: 開發中難免會修改hosts，該款軟件可以用于快速切換hosts文件。

iterm2: macOS 默認的終端實際上并不太好用，iterm2的出現就是為了替代默認的重點，它支持更多的功能。

oh-my-zsh: 默認的終端或者iterm2的外觀并不太美觀~ zsh框架能使你的終端顏值更上一步~ 不僅如此，它作為一個框架，有更多的插件和主題可選擇，感興趣的朋友可以深究一下~