前段時(shí)間更換了設(shè)備，正好趁著這個(gè)機(jī)會來記錄一下適合前端開發(fā)的一個(gè)環(huán)境，以及推薦提高效率的應(yīng)用。

[[273383]]

基礎(chǔ)環(huán)境

Node.js 是JavaScript運(yùn)行時(shí)，目前前端工程化必不可缺的一個(gè)環(huán)境。通常我們會選擇穩(wěn)定版本(LTS)進(jìn)行下載。

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

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

Git 是最先進(jìn)的代碼版本控制軟件。

開發(fā)環(huán)境

關(guān)于編輯器

目前前端開發(fā)主流的編輯器有 sublimeText、WebStorm、vscode，三種主流器各有特點(diǎn):

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

筆者一開始也是sublimeText用戶，但自從使用了vscode后就再也回不去了，因?yàn)榇_實(shí)是太好用了!

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

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

關(guān)于瀏覽器

前端的工作更多時(shí)候是與用戶打交道，我們的工作產(chǎn)出通常在瀏覽器頁面上呈現(xiàn)。

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

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

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

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

• Chrome 鍵盤快捷鍵
• Chrome 開發(fā)工具指南

關(guān)于設(shè)計(jì)圖

每個(gè)團(tuán)隊(duì)的設(shè)計(jì)師提供的設(shè)計(jì)圖可能是不一致的，有些團(tuán)隊(duì)的設(shè)計(jì)師可能使用Skitch, 一個(gè)可以直接導(dǎo)出為html文件的設(shè)計(jì)圖、有些則直接提供PSD文件。

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

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

• Photoshop這個(gè)著名的設(shè)計(jì)軟件就不必再多說了吧，優(yōu)點(diǎn)是功能齊全，你想要的這里都有，缺點(diǎn)是具備一定的學(xué)習(xí)成本，功能繁多帶來的問題就是眼花繚亂。
• PxCook 就是專門為前端與設(shè)計(jì)師協(xié)作的工具，閹割了開發(fā)所用不到的功能，具備各種標(biāo)注于測量。

擴(kuò)展應(yīng)用

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

chrome 插件

下面推薦一些比較好用的開發(fā)類插件，但鏈接需要科學(xué)上網(wǎng)才能訪問：

Markdown Preview Plus

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

Enhanced GitHub

該插件將增強(qiáng)github的功能，能顯示倉庫的大小，能夠支持下載單個(gè)文件等。

GitHub Hovercard

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

JSONView

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

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

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

Node.js的調(diào)試工具，具體教程商城頁有介紹。

Vue.js devtools、Redux DevTools、React Developer Tools

對應(yīng)前端框架開發(fā)必備的 devtools，需要的時(shí)候再安裝也不遲。

Proxy SwitchyOmega

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

應(yīng)用

Sourcetree

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

Git flow

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

Postman

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

Mac 環(huán)境

針對 macOS 環(huán)境的補(bǔ)充

Homebrew: macOS 的包管理器，如果需要使用 macOS 進(jìn)行開發(fā)的話，請務(wù)必安裝該包!

scrollreverser： 可以將鼠標(biāo)和觸摸板設(shè)置不同的方向。

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

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

iterm2: macOS 默認(rèn)的終端實(shí)際上并不太好用，iterm2的出現(xiàn)就是為了替代默認(rèn)的重點(diǎn)，它支持更多的功能。

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