标签 Visual Studio Code 下的文章

VSCode 经典插件推荐,今天我要介绍的是:能够在某些领域大幅度提高VS Code使用效率和体验的工具。能够取代 VS Code原有功能的工具。对插件 API 的使用别出心裁的工具。Git 集成跟Git集成相关的插件,有如下三个很值得推荐。GitLensVS Code中的 Git 体验在易用性和完整性之间取得了一个不错的平衡,大部分用户都能够使用它完成工作,同时又不会被太多的功能吓到。但是很多硬核的 Git 用户肯定会觉得功能还不够用。包括但不限于:不能查看某个 commit 中的代码改动;不能比较两个 commit 或者 branch,然后阅览代码改动;不能查看代码历史记录。

- 阅读剩余部分 -

VSCode 修改工作区配色,持久化 UI 视图设置是 VS Code 定制的第一步,而第二步就是修改工作区里各个视图的配色了。相信你早就在插件市场下载过各种主题然后使用了,但其实自己修改主题颜色也非常简单,甚至不要求你有任何的编程知识。首先,运行命令 “打开设置(JSON)”去打开个人设置。然后你在编辑器里输入 “workbench.colorCustomizations”,这时候,VS Code 的自动补全就会给你两个提示项了,第一个是:{ "statusBar.background": "#666666", "panel.background": "#555555", "sideBar.background": "#444444" }

- 阅读剩余部分 -

VSCode 修改主题配色,前面我们提到了,当你自定义编辑器内配色时,自动补全给你提示了所有已经安装的主题。通过选择这些主题,你可以只针对它们做颜色修改,而不影响其他的主题的颜色。工作区的颜色修改也是如此。比如说,你想修改 Monokai 的某个颜色定义,那么你可以这么写:"workbench.colorCustomizations": { "[Monokai]": { "statusBar.background": "#666666", "panel.background": "#555555", "sideBar.background": "#444444" }, }

- 阅读剩余部分 -

VSCode 修改编辑器配色,除了工作区的配色,你也可以修改编辑器内代码的颜色。这个就真的强大了,因为为代码书写语法文件和配色文件,都是非常复杂的,但是在 VS Code 中,你依然有非常简单的方式去完成部分修改。基本类型颜色修改首先,你要做的,就是知道你想要修改的代码,是属于什么基本类型。你可以将光标移动到某段你想要修改颜色的代码上,比如将光标移动到一段字符串上,然后,在命令面板里运行 “检查TM作用域”(Inspect TM Scopes)命令。此时,编辑器中出现一个新的悬浮窗。这个窗口里呈现的,就是当前这个代码片段所对应的语言、语法类型以及当前的颜色和背景色等。

- 阅读剩余部分 -

VSCode 固定 UI 视图,VSCode可以让我们可以做持久化 UI 视图,这句话是什么意思呢?VS Code 的各种 “切换 xyz 视图可见性” 的命令,它最终都是将这个配置写到了你的个人设置中。比如说,我们运行 “切换状态栏可见性”(Toggle Status Bar Visibility),然后再打开个人设置 (JSON),我们可以在设置中找到这样一条:"workbench.statusBar.visible": false,这个配置也非常好理解,它是表达:statusBar(状态栏)并不是 visibile (可见)的。再比如,你可以将侧边栏显示在右侧,像 Visual Studio 里那样,你可以运行 “切换边栏位置”(Toggle Side Bar Position)。完成这样的命令后,个人设置里就会多出下面这条设置:"workbench.sideBar.location": "right"还有就是搜索视图的位置,你可以运行“切换搜索视图位置”命令。

- 阅读剩余部分 -

VSCode 支持Docker,今天我们要介绍的内容是,如何在 VS Code 中配置、部署和调试 Docker。在阅读本文之前,首先你需要对 Docker 容器化的知识有所了解。其次,Docker 的操作,都可以通过命令行来实现。所以今天我要着重介绍的就是:VS Code里如何使用 UI 和命令来简化命令行操作,以及如何对 Docker 容器里的代码进行调试,这里我会借助两个简单的例子来讲解。安装Docker插件

- 阅读剩余部分 -

VSCode 支持Emmet,我们介绍过代码片段(Code Snippet),你可以通过预定义代码的模板来省去重复代码的输入。但是有的时候,预定义好的模板也还是有局限性。尤其是在书写 HTML 的时候,你输入的代码,并不是 if 条件语句、for 循环语句这种常见的定式,而是根据你想要在网站上展示的效果而临时决定的 HTML 结构。换句话说,你书写的 HTML 其实反映的是业务逻辑,而这往往是无法通过代码片段来提前预测的。Emmet 就是要解决这样的问题,为你的 HTML、CSS 书写提供类似于代码片段的输入方式,你只需输入一小段缩写,然后将其展开成最终的代码。Emmet 的语法类似于 CSS 选择器,你通过写一段接近于 CSS 选择器的代码缩写,然后使用 Emmet 引擎将它展开成复杂但完整的 HTML 或者 CSS 代码。举个最简单的例子,比如说你在 HTML 中写了 ul,然后 Emmet 就能够把它展开成下面的 HTML:

- 阅读剩余部分 -

VSCode 支持CSS,介绍两个比较实用的功能:取色器 Color Picker和CSS 选择器的预览。取色器 Color Picker首先,你可以在书写 HTML 和 CSS 时使用取色器。在书写 HTML 和 CSS 的时候,你可能经常需要修改元素的颜色。VS Code 为修改颜色,提供了一个图形化的界面,其中包含了颜色相关的属性。当你打开一段 HTML 或者 CSS 代码时,你可以看到,VS Code 在颜色的前面画了一个方块(我们称作颜色装饰器 Color Decorator),用于展示这段颜色属性所对应的最终效果。

- 阅读剩余部分 -

VSCode 支持C# ,VS Code上的 C# 支持并不是十分完整。为什么这么说呢?这个 C# 插件,并不是要完成 Visual Studio 的 C# 支持的所有功能,而只是立足于 .NET Core 和 Mono。也就是说,即使你是在 Windows 上使用VS Code并且使用这个插件,也不能很好地支持完整的 .NET framework。看到这里,如果你的目的是使用VS Code和 C# 插件来替代 Visual Studio 完成你日常的 .NET 开发(非 .NET Core),那么相信你已经知道答案了,你还是应该使用 Visual Studio。而如果你本身对 .NET Core 很感兴趣,或者你就是在 macOS 和 Linux 上,想尝试 C#,那么下面的介绍就值得一看了。安装使用首先,你需要到插件市场安装 C# 插件。

- 阅读剩余部分 -