从零搭建一套前端开发环境

一、基础环境搭建

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