Logo

菜单

发布于 2026-01-06 10 阅读
0

正在配置我的 VS Code 编辑器 :)

正在配置我的 VS Code 编辑器 :)

我一直想写一篇关于如何配置我最喜欢的 IDE——VS Code 的文章。之所以写这篇文章，是因为我最近换了电脑，不得不重新花几个小时配置。我希望下次能用这篇文章快速上手。我也希望这篇文章能帮助你配置好 VS Code，从而提高你的工作效率和编码技能。

好了，开始了……

VS Code

  • 它是一款免费的代码编辑器，经过重新定义和优化，可用于构建和调试现代 Web 和云应用程序。
  • 它轻巧但功能强大，可在您的桌面上运行，并适用于 Windows、macOS 和 Linux 系统。
  • 它内置了对 JavaScript、TypeScript 和 NodeJS 的支持，并拥有丰富的扩展生态系统，支持十几种其他语言（包括 C#、C++、Java、Python、PHP、Go 和 Dart 等）。

安装——只需从 Visual Studio Code 官网下载，几分钟即可上手。
跨平台——可在 macOS、Windows 和 Linux 上运行。
每月更新——每月新版本都会带来新功能和错误修复。您可以根据需要启用自动更新。
预览版——如果您想使用 VS Code 开发团队日常使用的版本，可以从官网安装预览版。
便携——VS Code 支持便携模式。VS Code 创建和维护的数据存储在自身附近，可以通过 U 盘等方式在不同环境之间移动。

扩展

好的，这就是这篇文章的重点。

免责声明：我只会介绍我在过去 4 年里每天都在使用的几个扩展程序。

市场

  • 您可以在这里的应用市场找到 Visual Studio 系列的所有扩展程序。
  • 您也可以通过 VS Code 编辑器安装它们。只需在 Windows 系统中使用ctrl+ shift+命令，或在 macOS 系统中使用+ +命令即可。XshiftcommandX

现在让我们来看看我最喜欢的扩展程序……

主题

  • 虽然 VSCode 自带一些主题选项，但我喜欢自己配置主题。

诺克提斯 -> 作者：利维乌·舍拉

这是我最喜欢的主题。其实我个人更喜欢浅色主题来搭配我的IDE（话虽如此）， Noctis主题集包含浅色和深色两种主题，暖色和冷色搭配均衡，对比度适中。 截至撰写本文时，Noctis共有11个版本（8个深色版本，3个浅色版本）。
来打败我

我最喜欢的是诺克提斯·拉克斯。

诺克提斯

工具和语言

  • 有数百种扩展程序提供语言支持。这些是我经常使用的。

ESLint

它将 ESLint JavaScript 集成到 VSCode 中。
对于 ESLint 新手来说，它是一个可插拔的 JavaScript 代码检查工具。它会静态分析你的代码，快速查找问题。
你需要预先安装 ESLint，可以是本地安装，也可以是全局安装。你可以通过npm install eslint在工作区内安装或npm install -g eslint全局安装来安装 ESLint。
我不会深入讲解 ESLint 及其功能，你可以在这里阅读所有相关信息。
如果你喜欢冗余，并且故意给自己增加难度，你还可以安装TSLint扩展来进行 TypeScript 代码检查。

  • 不过，这并非必要，因为 ESLint 支持 TypeScript，会自动使用/读取您的tsconfig.json规则。

美化

美化、解压缩或反混淆 JavaScript 和 HTML 代码，或使 JSON 更易读。
此扩展程序可以美化您的代码。VSCode内部
使用js-beautify，但它无法修改您想要使用的样式。此扩展程序允许您在 VSCode 中运行 js-beautify。

和往常一样，你可以在这里阅读和体验 js-beautify。

自动关闭标签

利用 AI 代码补全功能，自动添加 HTML/XML 结束标签，提高您的编码效率。
此扩展程序

  • 当您在开始标签的结束括号中输入内容时，会自动添加结束标签。
  • 自动闭合自闭合标签
  • 使用键盘快捷键手动添加结束标签

更好的评论

此扩展程序可帮助您在代码中创建更易于理解的注释。您可以将注释分类为：

  • 警报
  • 查询
  • 所有
  • 精彩片段

提示：在使用 React Native 或 Flutter 时，Android Studio 会读取你的注释，让你在终端中轻松浏览代码库。

彩虹括号

简单来说，这个扩展程序会将匹配的括号对涂上相同的彩虹色，并将任何孤立的右括号高亮显示为红色。
它适用于圆括号、方括号和波浪括号。

我发现这在调试时特别有用。

语法片段

ES7 React/Redux/GraphQL/React-Native 代码片段

简单来说，代码片段更像是语法快捷方式。
此扩展程序为 React、Redux、React Native 和 GraphQL 提供 JavaScript 和 TypeScript 代码片段，并支持 ES7 语法。
它为这些语言/文件扩展名提供语法快捷方式。

  • javascript(.js)
  • javascript react(.jsx)
  • typescript(.ts)
  • typescript react(.tsx)

