下载地址

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 GraphGit 图形化显示和操作

编程美化

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-prefixCSS 补全
CSS Peek查看 CSS 定义
Vetur语法高亮、智能感知、Emmet等
EsLint语法纠错
JavaScript(ES6) code snippetsES6 语法智能提示以及快速输入
HTML CSS Support让 html 标签上写 class 智能提示当前项目所支持的样式
jQuery Code SnippetsjQuery
sassSASS
Import Cost在编辑器中显示引入包的大小
filesize在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