vscode 插件

365 阅读2分钟

vscode 开发必备插件记录!

Auto Rename Tag

作用:自动重命名成对的 HTML/XML 标签。

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

该中文(简体)语言包为 VS Code 提供本地化界面。

如何指定语言:Ctrl+Shift+P 显示“命令面板”,输入 Configure Display Language 会显示当前语言以及可以使用的语言列表。

Code Spell Checker

作用:一个基本的代码拼写检查器,帮助捕获常见的拼写错误。

比如:检查变量名所用的单词拼写是否有错误。

ESLint

将 ESLint 集成到 VS Code 中

GitLens — Git supercharged

增强并简化 Git 的操作。

Git Graph

作用:查看当前仓库的 Git 图,并且可以很方便的从图中做一些 Git 操作。

Highlight Matching Tag

作用:高亮显示匹配的标签,并且可以自定义样式

setting.json 配置如下可高亮匹配成对的括号:

// 控制是否启用括号对着色。请使用 #workbench.colorCustomizations# 重写括号突出显示颜色。
"editor.bracketPairColorization.enabled": true,
// 控制是否启用括号对指南。
"editor.guides.bracketPairs": "active",

Image preview

作用:在 gutter 和 hover 中显示图像预览

Live Server

作用:打开页面并开启一个本地服务

Markdown All in one

作用:提供所有 markdown 支持

新窗口预览:Ctrl + Shift + V 拆分窗口进行实时预览

open in browser

作用:允许您在默认浏览器或应用程序中打开当前文件。

快捷键:

  • Alt + B 在默认浏览器打开当前 html 文件
  • Shift + Alt + B 选择一个浏览器打开当前 html 文件

右键菜单进行选择

TODO Highlight

作用:高亮标记的文本

settings.json 中配置:

// 【TODO Highlight】配置
"todohighlight.isEnable": true, // 开启
"todohighlight.isCaseSensitive": true, // 是否大小写敏感
"todohighlight.keywords": [
    {
        "text": "TODO:", // 匹配的文本
        "color": "orange", 
        "border": "1px solid orange",
        "backgroundColor": "rgba(0,0,0,.2)",
        "isWholeLine": true, // 是否整行显示
    }
],

效果:

image.png

vscode-icons

作用: 美化文件和文件夹图标