代码片段示例有
imp-> import moduleName from 'module'
ime-> import * as alias from 'module'
fre-> arrayName.forEach(element => {})
sto->setTimeout(() => {}, delayTime)

React 17 也受支持。只需在代码片段前加上下划线 (_)，例如
_rmc-> 即可生成一个记忆化的 React 组件。

JavaScript (ES6) 代码片段

此扩展包含适用于 VS Code 的 ES6 语法 JavaScript 代码片段，并
为这些语言/文件扩展名提供语法快捷方式。

  • javascript(.js)
  • javascript react(.jsx)
  • typescript(.ts)
  • typescript react(.tsx)
  • HTML（.html）
  • Vue（.vue）

React Native 工具

如果你像我一样经常使用 React Native 开发移动应用，你一定会喜欢这个扩展。它为 React Native 提供了调试和集成命令。
和往常一样，要使用这个扩展，你需要：

  • 已搭建 React Native 开发环境
  • 在 VSCode 中打开你的 React Native 项目根文件夹。使用此扩展程序，你可以运行如下命令：
  • 启动安卓模拟器
  • 运行安卓模拟器
  • 运行 iOS 模拟器
  • 运行博览会
  • 启动、停止或重启打包程序
  • 重新加载应用
  • 启动或停止运木车
  • 运行或停止网络检查器，以及更多功能……

扑

除了使用 React Native 开发移动应用之外，我还喜欢使用 Flutter（它的升级版）。
这个扩展程序为 Flutter 移动应用提供了高效的编辑、重构、运行和重新加载功能，并且还支持 Dart 语言代码片段。

与往常一样，此扩展需要您设置 Flutter 开发环境、Dart 语言扩展和一个打开的 Flutter 项目。

Git 相关的东西

GitLens - Git 超级版

这是一个由 Eric Amodio 创建、开发和维护的 VSCode 开源扩展。
它可以帮助您更好地理解代码。
只需快速浏览代码行或代码块的修改者、修改原因和修改时间，
即可了解代码的演变历程。
它功能强大、内容丰富且高度可定制。
主要功能包括：

  • 修订导航 - （向前和向后）浏览历史记录
  • 当前行错误 - 在行尾添加注释，显示（鼠标悬停时）最后修改的提交和作者。
  • 侧边栏视图 - 提交、存储库、文件历史记录、行历史记录、分支、远程、暂存区和贡献者视图。
  • 交互式变基编辑器
  • 丰富的远程提供程序 - 与您的 Git 提供程序集成；Github、Gitlab、Gitea、Bitbucket、Azure DevOps 用于问题和拉取请求链接。

归咎于

如果您只想知道代码更改的责任人是谁，而不需要 GitLens 的所有其他强大功能，那么请使用此扩展程序。

我同时使用了gitlens和git blame。

.gitignore

我非常喜欢这个扩展。
这个扩展允许你从GitHub 的 .gitignore 仓库.gitignore中提取模板。

智能感知

智能感知（Intellisense）是一个统称，涵盖各种代码编辑功能，包括代码补全、参数信息、快速信息和成员列表。VSCode
内置了对 JavaScript、TypeScript、JSON、HTML、CSS、SCSS 和 Less 的智能感知功能。
智能感知功能由语言服务提供支持。语言服务会根据语言语义和源代码分析提供智能代码补全。如果语言服务知道可能的补全选项，智能感知建议会在您输入时弹出。如果您继续输入字符，成员（变量、方法等）列表将被筛选，仅显示包含您输入字符的成员。按下 Ctrl+CTab或Ctrl+DEnter将插入选定的成员。

也就是说，以下是我安装的一些扩展程序，用于扩展编辑器的智能感知范围。

npm 智能感知

此扩展程序可在导入语句中自动补全 npm 模块。
默认情况下，NPM Intellisense 仅扫描已安装的依赖项。
您可以进行设置scanDevDependencies，true使其也扫描开发依赖项 (devDependencies)。

{
  "npm-intellisense.scanDevDependencies": true,
}
Enter fullscreen mode Exit fullscreen mode

路径智能感知

此扩展程序可自动补全文件名。
路径智能感知功能默认会在语句为导入语句时移除文件扩展名。

Pylance

此扩展为 Python 提供快速、功能丰富的语言支持。
它与 VSCode 中的 Python 协同工作，并由微软的静态类型检查工具 Pyright 提供支持。

有趣的事实：Pylance这个名字是对 Monty Python Lancelot 的致敬，他是第一个回答圣杯游戏中桥梁守护者问题的骑士。

Pylance提供了一些非常棒的功能：

  • 文档字符串
  • 签名帮助
  • 参数建议
  • 代码补全
  • 汽车进口
  • Jupyter Notebook 兼容性
  • 语义高亮

笑话

