VS Code插件和快捷键

---

vs code已经不需要打印调试，而可以使用终端工具，在vs code中进行调试，vscode中调试也不好，还是要用chrome dev tool去调试

VS Code 配置

• vscode的配置分为两部分 全局配置(用户配置) 和 局部配置(工作空间配置，仅针对单个project)
  • 全局配置: User Settings是全局配置，应用到打开的任何一个VS Code实例。
    • 在Windows环境中，打开 File > Preferences > Settings ，可以看到VS Code支持User Settings 和 Workspace Settings。用户的配置文件存在 %APPDATA%\Code\User\settings.json 中。但是这个文件可以通过，打开 ui 的用户配置，然后从里面点进去
  • 局部配置: Workspace Settings 只存储到工作空间，只在工作空间打开时应用，是局部的配置，会覆盖全局配置。
    • 局部配置，的文件是放在 当前项目的 .vscode 目录下，有一个 settings.json 文件

插件

插件直接就可以在vscode里面去安装

• 离线安装 vscode插件：适用于内网无法直接下载插件的情况
  • (1) 进入网站：https://marketplace.visualstudio/vscode
  • (2) 搜索插件，点击进入插件主页，点击右侧的 Download Extension 链接，得到下载下来的离线安装包，以 .vsix 为扩展名结尾(不过这里下载的都是最新版)
  • (3)安装插件
    • 法一：直接导入：直接点击 vscode里面的 EXTENSIONS 后面的 … 符号，选择 install from VXIS 然后选择本地相应的插件包，插入
    • 法二：命令导入：
      • 把下载下来的离线安装包拷贝到 VSCode 的安装目录下的 bin 目录下，比如我的 VSCode 安装在 D:\Microsoft VS Code\，因此这里我应该拷贝到 D:\Microsoft VS Code\bin 这个目录下
      • 在第 3 步的 bin 目录下打开cmd，输入下面命令，最后面的参数换成你下载的插件离线安装包的名字即可。如：code --install-extension yzhang.markdown-all-in-one-1.4.0.vsix
  • (4)重启vscode

• vscode下载历史版本插件：由于某些原因，我们必须使用旧版的vscode，并且如果还是在内网中使用，那么就肯定是有下载历史版本插件，这一个需求的
  • 首先依然是登陆商店，然后搜索对应的插件 进入主页
  • 点击主页右边的 Changelog ，即可看到这个插件的历史版本记录
  • 再回到主页 点击 Download Extension(下载最新版本)，下载完了之后，从谷歌浏览器的 下载内容中 可以看到 对应的下载链接 如 https://marketplace.visualstudio/_apis/public/gallery/publishers/MS-CEINTL/vsextensions/vscode-language-pack-zh-hans/1.39.1/vspackage。这时候如果想下哪个版本，就把版本号 改了就好了(需要注意的是 Changelog 里面看到的版本 是只有两位的 如1.39;而这里需要的版本是有三位的，如1.39.1, 所以需要自己手动再加一位进去)

一、Auto Import

• 简介：自动去查找、分析、然后提供代码补全。对于 TypeScript 和 TSX，可以适用！

二、Atom One Dark Theme

• 简介：暗色主题，还可以。安装了之后，主题不会自动切换，需要自己去首选项 -> 颜色主题 里面，去选择这个主题，然后就好了。还有一个问题，就是弄了这个主题之后，注释的颜色是黑的，不好看，所以也需要去setting里面改下注释的颜色

"editor.tokenColorCustomizations": {
    "comments": {
        "foreground": "#479c55"
    }
}

三、Atuo Rename Tag

• 简介：修改 html 标签，自动帮你完成尾部闭合标签的同步修改，不过有些bug

四、Beauty

• 简介：Beauty is a code beautifier extension for VSCODE among Web Developing。这个还是格式化代码，选中代码之后ctrl+shift+b使用。相同的类型的格式化插件还有prettier(没有prettier好用)

五、Bracket Pair Colorizer

• 简介：让括号拥有独立的颜色，易于区分，即函数里面嵌套有括号，则括号的颜色不一样。可以配合任意主题使用

六、Chinese

• 简介：适用于 VS Code 的中文（简体）语言包

