從零搭建一套前端開發環境

一、基礎環境搭建

1.NVM(Node Version Manager)安裝

簡介
nvm（Node Version Manager）是一個用于管理多個 Node.js 版本的工具，允許開發者在同一臺機器上輕松安裝、切換和使用不同版本的 Node.js。它特別適合需要同時維護多個項目（依賴不同 Node.js 版本）的場景，或用于測試新版本功能。
安裝：

第一步：需要先卸載掉本機安裝的node.js，并將對應的環境變量刪除。如果你本地沒有則跳過第一步。
為了確保徹底刪除node在看看你的node安裝目錄中還有沒有node文件夾，有的話一起刪除。再看看C:\Users\用戶名文件夾下有沒有.npmrc以及.yarnrc等等統統刪除。再去看看你的環境變量有沒有node相關的，有的話也一起刪除了。
第二步：下載nvm安裝包，下載地址

在這里插入圖片描述

第三步：安裝nvm，一路next即可。
第四步：使用Win + R 打開運行窗口，輸入cmd，打開命令行窗口，輸入nvm -v，如果出現版本號則說明nvm安裝成功。

2.安裝對應版本的Node.js

安裝步驟：

第一步: 使用nvm安裝node.js，輸入命令nvm install [對應的node版本]，回車即可。

nvm install 10.15.3

第二步：安裝成功之后，使用nvm ls 可以查看已經安裝的node.js版本。

nvm ls

第三步：使用nvm use [對應的node版本] 命令切換node版本。

nvm use 10.15.3

第四步：使用nvm alias default [對應的node版本] 命令設置默認的node版本。

nvm alias default 10.15.3

注意：最新版本nvm在安裝一些低版本的node.js時可能會出現安裝失敗的情況，一般來說都是其對應的npm可能會安裝失敗，此時建議手動去node.js官網下載一個自己需要的zip包，解壓后放到nvm目錄下即可。

安裝失敗：
手動安裝:
node官網下載對應的node.js zip壓縮包下載地址
解壓之后找到對應的nvm目錄下，把解壓的文件夾放到nvm目錄下。
把該文件夾重命名為對應的版本號，如v8.17.0即可。
如上操作后我們回到命令行窗口，輸入nvm ls，可以看到已經安裝成功。

3.安裝VSCode

作為前端開發工具，VSCode是必不可少的，安裝好之后，我們還需要安裝一些插件，如：ESLint、Prettier、Vetur、Volar、GitLens、Live Server、Debugger for Chrome、Auto Rename Tag、JavaScript (ES6) code snippets、Vue Language Features (Volar)等等。
安裝步驟:

第一步：下載VSCode，下載地址
第二步：安裝VSCode，一路next即可。
第三步：安裝漢化插件，點擊左側的擴展圖標，搜索Chinese，安裝第一個插件即可。

4.安裝Git

簡介：Git是一個開源的分布式版本控制系統，用于高效地管理和跟蹤代碼的變更。它允許開發者在一個團隊中協作開發，并能夠輕松地回滾到之前的版本。Git廣泛應用于各種開源項目和商業項目中，是現代軟件開發不可或缺的工具。
安裝步驟：

第一步：下載Git，下載地址
第二步：安裝Git，一路next即可。
第三步：安裝成功之后，使用Win + R 打開運行窗口，輸入cmd，打開命令行窗口，輸入git --version，如果出現版本號則說明git安裝成功。
第四步: 配置git的用戶名和郵箱，輸入命令git config --global user.name “你的用戶名” 和 git config --global user.email “你的郵箱”。

git config --global user.name "你的用戶名"
git config --global user.email "你的郵箱"

第五步：拉取代碼，輸入命令git clone [對應的git地址]。

git clone https://github.com/xxxx/xxxx.git

二、相關工具安裝

1.nrm （npm鏡像源管理工具）

簡介：nrm 是一個 npm 的鏡像源管理工具，可以方便地切換 npm 的鏡像源，提高 npm 的下載速度。nrm 可以幫助開發者快速切換到不同的 npm 鏡像源，如淘寶鏡像源、官方鏡像源等，從而提高 npm 的下載速度和穩定性。
安裝：

