前端开发环境搭建和VSCode插件配置超详细图解一次配置完成（19年8月19日更新福利）

前端开发环境篇

更新日志，请根据目录跳转查看

• 更新日志： 2019年08月19日 vscode 新插件更新和配置推荐【20190819更新】；

包管理器

NPM包管理器

• 请下载官网较新的稳定版！地址=》
• 双击msi安装包安装，可以自定义安装目录；
• 安装完成后检查全局环境：

• 检查版本

>node --version
v10.15.3 #2019年3月27日最新稳定版

如果没有出现版本号，检查全局系统变量是否配置好（cmd、powershell和bash会通过系统环境变量到对应目录下找同名命令的exe并传入后面的参数，如果环境变量里没有配置路径当然找不到对应的工具）：

1. win+r 打开cmd，输入path回车
   

c:\users\administrator>path
PATH=C:\Windows\system32;
C:\Windows;C:\Windows\System32\Wbem;
C:\Windows\System32\WindowsPowerShell\v1.0\;
C:\Windows\System32\OpenSSH\;
C:\Program Files\Git\cmd;
C:\Program Files (x86)\Yarn\bin\;
D:\NodeJs\; #这个地址就是你需要添加到环境配置里的路径，即为你的安装路径
C:\Users\LuZ_Ouyang\AppData\Local\Microsoft\WindowsApps;
D:\VSCode\bin;D:\NodeJs;D:\NodeJs\node_modules\node_global;
D:\NodeJs\node_modules\node_cache;
C:\Users\LuZ_Ouyang\AppData\Local\Yarn\bin;C:\Users\LuZ_Ouyang\AppData\Roaming\npm

• 配置环境：

右键我的电脑》打开“属性”：

或者通过控制面板“系统”分类进入也可；

点击环境变量进入配置页（注意，用户变量只会对当前登录系统的用户起效，如果注销后切换用户环境变量也会变！）：

点击新建，不要直接双击添加，更不要在外面就双击修改，这样容易修改到原来的路径里的符号，导致其他的也会出错！！！

配置完成输入node --version 和 npm --version校验，出现版本号便是成功了！

• npm 包管理器全局配置：node_global 和 node_cache 配置