搭建 Node.js 开发环境与配置 Visual Studio Code 教程

下载地址

Node.js 官网地址

https://nodejs.org/zh-cn/

VS Code 官网地址

https://code.visualstudio.com/

安装教程

修改好安装路径后，无脑式安装方式，具体安装步骤，不再赘述。

Node.js 验证方式

node -v

npm -v

新版本的 Node.js 中自带 npm 环境，均需验证。

Node.js 环境搭建

1. 在 Node.js 安装路径下，创建两个文件夹 node_global 及 node_cache

2. 创建完文件夹后，打开 cmd 命令窗口，输入：

npm config set prefix "D:\Program_Files\Service\Node_JS\node_global"

npm config set cache "D:\Program_Files\Service\Node_JS\node_cache"

3. 然后关闭 cmd 命令提示符窗口，设置环境变量。

在【系统变量】下新建【NODE_PATH】，输入【D:\Program_Files\Service\Node_JS\node_global\node_modules】；

将【用户变量】下的【Path】下的【C:\Users\Administrator\AppData\Roaming\npm】修改为【D:\Program_Files\Service\Node_JS\node_global】

4. 设置淘宝源

设置 npm

npm config set registry https://registry.npm.taobao.org/

安装 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

验证 cnpm

cnpm -v

【附】

查看源，可以看到设置过的所有的源

npm config get registry

注 1：cnpm 安装完成后，以后就可以用 cnpm 命令代替 npm 命令, 此时 npm 还是会用官方镜像，cnpm 会用国内镜像。

注 2：如果要恢复成原来的设置，执行如下：

npm config set registry https://registry.npmjs.org/

VS Code 修改插件安装位置

打开 cmd 命令窗口，输入：

mklink /D "C:\Users\Administrator\.vscode\extensions" "新的安装路径"

PS：需要先把 C 盘下的 extensions 文件删除或者移动至新的安装路径下。

VS Code 配置自动保存

VS Code 配置 Git

VS Code 热门插件

主题及图标

主题	GitHub Theme
图标	vscode-icons

功能强化

Chinese	中文插件
Settings Sync	同步所有设置和插件
WakaTime	编程时间及行为跟踪统计

Git 集成插件

GitHub Pull Requests	查看和管理 Git 拉取请求和问题
Git Graph	Git 图形化显示和操作

编程美化

Bracket Pair Colorizer	自定义配置括号
Highlight Matching Tag	高亮闭合标签
Image Preview	预览图片
vscode-json	美化 json
快捷键	CTRL + ALT + V，验证；
	CTRL + ALT + B，格式化；
	CTRL + ALT + U，压缩；
	CTRL + ALT + '，加转义字符；
	CTRL + ALT + ;，去转义字符；
Regex Previewer	预览正则表达式效果
open in browser	右键项目单击启动
Visual Studio IntelliCode	从 GitHub 上高星的开源项目经过大量的机器学习训练，给开发者提供最合适的 IntelliSense 上下文建议功能，除此之外，还有代码格式化和规则推测等功能。
TODO Highlight	能够在你的代码中标记出所有的 TODO 注释，以便更容易追踪任何未完成的业务。
Better Comments	使注释有人性化的高亮显示
fileheader	顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间。
快捷键	CTRL + ALT + I 你可以在头部插入注释；
	CTRL + S 保存文件后，自动更新时间和作者。

前端开发

Auto Rename Tag	自动重命名 HTML/XML 标签
Auto Close Tag	自动添加 HTML/XML 关闭标签
Path Intellisense	智能路径提示
npm Intellisense	用于在 import 语句中自动填充 npm 模块
Turbo Console Log	快速添加 console.log 信息，js debug 必备
快捷键	CTRL + ALT + L 选中变量之后，使用这个快捷键生成 console.log；
	ALT + SHIFT + C 注释所有 console.log；
	ALT + SHIFT + U 启用所有 console.log；
	ALT + SHIFT + D 删除所有 console.log；
css-auto-prefix	CSS 补全
CSS Peek	查看 CSS 定义
Vetur	语法高亮、智能感知、Emmet等
EsLint	语法纠错
JavaScript(ES6) code snippets	ES6 语法智能提示以及快速输入
HTML CSS Support	让 html 标签上写 class 智能提示当前项目所支持的样式
jQuery Code Snippets	jQuery
sass	SASS
Import Cost	在编辑器中显示引入包的大小
filesize	在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间