【前端开发环境配置】VS Code、Node、npm、git

编辑器

VS Code

官网下载

https://code.visualstudio.com/Download

Next 安装

同意协议，下一步 >> 选择安装路径，下一步 >> （选择开始菜单文件夹）下一步 >>（选择附加任务）下一步 >> 安装

插件推荐

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code ：汉化
ESLint：遵守一定代码规范
Prettier - Code formatter：自动格式化代码
Auto Close Tag：输入标签的时候，自动结束标签
Auto Rename Tag：修改标签时，自动更改匹配开始/结束标签
Path Intellisense：自动补全文件路径
Code Spell Checker：拼写检查
GitLens — Git supercharged：Git插件，显示每一行代码的最后提交信息
Color Highlight：高亮显示颜色代码
vscode-icons：文件图标主题化
Image preview：预览图片
Simple React Snippets：提供react代码片段
JavaScript (ES6) code snippets：提供ES6 语法片段
ES7+ React/Redux/React-Native snippets：提供React、Redux、React Native 语法代码片段
vetur：Vue插件，提供语法高亮，自动补全，错误检查，代码格式化
HTML CSS Support：html、css插件
Error Lens：显示代码中的语法错误、warning以及其他问题
CSS Peek：选择某个 class 或者 id 名称，按住Ctrl键+鼠标左键，定位到该名称的CSS的位置
Live Server：本地服务器插件，启动本地服务器并实时预览网页
Typescript React Code Snippets：使用 Typescript 的 React 代码片段
React Native Tools：为React Native 项目提供开发环境
Vue VScode Snippets
Better Comments
open in browser
...

vscode终端使用npm报错情况（node配置了环境变量）

解决办法：删掉这个文件即可，例如上图提示E:\Node\npm.ps1，删掉这个文件后就可以正常使用了

其他编辑器：HBuilder X、 WebStorm

JavaScript运行环境

浏览器

Google Chrome 浏览器（开发必备官网下载地址）
Microsoft Edge 浏览器（IE浏览器的替代）
Firefox 浏览器（火狐浏览器，主要使用在Linux）
Safari 浏览器（Mac自带）
...

Node.js

官网下载

https://nodejs.org/en

其他版本下载 https://nodejs.org/en/download/prebuilt-installer

Next 安装

注意修改安装路径（不要安装在任何中文目录下），一直 Next 操作即可

测试是否安装成功：

按下【win+R】键，输入cmd，打开cmd窗口，输入

node -v // 显示当前node版本，显示版本Node.js安装成功

npm -v // 显示npm版本，显示版本npm安装成功（node.js内置管理包工具npm）

环境配置

（下载插件默认位置是C盘，比较占内存，所以进行环境配置，修改文件下载位置。看个人需求要，不进行如下操作也可正常使用Node.js）

1. 找到Node.js安装目录，在安装目录下新建 node_global 文件夹和 node_cache 文件夹

2. 新建后，使用管理员身份打开 cmd窗口, 切换到Node.js安装目录

（1）输入 npm config set prefix "Node安装路径\node_global" （配置缓存位置）

（2）输入 npm config set cache "Node安装路径\node_cache"（配置存放位置）

（3）检查配置：输入 npm config get prefix 和 npm config get cache

3. 环境变量配置

（1）此电脑 >> 单击右键，选择属性 >> 高级系统设置 >> 高级 >> 环境变量

>> 用户变量

<1> 编辑用户变量中Path，修改为 node_global的路径，确定

>> 系统变量

<1> 新建，添加如下系统变量，确定

(在刚才新建node_global目录下新建node_modules文件夹，再添加)

变量名：NODE_PATH
变量值：Node安装路径\node_global\node_modules

<2> 编辑系统变量中的Path，新建，添加 %NODE_PATH% （Node.js安装位置），确定

>> 确定 >> 确定

4.文件权限设置
找到 Node.js 安装根目录 >> 属性 >> 安全>> 编辑 >> 选择 Authenticated Users，勾选完全控制，应用，确定 >> 确定

nvm

nvm：node版本管理工具

Linux下载nvm：

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

nvm切换node版本出现N/A问题解决：

export NVM_NODEJS_ORG_MIRROR=http://nodejs.org/dist

管理包工具

npm

node.js已内置管理包工具npm，无需再下载

安装镜像

安装淘宝镜像：npm config set registry https://registry.npm.taobao.org

检查，查看源：npm config get registry

npm 常用使用命令

npm -v // 查看npm版本
npm init // 初始化，新项目会创建package.json文件
npm install // 根据package.json文件中dependencies配置安装全部的依赖包
npm install 模块名称 // 下载安装依赖到本地目录node_modules下
npm install --global 模块名称 // 下载安装依赖到全局环境中
npm install 模块名称 -S // -S 生产阶段的依赖（会将安装包信息添加到package.json文件dependencies对象中）
npm install 模块名称 -D // -D 开发阶段的依赖（会将安装包信息添加到package.json文件devDependencies对象中）
npm uninstall moudleName // 卸载依赖
npm cache verify // 清理缓存
npm cache clean --force // 强制清理缓存