- 本文用于介绍萌娘百科中一些特定功能的操作方法；
- 本文仅是一篇论述，不属于方针或指引。如果本指南与相关方针或指引发生冲突或存在不一致的情况，请以方针或指引的条文为准。
Visual Studio Code是由微软发行的开源代码编辑器，拥有丰富的扩展功能。搭配使用由Rowe Wilson Frederisk Holme开发的Wikitext扩展和Bhsd开发的WikiParser扩展并接入萌百的API可以方便地实现代码着色、补全与实时预览功能，提高页面的编辑效率。关于萌百娘手把手教我学代码这件事!!!∑(ﾟДﾟノ)ノ程序员都这么卷啦Σ┗(＠ロ＠;)┛
本帮助将提供配置基于Visual Studio Code的萌娘百科编辑环境的建议。
为了表述方便，以下均用VS Code代指Visual Studio Code。
目录
系统要求
- Windows 10及以上 64位/ARM
- macOS 10.15以上
- Linux
安装VS Code
下载
访问VS Code官方网站，官网会自动检测正在使用的操作系统，只需要点击左侧的下载按钮即可。（如果大陆用户下载速度较慢，可以尝试将下载链接中的az764295.vo.msecnd.net替换为vscode.cdn.azure.cn）
如果对系统的检测有误或者需要为其他操作系统安装，可以从下载按钮右侧的下拉列表选择，或者点击右上角的Download查看更多支持的版本（linux可以跳过这一步）。
安装
- Windows：运行安装包后按需选择安装。
- macOS：解压后直接运行。
Linux
可参考官方教程Running Visual Studio Code on Linux（不建议使用，官网下载在Linux下会极慢，对于大陆用户很不友好），或使用以下方案。
Arch系
- 在
/etc/pacman.conf中加入arch4edu源（推荐使用tuna源） - 运行一遍系统更新：
sudo pacman -Syyyu - 安装visual-studio-code-bin包：
sudo pacman -S visual-studio-code-bin
Debian系
- 更新你的源：
sudo apt update - 检查你的deb源中有无code包若有直接安装code：
sudo apt-get install code（一般国内源都有） - 若没有安装依赖：
sudo apt-get install software-properties-common apt-transport-https wget - 然后加入官方源：
wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add - && sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main" - 安装
code包：sudo apt-get install code
Fedora、RHEL系列
添加软件源文件：
sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'
然后更新缓存并安装：
sudo dnf makecache sudo dnf install code
如果您用的是版本较早的系统（如RHEL/CentOS 7），请将命令中的dnf替换为yum。
LFS或Gentoo
自己编译，都自己编译系统了这有什么难的。
汉化
VS Code默认语言为英语，第一次启动时会在右下角自动提示安装汉化包。
如果没有相关提示，可点击左侧扩展（Extensions）图标，或者按下Ctrl+⇧ Shift+X，搜索“Chinese”，选择“Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code”并点击“安装（Install）”。安装完成后会提示重启，重启后即可显示为中文界面。
安装与配置Wikitext扩展
创建工作区
- 创建一个新的文件夹用于保存您的Wikitext文件；
- 启动VS Code，点击“文件”→“打开文件夹”并打开刚创建的文件夹；
- 如果弹出是否信任此文件夹中的文件的作者?，必须要选择“是，我信任此作者”，否则将无法使用扩展功能。
- 点击“文件”→“将工作区另存为”将工作区保存下来；
- 下次启动时用VS Code打开工作区文件，或者点击“文件”→“Open Workspace from File…”即可进入工作区。
安装扩展
- 打开左侧扩展面板，搜索“Wikitext”并安装。或者访问Wikitext扩展的Visual Studio Marketplace，点击“Install”。
- 打开左侧扩展面板，搜索“WikiParser”并安装。或者访问WikiParser扩展的Visual Studio Marketplace，点击“Install”。
- 安装完成后在扩展面板的“已安装”一栏下找到“Wikitext”，点击右下角的小齿轮，先选择“禁用”，然后选择“启用（工作区）”。这一步的目的是将扩展限制在工作区内，以避免编辑其他类型文件时产生潜在的冲突和性能问题；
- 在工作区内新建扩展名为“.wikitext”的文件，并输入一段Wikitext进行测试。如果代码能够正常高亮，则表示扩展可用，安装没有问题。
配置扩展并接入萌百API
如果需要使用到扩展的预览功能，则需要接入萌娘百科的API。
萌娘百科的API地址：https://zh.moegirl.org.cn/api.php
- 以下为Wikitext扩展的配置方法：
- 点击VS Code左下角的齿轮，选择“设置”，打开设置界面；
- 在左侧的目录中找到“扩展”→“Wikitext”或直接在搜索框中输入
@ext:rowewilsonfrederiskholme.wikitext； - 按照下表进行设置：
| 名称 | 值 | 解释 |
|---|---|---|
| Api Path | /api.php | 萌娘百科API地址。 |
| Article Path | / | 萌娘百科页面地址。 |
| Enable JavaScript | 按需开启 | 启用预览时对JS的支持。目前对萌百的兼容性较差。 |
| Get CSS | 开启 | 启用预览时对CSS的支持。用作页面的样式设计。 |
| Preview CSS Style | div{color: black;line-height:2.2em} | 设置预览时的默认样式表。此处设置文字颜色为黑色以防止出现白底白字，也可写上自己的样式。 |
| Host | zh.moegirl.org.cn | 主站地址。 |
| Password | [密码] | 用户密码。如果不需要使用账号功能可不填。 |
| User Name | [用户名] | 用户名。如果不需要使用账号功能可不填。 |
| WikiParser: Enable | 开启 | 启用WikiParser扩展以提供额外的编辑辅助功能。 |
| WikiParser: Sync Article Path | 开启 | 自动同步Wikitext扩展和WikiParser扩展的Article Path设置。 |
或者，也可以通过修改code-workspace文件[1]来实现扩展的配置：
{
"folders": [
{
"path": "[工作区路径]"
}
],
"settings":
{
"wikitext.host": "zh.moegirl.org.cn",
"wikitext.enableJavascript": true,
"wikitext.userName": "[用户名]",
"wikitext.password": "[密码]",
"wikitext.apiPath": "/api.php",
"wikitext.articlePath": "/",
"wikitext.getCss": true,
"wikitext.previewCssStyle": "div{color: black;line-height:2.2em}",
"wikitext.wikiparser.enable": true,
"wikitext.wikiparser.syncArticlePath": true
}
}
另外，上述设置中的默认样式表是最低限度能正常显示的样式。如果希望能够支持萌百的大部分样式（比如黑幕等），则需要包含MediaWiki:Gadget-site-styles.css这个全站样式表。
不过，你不需要下载以上文件，而是可以选择直接从 GitHub 导入，将"wikitext.previewCssStyle"的内容替换为此代码即可。
@import url('https://testingcf.jsdelivr.net/gh/MoegirlPediaInterfaceAdmins/MoegirlPediaInterfaceCodes/src/gadgets/site-styles/Gadget-site-styles.css');
设置完成后，可输入一段wikitext，然后点击右上角的预览按钮，或按Ctrl+⇧ Shift+V预览，如果配置正确，将会在右边看到条目的显示效果（参见头图）。
使用Wikitext扩展
- 在VS Code中按下F1并搜索“Wikitext”即可看到所有支持的指令。目前扩展支持的指令如下：
- Wikitext: View the page
- 查看指定标题的页面。
- Wikitext: Login with your account
- 如果设置好了用户名和密码，此功能可用来登录您的账号。
- Wikitext: Logout, if you are already logged in
- 登出已经登录的账号。
- Wikitext: Pull page to edit
- 提取指定标题的源码以供编辑。目前萌百暂时不支持此功能，如果需要编辑请手动从网页版萌百复制源码。
- Wikitext: Get preview
- 预览当前正在编辑的源码的显示效果。快捷键为Ctrl+⇧ Shift+V，或可以点击右上角的预览按钮。
- Wikitext: Post your edit to the website
- 将编辑器的源码提交到指定标题的页面中。请注意，此功能会覆盖整个页面的源码，在提交前请务必确定编辑器内的源码是完整的，否则可能会对页面造成破坏。可以考虑将源码手动复制提交到网页版上。
- Wikitext: Add a web citation
- 【实验性】将网站域名转换成引用格式。目前该功能不可用。
- Wikitext: Restart WikiParser LSP
- 在设置发生修改后重新启动WikiParser扩展。
其他在VS code中编辑的小技巧
- 使用Ctrl/⌘ Cmd+F查找，使用Ctrl+H替换，支持正则查找。
- 使用Ctrl/⌘ Cmd+/可以注释选中的内容，被注释的内容不会在页面中显示出来。再按一次取消注释。
- 选中所需内容后按下键盘上可配对的符号键（如"、{、[、<等）可以将内容用对应的符号框起来，可用来将普通文本转写为内部链接。
- 选中多行的情况下按Tab ↹键可在行首统一插入一个缩进，按⇧ Shift+Tab ↹将统一删除行首的一个缩进，可用于整理排版。
- 按住鼠标中键后拖动将会进入多行编辑模式，可以用来在行首快速添加列表符以及制作ASCII艺术。
- 可以使用预置代码来减少键入，参见/预置代码
问题排查
下面列举在使用中可能存在的问题。
页面无法预览
- API是否配置正确？程序是否提示需要重启？
- code-workspace文件的优先级高于全局设置（即settings.json），是否code-workspace的错误参数覆盖了全局设置的参数？
- 将代码放在沙盒上测试一下，是否存在让萌百报错的代码？
- 试试编辑其他的页面，也许扩展不支持萌百的某些特性？
- 如果原本能够预览后面突然就不能预览了，可能是API访问过于频繁导致出现验证码，只需要登录网页版萌百通过验证即可继续预览。
Wikitext: Add a web citation 生成引用失败
此功能基于互联网数据库archive.org实现，该网站暂时无法在中国大陆正常访问，目前也暂时没有更换该数据库的方式。
如果确实需要引用，可以以“[url][标题]-[作者]-[网站名称]-[发表日期]-引用于[引用日期]”为格式撰写
WikiParser扩展未启动
勾选WikiParser: Enable设置项后可能需要手动执行Wikitext: Restart WikiParser LSP命令来启动WikiParser扩展。
| |||||||||||||||||||||||||||||||||||