七、Code Runner

• 简介：支持多种语言的代码的立即执行。支持的语言：C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D。

八、Code Spell Checker

• 简介：插件安装后就不用管就好了，在你代码中有单词拼写错误时，你就会发现它的好处，因为我们写代码毕竟都是大量的英文单词变量定义，插件还可以给出错误拼写单词的建议

九、Color Info

• 简介：为你提供你在 CSS 中使用颜色的相关信息。
• 用法：
  • (1)你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了

十、CSS Peek

• 简介：可以在 HTML 中通过 CSS id 或则 class 来定位到其定义

十一、Debugger for Chrome

• 简介：太难用了，调试还是直接用chrome devtools算了。直接在VS Code调试js，可以打断点调试。就不用去chrome浏览器的dev tool的source里面打断点调试了
  • 有一个原理：vscode并没有集成chorme控制台，而这个插件也没有集成控制台。这个插件在使用的时候会打开chrome浏览器，然后挂载到chrome进程。之后在vscode中输入的命令，会被vscode发送到chrome进程，浏览器处理这条语句并输出之后，发送给vscode的调试器显示

十二、Document This

• 简介：Document This 可以快速地帮你生成注释，如一些函数的注释还能帮你抽取出参数的定义等，是你编写规范代码必备的工具。（注意：新版的vscode已经原生支持,在function上输入/** tab）
• 用法：
  • (1)Ctrl+Alt+D 然后再次 Ctrl+Alt+D。只能生成在函数附近

十三、filesize

• 简介：在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间

十四、Git History

• 简介：用来查看 git log 或则一个文件的 git 历史，比较不同的分支，commits

十五、Git Project Manager

• 简介：Git Project Manager 可以然你直接一键搜索并打开某个的基于 Git 管理的项目。

十六、GitLens

• 简介：啥也别说，直接上图！

十七、HTML Boilerplate

• 简介： 通过使用 HTML 模版插件，你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。
• 用法：
  • (1)你只需在空文件中输入 html，然后选择HTML5-Boilerplate，即可生成干净的文档结构

十八、HTML Snippets

• 简介：超级实用且初级的 H5代码片段以及提示

十九、Image Preview

• 简介：鼠标移到路径里显示图像预览

二十、Indenticator

• 简介：突出目前的缩进深度

二十一、IntelliSense for CSS class names in HTML

• 简介：基于你的项目以及通过link标签引用的外部文件，该智能插件提供 HTML 中 CSS class 名字的补全。这个插件经常不能加载到100%，并且会造成卡顿，不好用

二十二、live server

简介：这个是用来替代 http-server 的，并且集成到vscode里面去了。 作用为 直接把非工程化的项目(h5页面) 开启服务器，并且提供一个自动刷新功能，即代码改了之后页面自动改(http-server是不带这个功能的)。

使用：直接右键对应的 html 文件，就可以打开了。还是不用这个，直接http-server就可以满足要求了

二十三、Material Icon Theme

• 简介：The Material Icon Theme provides lots of icons based on Material Design for Visual Studio Cod

二十四、npm Intellisense

• 简介：VSCode 插件可以在导入语句自动补全 npm 模块名称。（最新版的vscode已经集成此功能），确实已经集成了

二十五、Open-In-Browser

• 简介：在浏览器中打开网页；可以选择默认浏览器和其他浏览器。
• 用法：
  • (1)输入Ctrl + K D。点用都没有

二十六、Path Intellisense

• 简介：自动路劲补全，默认不带这个功能的，赶紧装

二十七、Prettier

• 简介：你绝对不能少了这个插件，你需要它来一键美化你的 JavaScript/TypeScript/CSS或者另外更多语言的 代码，只负责格式化代码(code formatter) 的(比如，一个很长的对象写在一行，格式化之后就会变成多行)。使用方法为，直接右键文件，选择格式化文档就可以了。
  • 例如应该使用单引号还是双引号，该不该换行，tab 键占多少个空格，结尾要不要分号 等等问题,prettier就直接提供了一套解决方案
  • 同时装了Prettier和Eslint的时候，选择格式化就会提示选择默认的 code formatter 项，所以就需要用下面的方法来选择vscode的默认格式化插件
  • prettier的配置文件就是根目录的.prettierrc.js，

// 配置对应语言的默认格式化插件。依然是在vscode的setting里面加上下面代码。
// 或者随便打开一个文件，'右键格式化文档方法是使用',然后选择 '配置默认和程序'
{
    "[html]": { // 格式化.html文件的默认插件
        "editor.tabSize": 2,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnPaste": true
    },
    "[javascript]": { // 格式化.js文件的默认插件
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": { // 格式化.tsx文件的默认插件
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": { // 格式化.ts文件的默认插件
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": { // 格式化.json文件的默认插件
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": { // 格式化.json文件的默认插件
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "html.format.wrapLineLength": 100,
    "editor.tabSize": 2,
    "editor.defaultFormatter": "esbenp.prettier-vscode" // 这个为一次性指定所有类型语言的 formatter，指定了这个也就可以格式化css了
}

二十八、Eslint

• (1)简介：eslint和prettier还是有很大的差别的，eslint是 负责检查代码语法问题(Code-quality rules) 的(比如一个变量声明了没有用，这个就会被eslint检查出来)。
  • eslint也能格式化，不过格式化的效果没有prettier插件好。所以要把eslint和prettier一起使用，并且eslint不能直接用于统一团队代码风格，而prettier才是用于统一代码风格的格式化工具。
• (2)使用eslint：使用eslint分为两步。
  • <1>在项目内用npm安装 eslint 及相关的包: 通过npm安装的eslint是在npm打包的时候才检查代码的问题，不会再vscode里面直接显示出来。不过会检测出整个项目所有文件里面的问题
    • eslint的配置文件就是根目录的.eslintrc.js，在安装的时候会提示选择"How would you like to use ESlint"，不要选择"enforce code style"，因为我们要交给Prettier去负责格式化代码，否则会有冲突！但是如果选择了的话，eslint有三种代码风格：即 Airbnb、Standard、Google
    • 要想运行这个npm安装的eslint，直接到package里面去找对应的运行lint的命令，然后运行就好了，就会弹出错误了
  • <2>给 vscode 安装 eslint 插件：vscode的插件是直接在写代码的时候就检查代码的问题，直接在vscode的当前文件里面显示出来。不过只会显示出当前文件里面的错误，无法直接找到整个项目里面所有的错误

// .eslintrc.js的eslint配置
module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended", 	
    // extends: 'airbnb-base', 上一行为不要代码格式化功能，这一行为代码格式化选择 airbnb 的格式规范。
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018
    },
    "rules": {
        "no-console": "off",
        // 这里可以设置规则：
        //"off" or 0 - 关闭规则
	//"warn" or 1 - 将规则作为警告打开（不影响退出代码）
	//"error" or 2 - 将规则作为错误打开（退出代码为1）
    }
};

二十九、Quokka.js

• 简介：实时执行 JavaScript 代码(做快速的 demo 很有用)

三十、React Native Tools

• 简介：代码提示、Debugging、集成 RN 的命令。。

三十一、SVG Viewer

• 简介：一个用来预览 SVG 的插件。
• 用法：
  • (1)查看SVG - Alt+Shift+S O;
  • (2)放大/缩小 - 按住ctrl / cmd并使用鼠标滚轮（向上/向下）;
  • (3)从SVG转换为PNG - Alt+Shift+S X;
  • (4)从SVG转换为数据URI方案并复制到剪贴板 - Alt+Shift+S O;
  • (5)查看SVG并通过Canvas导出PNG - Alt+Shift+S V;

三十二、TODO Highlight

• 简介：在很多的其他代码编辑器中都有 TODO 标注功能的，如你写到某一部分的代码时，其中部分的功能需要稍后再来实现，这是就可以在对应的代码处添加一个 TODO 类型的注释，那么后期就可以快速地跳转到这部分继续写，而且当项目很大的时候，TODO 就变得更加有用，因为有时候 TODO 可能有几十个，帮助你标注那些功能需要继续实现或优化。好像没撒用

三十三、Trailing Spaces

• 简介：高亮那些冗余的空格，可以快速删掉

三十四、TypeScript Hero

• 简介：辅助用 TypeScript 编程的童鞋！

三十五、Vetur

• 简介：这个是VS Code的Vue工具
• 特点：Vue 语法高亮显示, 语法错误检查, 代码自动补全

三十六、vscode-icons

• 简介：让 vscode 资源树目录加上图标，必备良品！

三十七、vscode-fileheader

• 简介：这个就很好用了，在文件的头部给文件加上注释。 如果文件头部已经有了注释，则注释会自动修改。不然按快捷键 ctrl + alt + i来添加注释
  • 默认情况下，注释的作者为mikey.zhaopeng。我们需要修改这个作者为自己，按ctrl + shift + p进入插件命令面板，再输入settings,选择>Preferences: Open Settings (JSON)，进行自定义配置,加上下面代码，然后重启vscode就好了：
  • 下面代码加上不起效的话，就打开文件 -> 首选项 -> 设置 -> 输入fileheader 然后把名字都改成tangwl就好了

"fileheader.Author": "tangwl",
"fileheader.LastModifiedBy": "tangwl"

三十八、emmet

• 简介：即根据emmet语法，便捷编写html标签。这个不用自己安装，vscode自带了的。只需要在setting中输入下面命令，让emmet在jsx中支持就好了

// 右键展开
"emmet.triggerExpansionOnTab": true,
// jsx支持emmet
"emmet.includeLanguages": {
    "javascript": "javascriptreact"
}

三十九、power mode

• 简介：即在vscode中输入字符的时候，可以出现一个动画效果
  • 默认情况下 power mode 的配置为 输入字符，窗口会进行一个抖动。 修改这个配置，也就可以直接去 首选项的 setting里面去改，把 enable shake 去掉就好了

四十、Easy-less

• 简介：这个插件，即 用来把 文件目录的less文件，转换为css文件
  • 这个配置使用的是局部配置，所以需要在 当前 文件的根目录 先创建一个 .vscode 文件夹，然后在里面创建一个 settings.json

// settings.json 配置如下
{
    // 编译less 请先安装 Easy Less 插件
    "lesspile": {
        "compress": true, // 是否删除多余空白字符
        "out": true, // 这个配置为 less文件的输出目录，设置为true，代表less输出的css文件 和less文件在同一目录
        "autoprefixer": "last 100 versions, >1%, ie >= 10, ie_mob >= 10, chrome >= 34, safari >= 6, ios >= 6, android >= 2.3"
    },
}

四十一、angular2-snippets

angular语法填充

四十二、vscode-generate-getter-setter

优化导入；get/set

四十三、svn

svn配置。需要安装tortoiseSVN。然后到setting.json中去配置

"svn.path": "D://Software//Tortorise//bin", // 这个是Tortorise的安装目录，里面的bin文件夹

四十四、Angular Language Service

即提供了一种在 Angular 模板中获取自动补全、错误、提示和导航的方法。 它支持位于独立 HTML 文件中的外部模板以及内联模板

四十五、todo-tree

这东西很好用。用来在代码里面添加注释，并且可以直接 跳转到写注释的地方，用于一些临时操作代码的情况

支持在 vscode 中 用 TODO、FIXME、BUG、NOTE、HACK、XXX 来写注释。写好的 注释会高亮，并且 在vscode的左侧会出现一个 todos按钮，点进去就可以看到 写的 todo 在哪个文件的哪个位置。配置如下

  "todo-tree.highlights.customHighlight": { // 为每个标签设置样式
    "TODO": {
      "icon": "tasklist", // 图标
      "foreground": "white", // 文字颜色
      "background": "#ff8c00", // 背景颜色
      "iconColour": "#ff8c00" // 图标颜色
    },
    "FIXME": {
      "icon": "alert",
      "foreground": "white",
      "background": "#FF2D00",
      "iconColour": "#FF2D00"
    },
    "BUG": {
      "icon": "bug",
      "foreground": "white",
      "background": "#FF2D00",
      "iconColour": "#FF2D00"
    },
    "NOTE": {
      "icon": "note",
      "foreground": "white",
      "background": "#98c379",
      "iconColour": "#98c379"
    },
    "HACK": {
      "icon": "beaker",
      "iconColour": "#abb2bf"
    },
    "XXX": {
      "icon": "question",
      "foreground": "white",
      "background": "#3498DB",
      "iconColour": "#3498DB"
    }
  },
  "todo-tree.highlights.defaultHighlight": { // 全局样式配置
    "type": "text" // 高亮类型 tag text tag-and-comment text-and-comment line whole-line 
  },
  "todo-tree.general.statusBar": "current file", // 在状态栏中显示的内容-没有(none)，总计数(total)，每个标签的计数(tags)，前三个标签的计数(前三个)或仅当前文件的计数(当前文件)。
  "todo-tree.general.tagGroups": { // 别名分组
    "FIXME": [ // 将多个标记设置为同一组，共享 todo-tree.highlights.customHighlight 的样式
      "FIXME",
      "FIX" // 这里自定义的标记必需在 todo-tree.general.tags 中配置
    ]
  },
  "todo-tree.general.tags": [ // 插件匹配的标记名
    "XXX", // 标识处代码虽然实现了功能，但是实现的方法有待商榷。
    "TODO", // 说明代码还未完成。应当包含下一步要做的事情。
    "NOTE", // 说明代码的工作方式。
    "HACK", // 表明代码实现走了一个捷径。应当包含为何使用hack的原因。这也可能表明该问题可能会有更好的解决办法。
    "FIXME", // 说明代码是有问题的并应尽快修复。
    "FIX",
    "BUG" // BUG
  ]

四十六、Angular Follow Selector

点击 html 里面的 selector标签，可以跳转到对应的 component

四十七、Angular Support

神器！！！ 在 html 模板中，点击 函数，可以直接跳转到 ts 中对应的函数定义处去。不过 会让vscode进行卡顿

---

使用vscode打断点调试nodejs

如果是调试javascript，那么是可以直接在chrome dev tool里面进行调试的。但是，如果是调试nodejs，那么就只能在vscode里面调试了

1、初始化一个package.json文件

注：最新实现中，不需要有package.json也可以来打断点

• 首先需要使用命令npm init -y,来初始化一个package.json文件。这个文件里面的 main 属性，就代表入口的js文件。

2、创建launch.json文件

注：如果是想要给普通一个js文件打断点，那么首先需要把这个文件加入到工作区，然后在工作区里面创建.vscode文件夹(直接到debugger界面，点下拉框，然后选对应的文件夹名字，就可以自动给这个文件夹创建)，才可以开始打断点

• 这个文件就是配置调试项目的一个文件
  • launch.json文件：这个文件就是Debugger for chrome调试插件的配置文件，工作区的每一个项目分别拥有自己的launch.json。
    • 打开launch.json: 点击左边侧边栏的调试按钮，最上面的输入框里面可以选择工作区项目对应的launch.json文件，然后点击旁边那个设置按钮，就可以打开对应的launch.json了。
  • launch.json文件配置参数：
    • type: 就是debugger工具的类型。如node调试工具的type就是node，同理php调试工具的type就是php，我们安装的Debugger for Chrome的type就是chrome
    • request：可以理解为调试工具的启动方式,有launch和attach，一般就用launch。
    • name: 调试器的名字，就是这个launch.json文件对应的名字
    • sourceMaps：默认是启用的，对于打包的调试，大神们就必须开启了
    • url和webRoot: 这两个参数是配套使用的，如果项目是需要开启服务器的就要加上这两个参数。两个参数url指定项目的url地址，webRoot指定项目的根目录或者需要进行调试的文件。
    • file: 这个参数和上面那两个(url、webroot)参数是互斥的，只能用其中的一个。如果项目不需要打开服务器，只需要本地打开，就用这个参数。file的值和webRoot的值是一样的
    • ${workspaceRoot}值：表示VSCode中打开文件夹的路径
    • ${workspaceRootFolderName}值：表示VSCode中打开文件夹的路径, 但不包含"/"
    • ${file}值：表示当前打开的文件
    • ${relativeFile}值：表示当前打开的文件,相对于workspaceRoot
    • ${fileBasename}值：表示当前打开文件的文件名, 不含扩展名
    • ${fileDirname}值：表示当前打开文件的目录名
    • ${fileExtname}值：表示当前打开文件的扩展名
    • ${cwd}值：表示当前启动时的工作目录

{
    "version": "0.2.0",
    "configurations": [
        { // 这个是用vscode来调试 前端页面。url直接监听 localhost就好了
            "type": "chrome", // 表示这个配置对象是用来调试页面的
            "request": "launch",
            "name": "Launch Chrome(web debug)", // 这个是vscode 调试侧边栏最上面的那个调试对象名字，选这个名字就代表运行这个调试对象
            "url": "http://localhost:8000", // url直接监听 localhost就好了,即这个url对应的页面都会被监听
            "webRoot": "${workspaceFolder}/view", // 这个是需要使用当前配置进行调试的文件夹。当页面进入断点的时候，会自动在vscode里面停下来
            // "sourceMaps": true
        },
        {  // 这个是用vscode来调试 node。url直接监听 localhost就好了
            "type": "node", // 表示这个配置是用来调试node的
            "request": "launch",
            "name": "Launch node(node debug)", // 这个是vscode 调试侧边栏最上面的那个调试对象名字，选这个名字就代表运行这个调试对象
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}\\app.js" // 这里是需要使用当前配置进行调试的 文件的入口；启动调试之后，就从这个入口文件开始执行
        },
    ]
}

3、开始调试

调试过程中 只要不点调试那里的退出，那么就一直都不会退出调试。在node的调试模式下，如果接收到前端的请求，那么就会自动进行中断。调试模式会自动运行代码，并且开启自己的服务器，而不用自己另外再去手动开启服务器。

调试node：需要先在调试面板选择node对应的调试对象名字，然后点击调试按钮，就会自动从配置的文件入口运行node代码并且进入node断点; 但是页面依然是需要自己手动打开(非断点打开)；直接启动项目也是不能开启node断点的

调试web页面：这里就需要先手动开启node服务(非断点打开)；然后在调试面板选择web对应的调试对象名字，接着点击调试按钮，就会自动弹出一个浏览器窗口，并且启动浏览器页面，就可以了

---

使用说明

一、文件夹添加和删除

• 简介：VS Code添加文件夹有两种方式(都是在文件里面点击添加)。第一种为直接打开文件夹，第二种为将文件夹添加到工作区。
  • 直接打开文件夹：这种方式只能打开一个文件夹，重复打开的话，后面的文件夹会覆盖前面的文件夹。如果要关闭，需要点击开始 -> 关闭文件夹。如果刚开始有打开的文件夹，然后又添加文件夹到工作区，那么打开的文件夹也会自动添加到工作区
  • 将文件夹添加到工作区：这种方式可以打开任意个文件夹，并且直接右键点击文件夹就可以关闭文件夹。如果刚开始工作区有文件夹，这时候点击打开文件夹，会提示是否将工作区配置保存为文件(第二次打开这个文件就有之前那个工作区了)，然后就没有工作区了，就只有刚刚打开的那个文件夹

二、VS Code使用Git

• 初始化git存储库：
  • (1)先随便创建个文件夹，添加文件夹到工作区
  • (2)ctrl + shift + p打开命令窗口，输入git，选择initialize repository。如果发现，文件夹目录有个.git文件夹，就初始化成功了
• 提交到本地代码库:
  • (1)修改了代码之后，在菜单栏左边的源代码管理器上就会显示有挂起的更改
  • (2)点击更改的文件后面的加号(来暂存修改)，再点击对应的文件夹那里的√(来提交修改)，再输入提交文件相关的消息，就好了。
• 提交到github:
  • 点击源代码管理器里面对应文件夹右边的更多，先点击显示git输出，再点击推送
• 拉取:
  • 点击源代码管理器里面对应文件夹右边的更多，点击拉取就好了

---

快捷键

选择类

这些按键里面，大部分都是ctrl开头的，只有很少的是shift或者alt开头的

ctrl+鼠标左键点击函数，或者alt+鼠标左键点击函数 跳转到函数定义或者调用的位置。

alt+鼠标左键点击多行 可以给多行添加光标，便于编辑。如果想切换为ctrl+鼠标左键，可以在选择里面设置。

Ctrl+D 选中光标所占的文本，继续操作则会选中下一个相同的文本。

Ctrl+L 选中整行，继续操作则继续选择下一行，效果和 Shift+↓ 效果一样。举个例子，要复制一整行，但是这一行很长，就需要用到这个了

Alt+Up /Alt+Down 向上/向下移动当前行

Alt+left /Alt+right 向前/向后切换到代码中刚刚选中的焦点位置。比如，当前窗口从第1行用ctrl+鼠标左键，点击一个函数跳转到了第10行; 此时，按下 alt+left，就可以跳转到上一个焦点位置，即刚刚的第一行; 此时再按下 alt+right，又可以跳转下一个焦点位置，即刚刚的第10行

Shift+Alt+Down / Shift+Alt+Up 向下/向上复制当前行行

Ctrl+Enter 在下一行插入新行。举个栗子：即使光标不在行尾，也能快速向下插入一行。还是有用

Ctrl+Shift+Enter 在上一行插入新行。举个栗子：即使光标不在行首，也能快速向上插入一行。没用，和这个一样的需求，都可以用上面那个来实现

Ctrl+Shift+[ 选中代码，按下快捷键，折叠代码。没用，可以直接点击箭头折叠

Ctrl+Shift+] 选中代码，按下快捷键，展开代码。没用，可以直接点击箭头折叠

Ctrl+[ 选中代码，按下快捷键，向左缩进4个字节。

Ctrl+] 选中代码，按下快捷键，向右缩进4个字节。

Ctrl+← 向左单位性地移动光标，快速移动光标。

Ctrl+→ 向右单位性地移动光标，快速移动光标。

shift+↑ 向上选中多行。

shift+↓ 向下选中多行。

Shift+← 向左选中文本。没用，和这个一样的需求，都可以用下面那个来解决

Shift+→ 向右选中文本。

Ctrl+Shift+← 向左单位性地选中文本。

Ctrl+Shift+→ 向右单位性地选中文本。

Ctrl+Alt+↑ 向上添加多行光标，可同时编辑多行。

Ctrl+Alt+↓ 向下添加多行光标，可同时编辑多行。

注：上面的两个非常好用。可以添加多个光标，然后同时改变多行的缩进。

编辑类

Ctrl+Shift+K 删除整行。

Ctrl+/ 注释单行。

Ctrl+Z 撤销。

Ctrl+Y 恢复撤销。

Ctrl+U 软撤销，感觉和 Gtrl+Z 一样。

搜索类

Ctrl+F 查找，打开搜索框，查找关键字。点击查找框前面的下拉箭头，可以进入查找替换模式。Ctrl+H

Ctrl+H 查找替换，即可以选择把找到的全部都替换了

Ctrl+shift+F 打开左边侧边栏的查找

• Ctrl+P 打开搜索框，可以执行下面这些操作：
  • 直接输入文件名，打开指定文件
  • ?开头 列出当前可执行的动作
  • !开头 显示 Errors或 Warnings，也可以 Ctrl+Shift+M
  • :开头 跳转到行数，也可以 Ctrl+G 直接进入。输入行号，则定位到对应行的位置。在知道bug在多少行，找bug的时候还是比较好用的，
  • @开头 跳转到 symbol（搜索变量或者函数），也可以 Ctrl+Shift+O 直接进入
  • #开头 根据名字查找 symbol，也可以 Ctrl+T

Ctrl+Shift+P 打开命令面板。在打开的输入框内，可以输入任何命令。即显示相关插件的命令

显示类

Ctrl+` 调出终端(这个终端和cmd终端是一样的，关闭一样是ctrl + c)，可以在这个终端进行npm start或者其它操作

右键文件 这个实际上也很有用，可以选择在终端中打开(就直接打开了vscode的终端，并且终端中的文件路径变成了这个文件的路径)；或者选择在文件资源管理器中显示(这个即是直接打开这个文件所在的文件夹)

ctrl + 1/2/3 拆分编辑器，即把编辑器拆分为1/2/3列

F11 全屏模式

window + e 打开我的资源管理器(我的电脑)

直接在代码里面输入 debugger,并且打开控制台 ，然后 在页面运行到对应的位置，就可以直接 进入到 vscode 对应页面，并且进入断点模式；而不用自己手动 找页面来