Visual Studio Code 插件

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

外观部分

字体

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

界面主题

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

产品图标主题

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

文件图标主题

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

插件部分

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

标签：开发