第一步：使用npm安裝nrm，輸入命令npm install -g nrm，回車即可。（注意：這個工具是npm安裝到全局使用，因此該工具僅限于當前node版本下使用，切換版本就需要重新安裝）

npm install -g nrm

第二步：安裝成功之后，使用nrm ls 可以查看已經安裝的npm鏡像源。

2.npx （npm包執行工具）

簡介：npx 是 npm 5.2.0 版本引入的一個工具，用于執行 npm 包中的命令。npx 可以直接執行本地安裝的 npm 包，也可以執行遠程的 npm 包。npx 可以避免全局安裝 npm 包，從而節省磁盤空間和避免版本沖突。
安裝：

第一步：使用npm安裝npx，輸入命令npm install -g npx，回車即可。

npm install -g npx

第二步：安裝成功之后，使用npx -v 可以查看已經安裝的npx版本。

npx -v

3.http-server (本地服務器)

簡介：http-server 是一個輕量級的本地服務器，可以用于快速啟動一個 HTTP 服務器，方便開發者進行本地調試和測試。http-server 可以在命令行中啟動，也可以作為 npm 包在項目中使用。
安裝：

第一步：使用npm安裝http-server，輸入命令npm install -g http-server，回車即可。

npm install -g http-server

第二步：安裝成功之后，使用http-server -v 可以查看已經安裝的http-server版本。

http-server -v

4.VSCode插件

1.AI智能輔助

CodeGeek: AI Coding Assistant
AI代碼補全工具，支持智能生成代碼片段、自動補全和代碼優化建議。
在這里插入圖片描述

在這里插入圖片描述

Continue - Codestral, Claude, and more
多模型AI編碼助手，支持通過自然語言交互生成代碼或解釋復雜邏輯。
在這里插入圖片描述

在這里插入圖片描述

Baidu Comate
百度推出的AI編程插件，提供代碼補全、注釋生成和代碼優化功能。
在這里插入圖片描述

在這里插入圖片描述

2.代碼質量與規范

ESLint
JavaScript/TypeScript靜態代碼檢查工具，強制代碼風格一致性，檢測潛在錯誤。
在這里插入圖片描述

Prettier - Code formatter
自動格式化代碼（支持JS/TS/HTML/CSS等），確保團隊代碼風格統一。
在這里插入圖片描述

Prettier ESLint
結合Prettier的格式化和ESLint的規則檢查，實現更智能的代碼美化。
在這里插入圖片描述

Error Lens
實時高亮顯示代碼中的錯誤和警告，直接在行內展示詳細信息。
在這里插入圖片描述

3.開發效率工具

GitLens
增強Git功能，顯示代碼行作者、提交歷史，支持代碼對比和分支管理。
在這里插入圖片描述

Git Graph
可視化Git分支和提交記錄，方便代碼版本管理和沖突解決。
在這里插入圖片描述

Code Runner
一鍵運行多種語言的代碼片段（JS/Python/Java等），支持快速測試代碼邏輯。
在這里插入圖片描述

Live Server
啟動本地開發服務器，支持HTML/CSS/JS文件修改后實時刷新瀏覽器預覽。

open in browser
快速在默認瀏覽器中打開當前HTML文件。

4.代碼導航與智能提示

File Peek
快速跳轉到文件定義（Alt+點擊文件名），無需離開當前編輯器。
在這里插入圖片描述

IntelliSense for CSS class names in HTML
在HTML中自動提示CSS類名，防止手寫錯誤。
在這里插入圖片描述

json2ts
自動將JSON數據轉換為TypeScript接口定義，提升開發效率。
在這里插入圖片描述

Path Autocomplete
文件路徑輸入時自動補全，避免手動輸入錯誤。
!在這里插入圖片描述

5.語言與框架支持

Vue - Official
Vue.js官方插件，提供語法高亮、代碼片段和調試支持。
在這里插入圖片描述

