VSCode

2021-03-27bigao阅读(77)

VSCode 插件架构，VS Code 是通过 Electron 实现跨平台的，而 Electron 则是基于 Chromium 和 Node.js，比如 VS Code 的界面，就是通过 Chromium 进行渲染的。同时， VS Cod...

2021-03-27丹青阅读(81)

VSCode 创建一个插件，如何创建一个插件，VS Code 的插件既然是一个 Node.js 应用，那么官方自然也会提供了基于 NPM 的工具链来帮助你创建和维护插件。 首先你需要的是 yeoman，一个脚手架工具。通过 yeoman 你...

2021-03-26牛青阅读(57)

VSCode 运行插件，现在我们对这个插件的实现方式和注册方式已经有了了解，下面就到了运行和调试代码的时候了。VS Code 的插件代码脚手架已经为我们提供了 launch.json ，所以我们只需要按下 F5 即可启动代码。 代码启动后，...

2021-03-26小杜阅读(57)

VSCode 插件开发编辑器命令，分为两个部分介绍：第一部分我会介绍如何编写编辑器快捷键；第二部分则是介绍如何分享快捷键配置、代码片段和颜色主题。 编写编辑器命令 我们可以通过插件 API 来编写编辑器内的命令。下面我们来看看，要实现一个编...

2021-03-25啊Q阅读(55)

VSCode 插件开发自定义语言，在开始今天的内容前，我首先要说的就是 Don’t Panic，别害怕。自定义语言支持听起来可能有点复杂，而且似乎距我们的日常工作有些遥远。 其实不然，我们在工作中可能经常会自定义一些配置文件，甚至要自定义一...

2021-03-25丹青阅读(99)

VSCode 插件开发装饰器，我们一起来聊一聊 Decorations 装饰器。在VSCode 经典插件推荐里，介绍过Pigment 这个插件，有了这个插件，在代码中书写的颜色，将会以背景色的形式，直接被渲染在代码下面。 这个功能，就是通过...

2021-03-24喔28阅读(66)

VSCode 插件开发工作台，在VSCode 插件开发的前几篇文章，介绍了编辑器相关的 API。不过，除了拓展编辑器以外，我们还可以拓展 VS Code 的其他组件，这一类 API，我把它们叫做工作台 API。下面我们就来看看， 工作台相关...

2021-03-24嘿哈阅读(73)

VSCode 插件维护和发布，前面的内容，我们主要在介绍 VS Code 的插件 API 是如何使用的，有哪些分类。今天我们换个思路，先看看 VS Code 的插件 API，在设计上有哪些通用之处，以及有哪些是我们在写插件时要注意的。另外，...

2021-03-24牛青阅读(65)

VSCode 是什么，VS Code的全称是Visual Studio Code，但这全名实在是太长了，很多用户喜欢叫它VS Code。说起VS Code，官方定义它是一个免费的、开源的跨平台编辑器。之所以强调“编辑器”，我想是因为 VS ...

2021-03-23丹青阅读(79)

VSCode 入门，今天我们先来聊一下 VS Code 的安装和更新、VS Code 初次使用的指引界面、语言设置，以及命令行使用等基础问题，以便你能快速上手VS Code。 安装与版本选择 VS Code 有两个不同的发布渠道：一个是我们...

2021-03-22牛青阅读(92)

VSCode 键盘操作，做到双手不离键盘，今天先来谈一谈核心的键盘操作：光标的移动、文本的选择、文本的删除，以及如何为编辑器命令绑定快捷键。 光标移动 移动光标最常用的就是方向键，但是方向键每次只能把光标移动一个位置，可以说是一种相对低效的...

2021-03-22无卤阅读(83)

VSCode 代码行编辑，下面我就以一段 CSS 代码作为例子，来和你分享下代码行编辑中的高阶技巧。 .foo { padding: 5px; margin: 5px; font-size: 5px; } 要删掉一行代码，你可以选中它，然后...

2021-03-21bigao阅读(91)

VSCode 撤销光标移动，撤销光标的移动和选择。有的时候你移动完光标之后，又希望把光标回退到上一个位置，这时你只需按下 “Cmd + U”（Windows 上是 “Ctrl + U”），就可以撤销这一次光标的移动。 炫意HTML5 &ra...

