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.com/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.com/_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。只能生成在函数附近
  <