前端新入職必備清單，保姆級教程！

作者：CUGGZ 2024-07-24 20:01:03

打開 Node.js 官網(wǎng)（https://nodejs.org/en），其會自動識別當(dāng)前的操作系統(tǒng)l類型，直接下載即可。官網(wǎng)提供了兩個版本的 Node.js：LTS（穩(wěn)定版）和 Current（最新版），這里建議下載穩(wěn)定版，新版可能存在一些Bug。

前端新人入職的第一天通常就是配置環(huán)境，熟悉項目。本文就來分享前端新人入職第一天應(yīng)該如何配置環(huán)境，保姆級教程，值得收藏！

本文以 Mac 電腦為例，使用 Windows 的小伙伴也可以參考！

圖片

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

Node.js

通常我們的項目都是依賴Node.js 環(huán)境的，所以第一步就來安裝 Node.js。

圖片

下載完成后之后，按照提示一步步安裝即可：

圖片

這個安裝包含 Node.js 和 Npm。我這里安裝的是 Node.js v18.16.1 和 Npm v9.5.1。可以在終端中通過 node -v 和 npm -v命令來分別查看 Node.js 和 Npm 版本：

圖片

nvm

不同的項目可能對 Node.js 的版本要求不同，這時我門就需要切換不同版本的 Node.js。我們可以通過 Nvm 來管理Node.js 版本。

nvm（Node Version Manager）是一個用于管理 Node.js 版本的工具，它被設(shè)計成每個用戶獨立安裝，并在每個終端會話中調(diào)用。nvm 可以在任何符合 POSIX 標(biāo)準(zhǔn)的 shell（如 sh、dash、ksh、zsh、bash）上運行，特別適用于以下平臺：Unix、macOS 和 Windows 的 WSL（Windows Subsystem for Linux）。

nvm 的主要功能是允許用戶輕松切換不同版本的 Node.js，并在不同的項目中使用不同的 Node.js 版本。它為每個已安裝的 Node.js 版本提供隔離的運行環(huán)境，使得用戶可以在同一系統(tǒng)上同時使用多個 Node.js 版本而不會相互干擾。

首先在終端中通過以下命令來安裝 nvm：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

當(dāng)我輸入該命令后，終端就報錯了，報錯信息：curl: (7) Failed to connect to raw.githubusercontent.com port 443 after 5 ms: Couldn't connect to server，這個報錯是因為github 有些域名訪問不到，可以通過配置hosts里面的ip域名對應(yīng)關(guān)系解決。

在終端中輸入以下命令來打開hosts文件以進(jìn)行編輯：

sudo vim /etc/hosts

在文件中追加以下對應(yīng)關(guān)系：

199.232.68.133 raw.githubusercontent.com
199.232.68.133 user-images.githubusercontent.com
199.232.68.133 avatars2.githubusercontent.com
199.232.68.133 avatars1.githubusercontent.com

如下：

圖片

然后按下ESC鍵，輸入:w來保存即可。這個配置不僅可以解決 nvm 的安裝問題，還能使加載不了圖片的 GitHub頁面恢復(fù)正常，homebrew 也能裝了。然后再輸入上面的命令就可以安裝nvm了。

安裝完成之后，重新打開終端，輸入 nvm，如果出現(xiàn)以下內(nèi)容就是安裝成功了：

圖片

如果報錯：zsh: command not found: nvm，那就是安裝失敗了。原因就是電腦缺少 bash_profile 文件。該文件位于/Users/MacUserName/.bash_profile路徑，如果沒有就創(chuàng)建一個，通過以下命令來創(chuàng)建：

touch .bash_profile

然后通過以下命令來打開該文件：

open .bash_profile

在文件中添加以下內(nèi)容：

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

保存之后，在終端中輸入以下命令來刷新配置：

source ~/.bash_profile

重新打開終端，輸入nvm 來查看：

圖片

安裝成功就可以愉快的玩耍啦，nvm 提供了很多命令管理 Node.js 版本。當(dāng)輸入 nvm 時，也會列出來所有可用的命令，下面來看看常用的 nvm 命令。

安裝 Node.js 版本：

安裝最新穩(wěn)定版的 Node.js：nvm install stable

安裝指定版本的 Node.js：nvm install <version> （例如：nvm install 14.17.0）

切換 Node.js 版本：

切換到已安裝的其中一個版本：nvm use <version> （例如：nvm use 14.17.0）

可以通過簡寫版本號進(jìn)行切換（例如 nvm use 14），nvm 將自動選擇符合的已安裝版本。

