VS Code扩展(插件)推荐

最新推荐文章于 2024-09-21 15:29:31 发布

Gleason.

最新推荐文章于 2024-09-21 15:29:31 发布

阅读量2.5w

点赞数 5

分类专栏： VSCode 文章标签： VSCode插件 VSCode扩展

本文链接：https://blog.csdn.net/bianliuzhu/article/details/80985693

版权

VSCode 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一.Auto Close Tag

自动添加HTML / XML关闭标记(快捷方式Alt+.)

二.Auto Rename Tag

自动重命名配对的HTML / XML标记

//设置auto-rename-tag.activationOnLanguage将激活扩展的语言。默认情况下，它将["*"]被激活并将被激活所有语言。

{
    "auto-rename-tag.activationOnLanguage": [
        "html",
        "xml",
        "php",
        "javascript"
    ]
}

三.vscode-background

自定义背景

Config 配置项

Name	Type	Description
`background.enabled`	`Boolean`	插件是否启用 If background enabled.
`background.useDefault`	`Boolean`	是否使用默认图片 If use default images.
`background.customImages`	`Array<String>`	自定义图片，最多 3 个 Your Your custom Images(Max length is 3)
`background.style`	`Object`	自定义样式 Custom style
`background.styles`	`Array<Object>`	每个图片的独立样式 Style of each image.
`background.useFront`	`Boolean`	前景图/背景图。在代码上面还是下面 `true`:On the top of code. `false`: Behind the code

四.Beautify

美化javascript，JSON，CSS，Sass，和HTML在Visual Studio代码。

具体使用使用设置

五.Bracket Pair Colorizer

对应的括号使用不同的颜色显示

Screenshot

六.

inese (Simplified) Language Pack for Visual Studio Code

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

七.Code Spell Checker

Visual Studio代码的拼写检查

八.CSS Peek

在html中查看css样式,跳转到指定css样式

它支持符号提供程序，因此如果您已经知道类或ID名称，则可以快速跳转到正确的CSS / SCSS / LESS代码符号提供者

九.Debugger for Chrome

在vscode 中使用Chrom e DevTools 调试JavaScript代码

使用调试器

设置启动配置后，您可以调试项目。从“代码”中“调试”窗格的下拉列表中选择一个启动配置。按播放按钮或F5开始。

两个例子launch.json配置"request": "launch"。您必须指定file或url针对本地文件或网址启动Chrome。如果使用URL，请设置webRoot为提供文件的目录。这可以是绝对路径或使用路径${workspaceFolder}（在代码中打开文件夹）。webRoot用于将URL（如“ http：//localhost/app.js ”）解析为磁盘上的文件（如/Users/me/project/app.js），因此请注意正确设置。

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost/mypage.html",
            "webRoot": "${workspaceFolder}/wwwroot"
        },
        {
            "name": "Launch index.html",
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceFolder}/index.html"
        },
    ]
}

支持的功能

设置断点，包括启用源映射时的源文件中的断点
步进，包括Chrome页面上的按钮
“本地”窗格
调试动态添加的eval脚本，脚本标记和脚本

其他可选的启动配置字段

trace：如果为true，则适配器将其自己的诊断信息记录到文件中。文件路径将在调试控制台中打印。在GitHub上提交问题时，这通常是有用的信息。如果将其设置为“详细”，它还将登录到控制台。
runtimeExecutable：要使用的运行时可执行文件的工作空间相对或绝对路径。如果未指定，Chrome将从默认安装位置使用。
runtimeArgs：传递给运行时可执行文件的可选参数。
env：环境键/值对的可选字典。
cwd：运行时可执行文件的可选工作目录。
userDataDir：通常，如果在使用启动配置开始调试时Chrome已在运行，则新实例将无法在远程调试模式下启动。因此，默认情况下，扩展程序会在临时文件夹中使用单独的用户个人资料启动Chrome。使用此选项可设置要使用的其他路径，或设置为false以使用默认用户配置文件启动。
url：在“启动”配置中，它会在此网址上启动Chrome。
urlFilter：在'attach'配置或没有设置'url'的'launch'配置中，搜索带有此url的页面并附加到该页面。它也可以包含通配符，例如，"localhost:*/app"将匹配"http://localhost:123/app"或"http://localhost:456/app"，但不是"https://stackoverflow.com"。
sourceMaps：默认情况下，适配器将尽可能使用源图和原始源。您可以通过设置sourceMaps为false 来禁用此功能。
pathMapping：此属性将URL路径映射到本地路径，以便您更灵活地将URL解析为本地文件。"webRoot": "${workspaceFolder}"只是一个pathMapping的简写{ "/": "${workspaceFolder}" }。
smartStep：自动跳过不映射到源文件的代码。特别适用于使用async / await进行调试。
disableNetworkCache：如果为true，则将禁用网络缓存。
showAsyncStacks：如果为真，跨越异步调用调用堆栈（如setTimeout，fetch，解决承诺等）将被显示。