Help:使用VS Code协助编辑条目

这个页面“Help:使用VS Code协助编辑条目”是萌娘百科的帮助文档

本文用于介绍萌娘百科中一些特定功能的操作方法；
本文仅是一篇论述，不属于方针或指引。如果本指南与相关方针或指引发生冲突或存在不一致的情况，请以方针或指引的条文为准。

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扩展。

注释及外部链接

↑ VS Code官方对code-workspace文件的说明（英文）

[1] VS Code官方对code-workspace文件的说明（英文）

[1]