Vue VSCode Snippets
Vue組件快速生成模板（如vbase生成Vue單文件組件）。
在這里插入圖片描述

uni-系列插件（uni-highlight, uni-app-schemas等）

uni-highlight
uni-app-schemas
uni-app-snippets
uni-cloud-snippets
uni-create-view
uni-helper
uni-ui-snippets
uniapp跨平臺開發專用工具鏈，支持小程序語法高亮、代碼片段、云開發模板等。

6.界面美化與交互

vscode-icons
為不同文件類型添加可視化圖標，提升文件樹的可讀性。
在這里插入圖片描述

One Dark Pro
熱門暗色主題，優化代碼高亮，減少視覺疲勞。
在這里插入圖片描述

7.其他實用工具

any-rules
常用正則表達式片段庫，快速生成校驗規則（如手機號、郵箱）。
在這里插入圖片描述

Version Lens
顯示npm包的當前版本和最新版本，方便依賴管理。
在這里插入圖片描述
Time Master
時間統計工具，幫助開發者追蹤編碼耗時。

5.微信開發者工具

簡介: 微信開發者工具是騰訊官方提供的一款用于開發、調試和發布小程序的應用程序。它提供了豐富的功能和工具，幫助開發者快速構建高質量的小程序應用。
安裝步驟：

第一步：下載微信開發者工具，下載地址
第二步：安裝微信開發者工具，一路next即可。

6.HBuilderX

簡介: HBuilderX 是一款輕量級、高效、跨平臺的開發工具，支持多種前端開發技術，如HTML、CSS、JavaScript、Vue、React等。它具有豐富的功能和工具，可以幫助開發者快速構建高質量的前端應用。
安裝步驟：

第一步：下載HBuilderX，下載地址
第二步：安裝HBuilderX，一路next即可。

三、其他輔助工具

1.截圖工具

PixPin:
PixPin是一款功能強大的截圖工具，支持多種截圖模式和編輯功能。它可以幫助開發者快速捕捉屏幕內容，并進行標注、裁剪等操作。PixPin還支持將截圖保存為多種格式，如PNG、JPEG、GIF等，方便分享和存儲。
下載: PixPin
在這里插入圖片描述

2.Github加速器

Steam++:
Steam++是一款GitHub加速工具，可以幫助開發者快速訪問GitHub資源。它通過優化網絡連接和緩存機制，提高下載速度和穩定性。Steam++還支持多用戶管理和自動更新功能，方便團隊協作和個人使用。
下載: Steam++

3.切圖工具

PxCook:
PxCook是一款切圖工具，支持多種設計文件格式（如Sketch、Photoshop等）的導入和導出。它可以幫助開發者快速將設計稿轉換為前端代碼，提高開發效率和質量。PxCook還提供了豐富的標注和測量功能，方便設計師和開發人員之間的協作

4.接口調試

ApiPost:
ApiPost是一款功能強大的接口調試工具，支持多種接口協議（如HTTP、HTTPS、WebSocket等）。它可以幫助開發者快速測試和調試API接口，提高開發效率。ApiPost還提供了豐富的功能，如接口文檔生成、參數校驗、斷言等，方便開發者進行接口測試和優化。
下載: ApiPost

5.AI 編程

Cursor:
Cursor是一款AI編程助手，可以幫助開發者快速生成代碼片段、優化代碼邏輯和解決編程問題。Cursor支持多種編程語言（如Python、JavaScript、Java等），并提供智能提示和自動補全功能。Cursor還可以根據開發者的需求，提供定制化的代碼建議和優化建議，幫助開發者提高編程效率和質量。
下載: Cursor

6.圖片處理

TinyPNG:
TinyPNG是一款圖片壓縮工具，可以幫助開發者快速減小圖片文件大小，提高頁面加載速度。它支持多種圖片格式（如JPEG、PNG等），并提供高質量的壓縮效果。TinyPNG還提供了豐富的功能，如批量處理、自定義壓縮級別等，方便開發者進行圖片優化和存儲管理。
官網: TinyPNG