下载地址

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"
  1. 然后关闭 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】

  1. 设置淘宝源

设置 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 在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