一、前置说明Vscode

1.1 VsCode基本概念

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).
支持的拓展常见的包含如下：

1.2 VSCode的学习网址

https://code.visualstudio.com/docs/setup/mac

二、使用

2.1 调试代码和安装插件

如何开始调试代码，这里以python为例
第一步:首先在商店中搜索python

第二步: 之后就可以直接在主页面启动调试F5

三、常用的快捷键

3.1 debug快捷键

F9 打开和停止调试断点
F11 单步调试
F5 启动调试

3.2 整个工程中查找

快捷键：⇧ ⌘ F

3.3 IntelliSense功能

代码的自动补全：

vscode 使用讲解

首先是vscode是款文件编辑器,在windows,mac,linux下都可以使用,一些插件功能都是很方便的.

中文版设置

键盘

设置为ctrl + d 删除一行
ctrl + c是复制一行
shift + 左右箭头是选中,
alt+上下箭头是交换两行

设置

有些情况下,tab会被空格所替换,故此你有所不爽,搞个头呀.
如下输入关键字后,不选中既是false,选中既是true
“editor.insertSpaces”:false
“editor.detectIndentation”: false,
“editor.renderControlCharacters”: true,
“editor.renderWhitespace”: “all”,

制表符是→ 4个空格是…

去掉go的黄色警告
{
“go.docsTool”: “gogetdoc”,
“go.formatTool”: “goimports”,
“explorer.confirmDelete”: false,
“go.lintFlags”: ["–disable=varcheck", “–enable=errcheck”]
}

自动识别文件编码
encoding 选中 Auto Guess Encoding
formatOnSave true

插件

1. sftp

如 sftp 下载后,按键ctrl+shift +p ,输入sftp,创建sftp.json

 {
    "name": "ubuntuQt",
    "host": "111.111.111.5",
    "protocol": "sftp",
    "port": 22,
    "username": "root",
    "remotePath": "/www/code/src/gitea.fjs.com/fjs/",
    "uploadOnSave": true
}

1. remote-ssh
   这个功能比sftp强大不少,听说只在 vscode Insiders 版本上有.
   可以参考https://blog.csdn.net/sixdaycoder/article/details/89947893

首先先点击+号

创建文件夹.ssh,这个可以用git bash 来mkdir .ssh来创建

mkdir C:/Users/fjs/.ssh

直接回车

修改配置文件

Host 111.111.111.5
  HostName 111.111.111.5
  User root

再往后就可以了,可以删除文件,新建文件,也可以打开终端,也很方便的.
VSCode Remote SSH远程连接失败过程试图写入的管道不存在

用户配置

用户界面

VSCode的基本布局：

【1】活动栏：最左侧的一列，包括资源管理器、查找、源代码管理（也就是接下来要讲解的Git）、debug调式（一般用于后端的调理）、插件安装

【2】侧栏：活动栏里具体的项。

【3】编辑器：编写代码的区域

【4】面板：左下角有个错误和警告的提示，点击出来的就是面板。该面板包括问题、输出、调试控制器、终端，常用的就是终端，比如建Vue项目时就会使用它，相当于cmd。

【5】状态栏：最下面这一条，包括警告和错误，行列代表鼠标所在位置，空格代表缩进（因为不同的格式标准由不同的格式要求，有的是4空格缩进，有的是两空格缩进，还可以使用tab缩进），还包括字符集，行尾序列，语言模式（不需要手动设置，他可以自动识别）。

项目的新建与引入

【a】文件夹的操作

软件中没有新建文件夹功能，这里通过在桌面创建文件夹，在软件内打开文件夹就会自动引入该文件了。

创建项目的目录：项目包括常见的CSS、JS，这里可以点击第二个图标新建文件夹，第一个是新建文件，第三个是刷新，第四个是折叠（所有打开的文件夹都会关闭）。

【b】文件的操作：点击第一个图片就可以新建文件，也可以点击文件夹来创建文件。

注意：在vscode新建文件时，一定要加后缀，如果不加，它就相当于一个文本。

主题设置

颜色主题

先按 Ctrl K 再同时按Ctrl T

图标主题

用户和工作区设置

用户和工作区的差别

用户设置-全局应用您打开的任何vs代码实例的设置
工作区设置-存储在工作区内的上设置，仅在打开工作区时应用（即是局部的）
一般使用用户设置即可

快捷键设置

Git配置

什么是Git

git就是一个代码管理工具，是一个开源的分布式版本控制系统。可以有效、高速地处理从很小到非常大的项目版本管理。

git的工作流程：workspace是我们电脑的工作区域，repository是本地仓库，remote是远程仓库。

Git的下载与安装

Git

百度 git官网 / download

GitHub

百度 GitHub官网 / 注册 gitHub(远程开源库，面向开源及私有软件项目的托管平台)

新建仓库

Git的基本操作

1.clone 远程仓库

配置用户名与邮箱

git config --global user.name 'Github name'
git config --global user.email ''your email"

克隆Github的远程仓库

git clone 'https://github.com/Hxy-Rose/vscode.git'

2.add添加文件

在工作区(vscode)里打开文件夹（文件名即Github上的仓库名）

进入当前文件夹路径

//cd （文件夹名)/   *Tab键自动补齐*
cd vscode/

给本地仓库(git)添加文件

//git add 文件名
git add index.js

3.commit提交

将单个信息提交到本地仓库(git)

git commit 文件名

将所有信息提交到本地仓库(git)

//git commit -m '提交修改信息'
git commit -m 'add index.js'

4.push

将本地仓库的所有信息提交到远程仓库中

git push

在Github里提交修改的信息 再更新本地文件里的信息

git pull

5.checkout 剪出分支

本地误删了文件 要想恢复

//git checkout 文件名
git checkout index.js 

git相当于从本地仓库剪出一个分支 因为删除的文件的工作区的

VSCode使用Git

• git clone 克隆远程仓库到本地
• 使用VSCode打开文件夹

VSCode使用Git的基本操作
add、commit 、pull、checkout

插件安装

CSS Peek：关联html css，快速查看CSS定义

Prettier：代码格式化

icon fonts：图标集提示，图标集仍需要安装

Auto Rename Tag：自动重命名标签

Auto Close Tag：自动闭合

HTML Boilerplate：生成html兼容性模板

Color Info：颜色提示

HTML CSS Support：HTML中css智能提示

总结

主要学习了对于vscode的操作和使用方法，对于软件有一定的熟悉。

最重要的内容，还是Git的流程以及操作需要进一步掌握和熟练。

最后，学习链接: https://www.imooc.com/learn/1106.