如果在項目目錄中創(chuàng)建了 .nvmrc 文件，nvm 在進(jìn)入該目錄時會自動切換到文件中指定的 Node.js 版本。

查看已安裝的 Node.js 版本：

列出已安裝的所有版本：nvm ls

列出遠(yuǎn)程可用的所有版本：nvm ls-remote

卸載 Node.js 版本：

卸載指定的 Node.js 版本：nvm uninstall <version> （例如：nvm uninstall 14.17.0）

設(shè)置默認(rèn)的 Node.js 版本：

設(shè)置默認(rèn)版本：nvm alias default <version> （例如：nvm alias default 14.17.0）

這樣，在新打開的終端中將自動使用默認(rèn)版本。

運行 Node.js 命令和 npm：

在已安裝的 Node.js 版本下運行命令：nvm exec <version> <command> （例如：nvm exec 14.17.0 node -v）

在當(dāng)前使用的 Node.js 版本下運行命令：nvm run <command> （例如：nvm run node -v）

nrm

在開發(fā)中，我們通常需要安裝很多 npm 包，而默認(rèn)的 npm 源有時候就可能下載很慢，所以就需要切換 npm 源，nrm 就可以幫助我們管理和切換 nrm 源。其特點如下：

管理多個源：nrm 允許管理多個 npm 源，例如官方源、淘寶源、cnpm 源等。你可以根據(jù)需要快速切換不同的源。
快速切換：nrm 提供了快捷的命令來切換 npm 源，無需手動修改配置文件。你可以通過簡單的命令在不同的源之間進(jìn)行切換。
測試速度：nrm 可以測試各個源的響應(yīng)速度，并給出評分，幫助你選擇最快的源來加快依賴包的下載速度。

使用方法：

安裝：首先，需要在全局安裝 nrm。在命令行中執(zhí)行以下命令即可：

npm install -g nrm

查看可用源：你可以使用以下命令查看當(dāng)前可用的源列表：

nrm ls

切換源：要切換到某個源，可以使用以下命令：

nrm use <源名稱>

例如，要切換到 taobao 源，可以執(zhí)行：

nrm use taobao

測試源的速度：你可以通過以下命令測試各個源的響應(yīng)速度：

nrm test

添加自定義源：如果你有自定義的源，可以通過以下命令添加：

nrm add <源名稱> <源地址>

例如，添加一個名為 myregistry 的自定義源：

nrm add myregistry http://myregistry.com/

刪除源：如果要刪除已添加的源，可以使用以下命令：

nrm del <源名稱>

在安裝 nrm 時，我遇到以下報錯，這就是說沒有安裝權(quán)限：

圖片

可以使用管理員權(quán)限進(jìn)行安裝，只需要在命令前面增加以一個 sudo，執(zhí)行后輸入電腦的密碼即可。

Homebrew

Homebrew 是 macOS 上一款常用的包管理工具，用于安裝、升級和管理軟件包，可以通過它來安裝 Git 等。

使用方法如下：

安裝：在終端中執(zhí)行以下命令來安裝 Homebrew：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安裝軟件包：要安裝一個軟件包，只需在終端中執(zhí)行以下命令：

brew install <軟件包名稱>

例如，要安裝 wget 軟件包，可以執(zhí)行：

brew install wget

升級軟件包：可以使用以下命令來升級已安裝的軟件包：

brew upgrade <軟件包名稱>

例如，要升級所有已安裝的軟件包，可以執(zhí)行：

brew upgrade

查找軟件包：如果不確定某個軟件包的名稱，可以使用以下命令進(jìn)行模糊搜索：

brew search <關(guān)鍵詞>

列出已安裝的軟件包：可以使用以下命令列出已經(jīng)安裝的軟件包：

brew list

刪除軟件包：要刪除已安裝的軟件包，可以執(zhí)行以下命令：

Copy Codebrew uninstall <軟件包名稱>

更新 Homebrew：可以使用以下命令來更新 Homebrew 自身：

brew update

開發(fā)工具

IDE

前端開發(fā)用的最多的 IDE 就是 Visual Studio Code 和 Webstorm。其中 VS Code 是開源的，完全免費，而Webstorm 是需要付費訂閱的。筆者一直在用 VS Code，這里以 VS Code 為例，看看如何安裝它。

Visual Studio Code（簡稱為 VS Code）是由微軟開發(fā)的免費、開源且跨平臺的代碼編輯器，其特點如下：

