其他在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扩展。
查 · 论 · 编萌娘百科帮助文档加粗的为政策性文件。入门登录 • 确认电子邮件地址 • 搜索（搜索代码） • Wiki入门 • 签名使用指南 • 用户页面（自我展示） • 讨论页面 • 投票 • 用户框 • WAF创建条目创建新条目 • 条目创建请求 • 创建条目的四种方法 • 萌娘化创作方法指导 • 萌百编辑简明指南 • 方针 • 收录范围 • 条目命名 • 条目编写初级编辑编辑规范 • 编辑提示 • 可视化编辑器 • 编辑用代码 • 编辑冲突 • 标题限制 • 注脚 • 著作权信息中级编辑表格 • 重定向页面 • 消歧义页 • 分类索引顺序 • 命名空间 • 魔术字（状态开关 • 系统变量 • 解析器函数） • 语言标签 • 繁简转换（公共转换组 • 字词转换模式的说明） • 日语（条目标题日本汉字） • 子页面 • 内容模型 • 跨wiki高级编辑模板入门 • 模板 • 常用模板 • 模板规范 • 模板样式表 • 替换引用 • Navbox问与答 • 创建作品模板 • 字词转换语法（高级语法） • HTML标签 • 代码高亮工具 • Poem • InputBox • 折叠 • 正则表达式 • Lua • 使用VSCode • 使用Node.js • 使用Sublime Text • 使用Python媒体媒体帮助 • 图像（页面图像） • 上传图片 • 授权协议选择指引 • 覆盖上传文件 • 外部图像（图床） • 动图 • 上传游戏封面 • 寻找原图 • 插入视频 • 插入音乐 • 插入ogg音乐文件 • MP3播放器 • Imagemap条目格式动画 • 游戏 • 画集 • 音乐（VOCALOID）管理移动页面 • 撤销与回退 • 来源请求 • 滥用过滤器（使用指导） • 标签 • 用户讨论存档 • 缓存 • Widget代码的安全性审查步骤 • 用户交流用语样板小工具编辑草稿本地保存工具 • HotCat小工具 • UserMessages小工具 • DynamicPageList • CategoryTree • 屏蔽插件白名单 • 维基友爱扩展 • Echo扩展 • 日本论坛用语对照表 • 声优昵称对照表 • 特殊符号表 • 颜文字表 • 颜色列表 • 维基星章另请参见：萌娘百科政策文件 • 专题编辑指导 • 论述与其他文档 • 工具箱
注释及外部链接
↑ VS Code官方对code-workspace文件的说明（英文）
（英文）Visual Studio Code Docs
Frederisk/Wikitext-VSCode-Extension - GitHub
bhsd-harry/vscode-extension-wikiparser - GitHub
异地手机卡丢失损坏不用慌，详细补办步骤帮你轻松解决|1986年世界杯法国队精彩表现回顾与历史影响分析