vs code 下载安装，git 配置，插件安装

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 —— 格式化代码