借助 Facebook Jest 的智能感知支持，像专业人士一样进行测试。
功能包括：

  • 当您位于已安装 Jest 的项目根目录时，Jest 会自动启动。
  • 显示问题检查器内部的失败
  • 为快照文件添加语法高亮显示
  • 显示测试覆盖率信息
  • 帮助调试 VS Code 中的 Jest 测试
  • 支持多种测试运行模式。

HTML、CSS、Markdown 相关内容

实时服务器

如果您经常使用 HTML 进行编写或构建，不妨了解一下这款扩展程序。
它允许您启动一个本地开发服务器，并为静态和动态页面提供实时重载功能。
一些很棒的功能包括：

  • 快速开发带有实时浏览器刷新功能的在线服务器
  • 通过状态栏单击一下即可启动或停止服务器
  • 可自定义端口号、服务器根目录、默认浏览器
  • 支持任何浏览器
  • 通过无线局域网进行远程连接（可用手机测试）
  • 使用首选主机名
  • SVG 支持
  • 支持 https
  • 已启用 CORS
  • 支持多根工作区

Markdown 预览增强版

如果您使用 Markdown 编写博客，或者在 Gatsby 中使用 Markdown，那么这款扩展程序非常适合您。Markdown
Preview Enhanced 扩展程序为您提供许多实用功能，例如：

  • 自动滚动同步，
  • 数学排版，
  • 美人鱼，
  • PlantUML，
  • pandoc，
  • PDF导出，
  • 代码块
  • 演示文稿撰写人等

HTML CSS 支持

VS Code 自然内置了对 Emmet 代码片段的支持。

如果你只知道电视剧《错位青春》中由才华横溢的肖恩·伯迪饰演的艾米特，那么我们说的艾米特并非指他。我指的是艾米特，这套文本编辑器插件，它可以通过内容辅助功能，实现对HTML、XML、XSLT和其他结构化代码格式的高速编码和编辑。

Emmet 的缩写和代码片段扩展功能默认启用html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, less, etc。
但我注意到有时它无法正常工作，所以我使用了这个扩展。
该扩展提供以下功能：

  • HTMLid和class属性补全
  • 支持链接和嵌入式样式表
  • 支持模板继承——在进行ejs模板编程时非常有用
  • 按需验证 CSS 选择器

颜色高亮

此扩展程序可在编辑器中高亮显示并设置 CSS 或网页颜色样式。

彩虹 CSV

如果你像我一样是位 10X 开发者，那么你肯定已经多次处理过 CSV 文件，下次使用时你一定会想要安装这个扩展程序。
该扩展程序提供以下功能：

  • 以不同颜色突出显示以逗号 (.csv)、制表符 (.tsv)、分号和竖线分隔的文件中的列。
  • 鼠标悬停时显示列信息
  • CSVLint - CSV 文件自动一致性检查
  • 多光标列编辑 - 超级英雄风格
  • 列对齐并留空，并缩小（修剪空格）
  • 以类似 SQL 的语言运行查询——复仇者联盟风格。

萨斯

Sass：语法超棒的样式表——给宠物起的名字很酷吧？
这个扩展程序提供缩进式 Sass 语法高亮、自动完成和格式化功能。

SVG 查看器

此扩展程序允许您在 VS Code 中查看 SVG 文件。
不仅如此，它还支持
其他功能：您可以将 SVG 导出为 PNG 格式（甚至可以指定尺寸）、将 SVG 转换为 URI Scheme 格式以及复制到剪贴板等等。

vscode-styled-components

此扩展程序使用基于 language-scss 和 language-css 构建的 CSS 语法，为样式组件提供语法高亮和智能感知支持。

vscode图标

如果您想用图标轻松区分项目中的文件，那么您可以安装此扩展程序。

现在……

真正酷的东西

Thunder客户端

这是我最喜欢的扩展程序。
Thunder客户端

此扩展程序为 VS Code 提供了一个 REST API 客户端和一个基于 GUI 的 HTTP 客户端。
快来体验一下吧 :)
雷霆 VS Code

WakaTime

Wakatime 可以根据你的编码活动自动生成指标、分析和时间跟踪信息。
要使用它，你需要先注册 Wakatime 账号，获取你专属的 API 密钥，然后在安装此扩展程序时输入该密钥。
我喜欢这个扩展程序，因为每周一早上我都会收到一份详细的报告，记录我过去一周的编码活动。快来试试吧！
wakatime 报告

你看，我只用VS Code。

额外内容

  • 字体——我使用Fira Code和Operator Mono。请查看Rakesh的这篇博客，了解如何安装这些字体。
  • vscode-shortcuts - 再次提醒，请查看这篇文章了解一些快捷键。

希望您喜欢这篇长文。我写得很开心。如果我以后发现或开发出什么很棒的新扩展程序，我会在这里分享。

文章来源：https://dev.to/kharioki/configuring-my-vs-code-editor-gm6
使用 Dart、Aqueduct ...
使用 Cargo 构建脚本自动生成...