Visual Studio Code 常用插件收集推荐

Visual Studio Code 插件

• 收集了自己常用的一些插件，以及周边，如编程等宽字体等。
• 可以点击链接安装，或在插件管理中搜索名称安装。

外观部分

字体

• Cascadia Code
  • 微软出品，开源编程字体，作为 Microsoft Terminal 的默认字体，安装 Normal 跟 Bold 两个字重就好。
  • https://github.com/microsoft/cascadia-code (opens in a new tab)
  • 启用方式：打开设置，找到‘Editor: Font Family’，在最前面添加 'Cascadia Code'，要有引号。

界面主题

• GitHub Theme
  • 来自 GitHub 的主题，深色浅色都有，熟悉的 GitHub 味道。
  • https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme (opens in a new tab)

产品图标主题

• Fluent Icons
  • 微软出品，Fluent 设计风格的图标，更多圆角，更现代。
  • https://marketplace.visualstudio.com/items?itemName=miguelsolorio.fluent-icons (opens in a new tab)

文件图标主题

• 👍 Symbols
  • 来自微软 vscode 设计师 Miguel Solorio 的图标作品
  • https://marketplace.visualstudio.com/items?itemName=miguelsolorio.symbols (opens in a new tab)
• vscode-icons
  • 微软出品，图标更多，文件和文件夹都会有图标。
  • https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons (opens in a new tab)
• Material Icon Theme
  • MD 风格的图标主题
  • https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme (opens in a new tab)

插件部分

• Beautify
  • 格式化代码，支持 JS、JSON、CSS、Sass、HTML（定义快捷键更方便）
  • https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify (opens in a new tab)
• Better Align
  • 代码对齐插件，可以按 = : 等符号对齐，强迫症福音。
  • https://marketplace.visualstudio.com/items?itemName=wwm.better-align (opens in a new tab)
• Bookmarks
  • 为代码文件添加书签
  • https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks (opens in a new tab)
• Change case
  • 修改变量的大小写方式
  • https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case (opens in a new tab)
• Code Runner
  • 快速运行代码片段
  • https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner (opens in a new tab)
• 👍 Code Spell Checker
  • 英文拼写检查插件，命名是个技术活，特别是单词拼写错误可能会造成一些隐蔽的 Bug。
  • https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker (opens in a new tab)
• 👍 colorize
  • 可显示颜色代码的预览，方便在 CSS 里面直接查看。
  • https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize (opens in a new tab)
• 👍 DotENV
  • 支持 .env 文件高亮（很久没更新，但是凑合够用）。
  • https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv (opens in a new tab)
• 👍 ESLint
  • JS/TS 语法检查器，一切为了代码的统一。
  • https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint (opens in a new tab)
• 👍 Error Lens
  • 直接在代码里面高亮显示警告和错误。
  • https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens (opens in a new tab)
• 👍 Excalidraw
  • 在 VSCode 里面直接使用 Excalidraw 画布。
  • https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor (opens in a new tab)
• 👍 filesize
  • 左下角显示当前文件大小。
  • https://marketplace.visualstudio.com/items?itemName=mkxml.vscode-filesize (opens in a new tab)
• 👍 GistPad
  • 在本地创建、编辑、删除 GitHub Gist 中的代码片段（Code Snippet）。
  • https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs (opens in a new tab)
• 👍 GitHub Codespaces
  • GitHub 出品，在本地打开 Codespaces 开发项目。
  • https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces (opens in a new tab)
• 👍 GitHub Copilot
  • GitHub 出品，AI 帮你写代码，需要到官网申请使用权限 https://copilot.github.com。 (opens in a new tab)
  • https://marketplace.visualstudio.com/items?itemName=GitHub.copilot (opens in a new tab)
• 👍 GitHub Copilot Labs
  • GitHub 出品，支持翻译代码以及后续的尝鲜能力。
  • https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-labs (opens in a new tab)
• GitHub Pull Requests and Issues
  • GitHub 出品，在本地直接查看和处理 PR 跟 Issues。
  • https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github (opens in a new tab)
