window 10 系统下载安装
1.打开官网地址: Visual Studio Code - Code Editing. Redefined
2.进入下载入口:
3. 下载 zip 文件
4. 解压到非系统盘,运行 code.exe 即可
或者
1. 打开官网,下载安装程序
2. 双击运行安装程序
3. 同意协议
4. 选择安装地址
5. 选择开始菜单文件夹
在这一步可以更改开始菜单文件夹名字,或者不创建开始菜单文件夹,此步骤不管怎么选择,对以后的使用并没有什么影响。
开始菜单文件夹就是在系统开始菜单中看到的文件夹,按 win 键可以快速看到。
6. 选择设置
- 创捷桌面快捷方式
桌面上创建快捷方式
- 将“通过Code打开”操作添加到 Windows 资源管理器文件上下文菜单
右键文件,可以选择 通过 Code 打开
- 将“通过Code打开”操作添加到 Windows 资源管理器目录上下文菜单
右键目录,可以选择 通过 Code 打开
(以上两个选择其实就是将 VS code 添加到右键功能)
- 将 Code 注册为受支持的文件类型的编辑器
右键文件,打开方式,Visual Studio Code
得是 vsCode 支持的文件
- 添加到 PATH (重启后生效)
将 VS Code 添加到环境变量path 中
7. 安装
8. 安装完成
设置中文语言环境
1. 点击扩展程序
2. 搜索框中 输入:
@category:"language packs"
安装中文简体语言包
3. 重新启动 vscode
配置 git
(这里需要确保电脑中已安装好 git ,并配置了环境变量)
1. 打开设置
2. 在搜索框中输入 git.path , 找到后点击在 setting.json 中编辑
3. 找到电脑中 git 的安装地址,在cmd 文件夹中有 git.exe ,复制 git.exe 的完整路径,添加到git.path 中。
这里需要注意的是 \ 需要转义一下,否则会报错
4. 基本使用
第一次使用 git 需要输入 github 账号密码,然后登陆。
新建的文件 --- 绿色
有改动的文件 --- 橙色
没有改动的文件 --- 白色
- 保存更改
1. 放弃更改的文件,(revert)
2. 保存更改的文件,(add)
3. 批量放弃更改的文件,
4. 批量保存更改的文件
1. 取消暂存的更改,退回到 【待 add】 的状态,
2. 批量取消暂存的更改
- 提交代码到本地 (commit)
填写提交信息
- 拉取代码(pull)
- 推送代码 (push)
插件安装
1. 调试相关
vscode 默认支持 node 调试,按 f5 可以快捷启动调试。
也可以是如下操作:
然后选择运行环境:
在 node 环境下,可以直接运行 js 文件。
支持网页调试
①. Debugger for Chrome
②. f5 运行调试,配置 launch.json 文件
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
③. 全局安装 http-serve
npm i http-serve -g
④. 启动本地服务
命令行输入 http-server
打开页面,就可以在 vscode 实现断点调试了。
在浏览器中打开
右键想要在浏览器中打开的文件
2. vue 相关
①. vetur —— 语法高亮,错误提示,格式化
②. vue vscode snippets —— vue 快捷键
3. react 相关
①. React/Redux/react-router Snippets —— react 快捷键
②. Simple React Snippets —— react 快捷键
③. Ant Design Snippets —— ant design 快捷键
4. react native 相关
①. React-Native/React/Redux snippets
5. 自动补全,自动引入相关
①. Auto Close Tag —— 自动闭合标签
②. Auto RenameTag —— 自动重命名 html 标签
③. Auto Complete Tag —— ①和②的扩展
④. Auto Import —— 自动引入
6. html ,css 相关
①. HTML Format
②. Beautify css/sass/scss/less
7. 其他
①. Better Comments —— 注释高亮
②. ESLint —— 集成eslint
③. Prettier - Code formatter —— 格式化代码