VS Code扩展(插件)推荐

一.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

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

六.

 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，解决承诺等）将被显示。

十.EditorConfig for VS Code

此插件尝试使用.editorconfig文件中的设置覆盖用户/工作区设置。不需要其他或特定于vscode的文件。正如任何EditorConfig插件，如果root=true没有指定，EditorConfig 将继续寻找一个.editorconfig文件的项目之外。 支持的属性 indent_style indent_size tab_width end_of_line insert_final_newline trim_trailing_whitespace