2021-03-21小杜阅读(113)

VSCode 行排序。无论是你在写代码，还是写 Markdown，你都可以把代码行按照字母序进行重新排序。不过这个命令比较小众，VS Code 并没有给这个命令指定快捷键，你可以调出命令面板，然后搜索 “按升序排列行” 或者 “按降序排列行...

2021-03-20牛青阅读(149)

VSCode 合并代码行。有的时候你可能会为了避免代码看起来过于冗余，就会把比较短小的几行代码合并到一行里面去。这时，你只需要按下 “ Ctrl + j ” （Windows 上未绑定快捷键，可以打开命令面板，搜索 ”合并行“）就可以了，而...

2021-03-20田田阅读(107)

VSCode 调整字符大小写，我估计这个你会经常用到。你可以选中一串字符，然后在命令面板里运行“转换为大写”或 “转换为小写”, 来变换字符的大小写。 炫意HTML5 » [VScode教程] VSCode 调整字符大小写

2021-03-19啊Q阅读(100)

VSCode 调换字符的位置。你可以按下 “Ctrl + t” （Windows 上未绑定快捷键，可以打开命令面板，搜索 ”转置游标处的字符“） 来把当前光标前后的字符调换位置。 炫意HTML5 » [VScode教程] VSC...

2021-03-19bigao阅读(112)

VSCode 代码缩进，有的时候，你会觉得代码格式化太重了，需要的可能只是把代码里的缩进调整一下。这时你可以打开命令面板（快捷键“Cmd + Shift + P”），搜索 “缩进”，然后使用 “重新缩进行” 将整个文档的缩进进行调整，但更多...

2021-03-18啊Q阅读(105)

VSCode 代码格式化快捷键，我们平常在做自己的小项目或者随便写一些脚本的时候，可能不会太在意代码的格式。不过一旦开始团队合作，整个项目组则会选择同一个代码风格和格式以有效降低协同成本。所以定期对自己写的代码进行格式化是个很好的习惯。 你...

2021-03-18阿喜阅读(184)

VSCode 添加代码注释，你在调试代码时，肯定经常需要临时地把一些代码注释掉。如果你要将一行代码注释掉，你只需按下 Cmd + / （Windows 上时 Ctrl + /）。如果你需要把一整段代码注释掉，按下 Option + Shif...

2021-03-17啊Q阅读(92)

VS Code自动补全,VS Code 当中的自动补全内容，其实是由语言服务来提供的。本文介绍VS Code自动补全功能和VS Code自动补全设置。 VS Code 为编程语言工作者提供了统一的 API ，即 Language Serve...

2021-03-17中天阅读(82)

VS Code文本选择，首先我们来看一下如何使用鼠标快速地选择文本。最简单的方式，也是我们每个人最熟悉的方式，就是按住鼠标左键，然后拖动鼠标，直到选中所有我们想要选择的文字为止，再松开鼠标即可。 我们在前面的章节学习过，如何通过键盘快捷键快...

2021-03-16牛青阅读(104)

VS Code快速预览是指，有的时候，当我们看到一个建议列表里的某个函数名，我们可能并不能够立刻想起它的作用是什么，它的参数定义是什么样的。这时候我们可以单击当前这一项建议的最右侧的蓝色图标。 点击这个图标后，建议列表旁边就有出现一个快速预...

2021-03-16丹青阅读(72)

VS Code参数预览,当我们从建议列表选择了一个函数，然后输入括号，准备开始输入参数时，我们会看到一个参数预览的悬浮框。通过这个参数预览的窗口，我们可以知道这个函数可以传入哪些参数，它们的参数类型又是什么样的。 同样的，隐藏这个窗口的快捷...

2021-03-15老王阅读(145)

VS Code快速修复,语言服务除了在书写代码的时候提供提示以外，还能够帮我们分析当前的代码，检测出他们潜在的问题，然后提供快速修复的方案。比如在下面的 CSS 代码中，我们拼错了 padding 这个属性。 .foo { font-siz...