• 👍 GitHub Repositories
  • 在 vscode 直接打开 GitHub 项目，不需要 Clone 到本地。
  • https://marketplace.visualstudio.com/items?itemName=GitHub.remotehub (opens in a new tab)
• 👍 Image preview
  • 可以在代码的左侧预览链接的图片缩略图
  • https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview (opens in a new tab)
• 👍 Import Cost
  • 显示引用库的大小
  • https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost (opens in a new tab)
• 👍 indent-rainbow
  • 让缩进出现🌈的颜色
  • https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow (opens in a new tab)
• JS & CSS Minifier (Minify)
  • JS 跟 CSS 文件压缩工具，工具条，一键在同级目录生成.min 文件。
  • https://marketplace.visualstudio.com/items?itemName=olback.es6-css-minify (opens in a new tab)
• 👍 Live Preview
  • 微软出品，快速启动本地服务器，可以在右键菜单启动，在 vscode 内部打开调试。
  • https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server (opens in a new tab)
• Live Server
  • 第三方插件，快速启动本地服务器，用于预览调试页面。
  • https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer (opens in a new tab)
• 👍 Live Share
  • 微软官方出品，远程实时协作插件，支持共享本地端口、终端。
  • https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare (opens in a new tab)
• Markdown Preview Github Styling
  • 按 GitHub 的 Markdown 风格来预览 md 文件。
  • https://marketplace.visualstudio.com/items?itemName=bierner.markdown-preview-github-styles (opens in a new tab)
• MDX
  • MDX 格式文件语法高亮。
  • https://marketplace.visualstudio.com/items?itemName=silvenon.mdx (opens in a new tab)
• 👍 Microsoft Edge Tools for VS Code
  • 微软出品，Edge 调试工具。
  • https://marketplace.visualstudio.com/items?itemName=ms-edgedevtools.vscode-edge-devtools (opens in a new tab)
• Partial Diff
  • 代码块对比。
  • https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff (opens in a new tab)
• 👍 Path Intellisense
  • 路径自动完成。
  • https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense (opens in a new tab)
• 👍 Polacode
  • 将代码块导出成漂亮的图片。
  • https://marketplace.visualstudio.com/items?itemName=pnp.polacode (opens in a new tab)
• Prettier - Code formatter
  • 代码格式化插件。
  • https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode (opens in a new tab)
• Quokka.js
  • JS 代码结果实时预览。
  • https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode (opens in a new tab)
• Regex Previewer
  • 正则预览工具。
  • https://marketplace.visualstudio.com/items?itemName=chrmarti.regex (opens in a new tab)
• 👍 Remote - SSH
  • 微软出品，SSH 连接远程服务器，直接操作文件。
  • https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh (opens in a new tab)
• REST Client
  • 直接请求和调试接口。
  • https://marketplace.visualstudio.com/items?itemName=humao.rest-client (opens in a new tab)
• 👍 Sort lines
  • 非常好用的排序工具，比如支持按首字母去重排序。
  • https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines (opens in a new tab)
• 👍 Sourcegraph
  • 专业的代码搜索服务，不需要跳转到浏览器单独搜索。
  • https://marketplace.visualstudio.com/items?itemName=sourcegraph.sourcegraph (opens in a new tab)
• SVG Viewer
  • SVG 文件浏览工具。
  • https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer (opens in a new tab)
• 👍 Todo Tree
  • 高亮 TODO 注释块。
  • https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree (opens in a new tab)
• 👍 Vetur
  • Vue 配套插件。
  • https://marketplace.visualstudio.com/items?itemName=octref.vetur (opens in a new tab)
• 👍 Visual Studio IntelliCode
  • 来自微软的智能代码提示插件，提升提示的准确性。
  • https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode (opens in a new tab)
• 👍 Vite
  • Vite 配套插件，更好地使用 Vite 来开发 Vue 网站。
  • https://marketplace.visualstudio.com/items?itemName=antfu.vite (opens in a new tab)