前端开发是一个快速发展的领域，作为一名前端开发人员，需要掌握各种技术和工具。刚入职，在开始前端开发之前，首先需要配置好前端开发环境，包括安装必备的软件和插件。本文将介绍如何从零开始配置前端环境以及安装必备的软件及其插件，以及一些平时工作可以帮助到我们的工具，之后遇到好用的会一直更新的。

编辑器是前端开发人员最常用的工具之一，它可以提高开发效率和代码质量。常见的编辑器有 Visual Studio Code、Sublime Text、Atom 等。在本文中，我们以 Visual Studio Code 为例，因为它是目前最受欢迎的前端开发工具之一，拥有强大的功能和丰富的插件库。

选择一款现代化的浏览器用于调试和测试你的网页应用程序。常用的选择包括Google Chrome、Mozilla Firefox和Microsoft Edge等。在本文中，我们以 Google Chrome 为例。

官网

建议 爬墙出去安装 Chrome 浏览器 是前端开发中最常用的浏览器之一，可以安装一些常用的开发者工具插件

以下是在Google Chrome上安装的步骤：

在开发过程中，我们可以使用 Chrome DevTools 来调试代码和分析性能。

也是个开发者喜爱的浏览器 官网

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，可以在服务器端运行 JavaScript 代码。前端开发中常用的构建工具和包管理器，如 npm 和 webpack，都需要依赖 Node.js。 两种安装方式：

注意：如果需要下载nvm，那就先别下载node

在 Node.js 官网（https://nodejs.org/en/）下载对应版本的安装包，进行安装。建议选择 LTS（长期支持）版本，因为它更加稳定和可靠。

如果要指定版本下载 链接，查找你要的版本，点击进去 找后缀名为 msi的文件，下载即可

安装过程中，可以根据需要选择安装路径和其他选项。安装完成后，可以在命令行输入 node -v 和 npm -v 命令，查看 Node.js 和 npm 的版本号，确认安装成功。

如果 想要在一台电脑上安装多个版本的nodejs，建议使用 nvm

版本介绍： nvm 1.1.11-setup.exe：安装版，推荐使用。 nvm 1.1.11-setup.zip：压缩包，内含 nvm 1.1.11-setup.exe。 nvm 1.1.11-noinstall.zip：绿色免安装版，但使用时需进行配置。

使用 nvm 1.1.11-setup.exe 进行安装，安装目录为：D:\nvm（可参考），安装完成之后将会自动添加环境变量。

解决方案： 目前我在网上查到的解决方案基本都是降级处理，

打开你下载的文件，然后完成安装向导。完成后，你可以通过运行以下命令确认 NVM 已安装：

如果 NVM 安装正确，此命令将显示已安装的 NVM 版本。

方便切换各个不同地址的镜像源

版本控制工具能够帮助你管理和跟踪代码的变更。常用的版本控制工具是 Git。以下是在Git上安装的步骤：

在浏览器中搜索 “Git”，进入官方网站 https://git-scm.com/。

点击下载按钮，根据你的操作系统选择对应的安装包。

下载完成后，双击安装包并按照指引完成安装。

打开命令行工具，运行 git --version 查看 Git 的版本号，确保安装成功并显示相应的版本号。

在使用 Git 之前，还需要进行一些基本的配置，如设置用户名和邮箱地址。可以使用以下命令进行配置：

前端开发中经常使用包管理工具来安装和管理开源库和框架。常用的选择包括npm和Yarn。安装 Node.js 后，npm 已经自动安装了，可以打开命令行工具运行npm -v确保安装成功并显示相应的版本号。

VS Code 是一款功能强大的编辑器，支持各种语言和框架的开发。在 VS Code 中，可以安装各种插件，扩展其功能。下面介绍一些常用的 VS Code 插件：

以上是一些常用的 VS Code 插件，可以根据具体项目需求安装其他的插件。在 VS Code 中，可以通过 按下 Ctrl+Shift+X 快捷键打开插件面板，搜索需要安装的插件，然后点击安装即可。

Vetur：是一个 Vue.js 开发插件，可以帮助开发者更好地编写 Vue 组件。它提供了 语法高亮、自动补全、错误检查、代码格式化 等功能，使开发者可以更快速地编写 Vue 代码。

Vue 3 Snippets：是一个 Vue.js 3 代码片段插件，可以帮助开发者更快速地编写 Vue 3 代码。它提供了 Vue 3 组件、指令、生命周期 等常用代码片段，使开发者可以更快速地编写 Vue 3 代码。

Vue Peek：是一个 Vue.js 开发插件，可以帮助开发者 更快速地查看 Vue 组件的定义。它可以在模板中快速跳转到组件定义，使开发者可以更快速地了解组件的结构和属性。

ES7 React/Redux/GraphQL/React-Native snippets：是一个 React 开发插件，可以帮助开发者更快速地编写 React 代码。它提供了 React 组件、生命周期、状态管理 等 常用代码片段，使开发者可以更快速地编写 React 代码。

Reactjs code snippets：是一个 React 开发插件，可以帮助开发者更快速地编写 React 代码。它提供了 React 组件、生命周期、**状态管理**等常用代码片段，使开发者可以更快速地编写 React 代码。

React-Native/React/Redux snippets for es6/es7：是一个 React Native 开发插件，可以帮助开发者更快速地编写 React Native 代码。它提供了 React Native 组件、生命周期、**状态管理**等常用代码片段，使开发者可以更快速地编写 React Native 代码。

个人vsCode配置文件＜setting.js＞

可以随时同步到网络上的笔记工具，支持markdown 链接

程序员随手笔记 工具 链接

必备的随手贴图工具，谁用谁知道！！！ 链接

uTools 是一个 极简、插件化、跨平台的现代化桌面软件。通过自由选配丰富的插件，打造你得心应手的工具集合，官网地址

先看下他的 插件应用市场 页面： 这个是打开软件页面的截图，可以看到这里已经有不少插件了，当然，这仅仅是一小部分，你可以在“插件中心”最下面找到“查看全部插件”按钮中查看全部插件。

主打几个大字：“一切皆插件”！！！ 就是这么豪横

下面我就简单介绍一下一些让我觉得亮眼的功能：

一时间也难以把里面所有插件的功能都介绍完，所以暂时先说到这里吧，更多功能还等你们自己去发现。

下面说一下具体使用方法：

打开软件之后在插件中心找到你想要安装的插件，点击下载符号即可，当你需要使用时按住“Alt”+空白键可呼出搜索框，或者你也可以在托盘中找到utools图标，点击图标也能呼出搜索框。

然后在搜索框中输入你想要的插件的中文或英文缩写，找到之后再用鼠标点击一下（左键）即可进入插件。

总得来说，这个软件是一个不错的工具，能够帮你变得更高效，软件支持win、mac、linux三个系统，这就覆盖了所有电脑系统，功能就更不用说了，强烈推荐大家使用。

Notepad ++ 是一个免费的源代码编辑器，可替换记事本。

主要功能

SourceTree 是一个 Git 客户端管理工具，适用于 Windows 和 Mac 系统。

本地 量图工具，切图仔专用 ，是个很不错的工具，有兴趣的可以看下，官网

PxCook功能

如果是更换设备，还需要迁移hosts文件 C:\Windows\System32\drivers\etc

从零开始配置前端环境需要安装一些必备的软件和插件，包括 Node.js、编辑器、Git、Chrome 浏览器、包管理工具 和 VS Code 插件 等。本文介绍了如何安装这些工具和插件，并介绍了一些常用的 VS Code 插件。在实际开发中，还可以根据具体项目需求安装其他的工具和插件，提高开发效率和代码质量。