高度可定制：VS Code 允許用戶通過安裝插件和主題來自定義編輯器的外觀和功能，滿足不同用戶的需求。
豐富的擴(kuò)展生態(tài)系統(tǒng)：VS Code 擁有一個龐大的擴(kuò)展市場，用戶可以選擇從數(shù)千個插件中找到適合自己的工具和功能，例如代碼片段、調(diào)試器、語法高亮等。
強(qiáng)大的編輯功能：VS Code 提供了智能代碼補(bǔ)全、語法檢查、代碼導(dǎo)航、重構(gòu)等強(qiáng)大的編輯功能，提高了開發(fā)效率。
內(nèi)置終端：VS Code 內(nèi)置了終端窗口，可以直接在編輯器中執(zhí)行命令行操作，無需切換到外部終端。
調(diào)試支持：VS Code 內(nèi)置了調(diào)試器，可以方便地進(jìn)行代碼調(diào)試和錯誤排查，支持多種編程語言和調(diào)試器插件。

版本控制集成：VS Code 與 Git 和其他版本控制系統(tǒng)集成緊密，提供了版本控制工具和界面，方便代碼管理和協(xié)作開發(fā)。

可視化編輯：VS Code 支持以分割視圖和并排編輯的方式工作，使得同時編輯多個文件變得更加容易。
跨平臺：VS Code 可以在 Windows、macOS 和 Linux 系統(tǒng)上運行，用戶可以在不同的操作系統(tǒng)中享受一致的開發(fā)體驗。
快速啟動和輕量級：VS Code 啟動迅速，占用系統(tǒng)資源相對較少，適合在任何配置的計算機(jī)上進(jìn)行開發(fā)。

首先，在 VS Code 官網(wǎng)（https://code.visualstudio.com/）下載最新的穩(wěn)定版：

圖片

官網(wǎng)會識別我們當(dāng)前是什么系統(tǒng)，自動選擇適合該系統(tǒng)的版本，點擊下載即可。當(dāng)然也可以點擊下拉箭頭選擇需要的版本。

下載的文件，直接解壓就可以用了，長這樣：

圖片

默認(rèn)是英文版，如果需要中文版，可以在插件市場中下載官方提供的簡體中文插件：

圖片

這樣，VS Code 就安裝完成啦，接下來就可以愉快的 Codeing 啦！

VS Code 的插件市場有很多用于日常開發(fā)的高效插件，這里附上之前分享的插件總結(jié)，可以按需安裝：2023年最新最全 VSCode 插件推薦！

另外，VS Code 內(nèi)置了很多快捷鍵，可以參考這篇文章：Visual Studio Code 常用快捷鍵大全

瀏覽器

前端開發(fā)，瀏覽器當(dāng)然必不可少啦，筆者最常用的瀏覽器就是 Chrome，如果需要兼容各個瀏覽器，可以下載多個。

Chrome 可以在其官網(wǎng)（https://www.google.cn/chrome/index.html）下載：

圖片

下載完成后，按照提示安裝即可。安裝完成之后，瀏覽器的默認(rèn)搜索引擎是谷歌，如果需要更改，可以在設(shè)置中進(jìn)行配置：

圖片

Chrome 也有一個很豐富的插件市場，這里附上之前分享的用于前端開發(fā)的高效 Chrome 插件總結(jié)：《推薦50個超實用的 Chrome 擴(kuò)展，建議收藏！》

iTerm2

終端是前端開發(fā)中必不可少的工具，個人覺得 iTerm2 是比 Mac 默認(rèn)終端好用很多的，可定制程度很高。iTerm2 是一款功能強(qiáng)大的終端模擬器，其有如下特點：

多標(biāo)簽和分割窗口：iTerm2 支持多標(biāo)簽和分割窗口，你可以在同一個窗口中打開多個終端會話，并方便地在它們之間切換。
自定義外觀：iTerm2 允許根據(jù)自己的喜好自定義終端的外觀，包括主題、背景圖像、字體等。你可以選擇預(yù)設(shè)的主題，或者創(chuàng)建自己的主題。
支持多窗口管理：iTerm2 支持窗口分組和窗口管理，你可以將多個窗口組織在一個窗口組中，并進(jìn)行集體操作。
強(qiáng)大的搜索和歷史記錄：iTerm2 提供了高級搜索功能，在終端輸出中快速查找和過濾內(nèi)容。此外，它還保存了完整的命令歷史記錄，可以隨時回溯和搜索之前的命令。
集成的 Autocomplete（自動完成）：iTerm2 內(nèi)置了命令和路徑的自動完成功能，能夠節(jié)省輸入命令的時間和精力。
內(nèi)置的觸發(fā)器（Triggers）：iTerm2 具有觸發(fā)器功能，可以根據(jù)輸出文本或命令執(zhí)行特定的操作，例如自動運行腳本、更改顏色等。
支持分屏和粘貼歷史：iTerm2 允許你輕松分割窗口，并提供了一個方便的粘貼歷史功能，可以查看和復(fù)制過去粘貼的內(nèi)容。
可定制的快捷鍵：iTerm2 具有豐富的可定制快捷鍵選項，可以根據(jù)個人喜好和使用習(xí)慣進(jìn)行設(shè)置。

