下载地址
Node.js 官网地址
https://nodejs.org/zh-cn/
VS Code 官网地址
https://code.visualstudio.com/
安装教程
修改好安装路径后，无脑式安装方式，具体安装步骤，不再赘述。
Node.js 验证方式
node -v
npm -v
新版本的 Node.js 中自带 npm 环境，均需验证。
Node.js 环境搭建
-
在 Node.js 安装路径下，创建两个文件夹 node_global 及 node_cache
-
创建完文件夹后，打开 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"
- 然后关闭 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】
- 设置淘宝源
设置 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 | 在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间 |
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/hd-nodejs/4075.html