VS Code插件和快捷键

最新推荐文章于 2024-09-14 09:17:13 发布

谁诉离殇~

最新推荐文章于 2024-09-14 09:17:13 发布

阅读量1k

点赞数 1

分类专栏：工具(level 1) # 各种插件 & 调试技巧(level 2) 文章标签： vscode 编辑器 ide

本文链接：https://blog.csdn.net/rocktanga/article/details/122919702

版权

本文介绍了Visual Studio Code(VS Code)的配置、推荐插件和快捷键，包括Auto Import、Atom One Dark Theme、Debugger for Chrome等。详细列举了插件的用途和安装方法，强调了VS Code的调试能力和插件对提升开发效率的重要性。同时，总结了文件管理、Git使用和常用的编辑、选择、显示类快捷键，帮助开发者更好地利用VS Code进行开发工作。

摘要由CSDN通过智能技术生成

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