iTerm2 的安裝也很簡單，只需要在官網(wǎng)（https://iterm2.com/downloads.html）下載安裝包，并按照步驟安裝即可：

圖片

官網(wǎng)提供了兩個版本，類似于 Node.js，一個是穩(wěn)定版，一個是最新的測試版，這里建議下載穩(wěn)定版（Stable Release），避免使用過程中出現(xiàn)一些不可預(yù)測的問題。

這里分享一篇 iTerm2 的保姆級配置教程，可以參考這篇教程并根據(jù)自己的需求進(jìn)行配置：https://zhuanlan.zhihu.com/p/550022490

版本控制工具

Git

目前最常用的代碼版本控制工具就是 Git 了。下面就來通過 Homebrew 安裝 Git，在終端中輸入以下命令即可：

brew install git

安裝完成之后，需要設(shè)置郵箱和用戶：

git config --global user.name <名字>
git config --global user.email <郵箱>

除了上述下載 Git 的方法，Git 官網(wǎng)（https://git-scm.com/download/mac）還提供了多種安裝 Git 的方法：

圖片

SoucreTree

有了 Git 就可以通過 Git 內(nèi)置的命令來進(jìn)行代碼操作了，除此之外，我們還可以通過 VS Code 和 SoucreTree 進(jìn)行可視化 Git 操作。下面就來看看 SoucreTree 是如何安裝使用的。

圖片

SourceTree 是一款免費的可視化 Git 和 Mercurial 版本控制工具，提供了直觀的界面和強(qiáng)大的功能來幫助開發(fā)者更輕松地管理代碼倉庫，其特點如下：
直觀易用：提供了一個直觀的圖形界面，使得初學(xué)者和有經(jīng)驗的開發(fā)者都能輕松上手，并能快速進(jìn)行版本控制操作。
支持多種版本控制系統(tǒng)：支持 Git 和 Mercurial 兩種常用的版本控制系統(tǒng)，可以方便地管理不同類型的代碼倉庫。
可視化操作：提供了可視化的文件狀態(tài)、分支圖和提交歷史等功能，使得開發(fā)者能夠清晰地查看和理解代碼倉庫的狀態(tài)和變更歷史。
強(qiáng)大的分支管理：提供了簡單且強(qiáng)大的分支管理功能，可以輕松創(chuàng)建、切換和合并分支，以及解決分支沖突。

使用方法如下：

下載和安裝：可以從 SourceTree 官網(wǎng)（https://www.sourcetreeapp.com/）下載適用于操作系統(tǒng)的安裝包，然后按照安裝向?qū)нM(jìn)行安裝。
添加代碼倉庫：打開 SourceTree 后，點擊 "New" 按鈕，然后選擇 "Clone" 或 "Create"，根據(jù)需要添加已有的代碼倉庫或創(chuàng)建新的代碼倉庫。
查看和提交代碼：在 "Repositories" 面板中，可以查看代碼倉庫的文件狀態(tài)、分支信息和提交歷史。在 "Log" 面板中，可以查看詳細(xì)的提交記錄，選擇提交進(jìn)行比較或還原。
創(chuàng)建和切換分支：在 "Branches" 面板中，可以創(chuàng)建新分支、切換分支和合并分支。還可以使用可視化的分支圖來查看和管理分支關(guān)系。
解決沖突：如果出現(xiàn)分支沖突，SourceTree 會提供界面來幫助解決沖突，例如手動合并代碼或選擇合適的版本。
使用其他工具：在 SourceTree 中，可以配置并使用喜歡的比較和合并工具，例如 Beyond Compare 或 Kaleidoscope。這些工具可以幫助更方便地進(jìn)行代碼比較和合并操作。

圖片

Charles

