



## Web

### vscode for the Web

- https://vscode.dev/

### Monaco Editor: vscode 底层的代码编辑器，支持web

- https://github.com/microsoft/monaco-editor
- https://microsoft.github.io/monaco-editor/playground.html

## VSCodeVim: capture group in replace

旧版本 VSCodeVim 支持的是 JavaScript 正则表达式语法 `$1`

新版本则支持 Vim 正则表达式语法 `\1`

```
:%s/te(.)t/$1/g

:%s/te(.)t/\1/g
```
## VSCodeVim: newline

当前版本 1.51

- 支持搜索 `/\n...`
- 不支持替换 `:s/\n/...`

需要使用原始的 Vim

## Extension

### 安装运行入门模板
使用 Yeoman 初始化模板代码。

```
npm i -g yo generator-code
```

```
yo code

# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###

# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Initialize a git repository? Yes
# ? Bundle the source code with webpack? No
# ? Which package manager to use? npm

code ./helloworld
```

按下 ||F5||，会在新窗口中编译、运行扩展

打开命令窗口输入 `Hello World`, 可以看到消息提示

### 文件结构

- package.json

    - Contribute

- extension.ts


<h2>Web</h2>
<h3>vscode for the Web</h3>
<ul>
<li><a href="https://vscode.dev/" target="_blank">https://vscode.dev/</a></li>
</ul>
<h3>Monaco Editor: vscode 底层的代码编辑器，支持web</h3>
<ul>
<li><a href="https://github.com/microsoft/monaco-editor" target="_blank">https://github.com/microsoft/monaco-editor</a></li>
<li><a href="https://microsoft.github.io/monaco-editor/playground.html" target="_blank">https://microsoft.github.io/monaco-editor/playground.html</a></li>
</ul>
<h2>VSCodeVim: capture group in replace</h2>
<p>旧版本 VSCodeVim 支持的是 JavaScript 正则表达式语法 <code>$1</code></p>
<p>新版本则支持 Vim 正则表达式语法 <code>\1</code></p>
<pre class="language-bash"><code>:%s/te<span class="token punctuation">(</span>.<span class="token punctuation">)</span>t/<span class="token variable">$1</span>/g

:%s/te<span class="token punctuation">(</span>.<span class="token punctuation">)</span>t/<span class="token punctuation">\</span><span class="token number">1</span>/g
</code></pre>
<h2>VSCodeVim: newline</h2>
<p>当前版本 1.51</p>
<ul>
<li>支持搜索 <code>/\n...</code></li>
<li>不支持替换 <code>:s/\n/...</code></li>
</ul>
<p>需要使用原始的 Vim</p>
<h2>Extension</h2>
<h3>安装运行入门模板</h3>
<p>使用 Yeoman 初始化模板代码。</p>
<pre class="language-bash"><code><span class="token function">npm</span> i -g yo generator-code
</code></pre>
<pre class="language-bash"><code>yo code

<span class="token comment"># ? What type of extension do you want to create? New Extension (TypeScript)</span>
<span class="token comment"># ? What's the name of your extension? HelloWorld</span>
<span class="token comment">### Press &#x3C;Enter> to choose default for all options below ###</span>

<span class="token comment"># ? What's the identifier of your extension? helloworld</span>
<span class="token comment"># ? What's the description of your extension? LEAVE BLANK</span>
<span class="token comment"># ? Initialize a git repository? Yes</span>
<span class="token comment"># ? Bundle the source code with webpack? No</span>
<span class="token comment"># ? Which package manager to use? npm</span>

code ./helloworld
</code></pre>
<p>按下 <kbd>F5</kbd>，会在新窗口中编译、运行扩展</p>
<p>打开命令窗口输入 <code>Hello World</code>, 可以看到消息提示</p>
<h3>文件结构</h3>
<ul>
<li>
<p>package.json</p>
<ul>
<li>Contribute</li>
</ul>
</li>
<li>
<p>extension.ts</p>
</li>
</ul>

CL's Blogs

VSCode tips

Web

vscode for the Web

Monaco Editor: vscode 底层的代码编辑器，支持web

VSCodeVim: capture group in replace

VSCodeVim: newline

Extension

安装运行入门模板

文件结构