Charles 也是筆者日常使用比較多的一個軟件，用于代碼調(diào)試。筆者最常用的就是拿到線上數(shù)據(jù)，在本地開發(fā)環(huán)境進(jìn)行代理調(diào)試。

Charles 是一款常用的網(wǎng)絡(luò)抓包工具，它允許開發(fā)者查看分析網(wǎng)絡(luò)流量，幫助診斷和調(diào)試網(wǎng)絡(luò)應(yīng)用程序，其特點如下：

抓取和查看網(wǎng)絡(luò)流量：Charles 可以捕獲電腦和移動設(shè)備上的網(wǎng)絡(luò)流量，包括 HTTP、HTTPS、WebSocket 等協(xié)議的請求和響應(yīng)，并以直觀的方式展示給用戶。
SSL/TLS 解密：Charles 可以解密經(jīng)過 SSL/TLS 加密的網(wǎng)絡(luò)流量，使得開發(fā)者可以查看加密通信的內(nèi)容，方便調(diào)試和分析。
重放請求：Charles 具備重放請求的功能，開發(fā)者可以將先前捕獲到的請求重新發(fā)送給服務(wù)器，用于測試和調(diào)試。
模擬慢速網(wǎng)絡(luò)：Charles 可以模擬不同類型的網(wǎng)絡(luò)環(huán)境，如低速連接、丟包、延遲等，幫助開發(fā)者測試應(yīng)用程序在不同網(wǎng)絡(luò)條件下的性能。
可定制性：Charles 提供了豐富的配置選項和插件機(jī)制，可以根據(jù)個人需求對其功能進(jìn)行擴(kuò)展和定制。
跨平臺支持：Charles 可以在 Windows、macOS 和 Linux 上運行，適用于不同操作系統(tǒng)上的開發(fā)和調(diào)試需求。

首先在官網(wǎng)（https://www.charlesproxy.com/latest-release/download.do）下載最新版 Charles，這里根據(jù)自己當(dāng)前的操作系統(tǒng)選擇就好了：

圖片

下載完成之后，按照提示一步步安裝即可。需要注意的是，這個軟件并不是完全免費的，如果未訂閱，那每次只能使用 30 分鐘就會自動重啟。

圖片

可以參考這兩個使用教程：

https://juejin.cn/post/6844903665304600589
https://juejin.cn/post/6844903640272994317

其他工具

最后再來分享幾個筆者日常使用比較多的軟件。

Draw.io

draw.io 是一款免費的在線圖表編輯工具，可以繪制流程圖、UML、類圖、組織結(jié)構(gòu)圖、泳道圖、E-R圖、思維導(dǎo)圖等，堪稱畫圖神器！

圖片

draw.io 提供了豐富的模版，支持商務(wù)、圖表、cloud、工程、流程圖、布局、地圖、網(wǎng)絡(luò)、軟件、表格、UML、Venn等。還可以自定義模板。

圖片

除此之外，draw.io 還有很多特點：

支持語言設(shè)置為中文；
支持使用圖層；
支持設(shè)置手繪風(fēng)格、自帶多種圖標(biāo)，支持自定義圖標(biāo)；
支持將圖片導(dǎo)出為PNG、JEPG、SVG、PDF、HTML、XML等，支持導(dǎo)出高級設(shè)置，如調(diào)整DPI、寬高、縮放、背景等。

draw.io 使用和下載：

在線地址： https://app.diagrams.net/
下載地址： https://github.com/jgraph/drawio/releases

Xmind

XMind 是一個跨平臺的思維導(dǎo)圖軟件，具有多種結(jié)構(gòu)樣式，除了普通的思維導(dǎo)圖，還包括樹形圖、邏輯圖、魚骨圖、時間軸、樹狀表格等等，不同的結(jié)構(gòu)樣式可以自由組合混用，同時支持一鍵更換結(jié)構(gòu)樣式。其提供了很多類型的思維導(dǎo)圖，并支持設(shè)置多種主題風(fēng)格：

圖片

除此之外，Xmind 還有很多特點：

可以靈活的定制節(jié)點外觀、插入圖標(biāo)外，還有多種樣式、主題色彩、貼圖可以選擇，主題顏色和樣式同樣支持自由組合；
除了 XMind 自身的格式，還支持導(dǎo)入 FreeMind、MindManager 等軟件的文件格式，支持導(dǎo)出PNG、SVG、PDF、Markdown、Word、Excel 等；
支持進(jìn)行動態(tài)演示。

下載地址：https://xmind.app/download/