使用說明:使用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系

1. 在/etc/pacman.conf中加入arch4edu源（推薦使用tuna源）
2. 運行一遍系統更新：sudo pacman -Syyyu
3. 安裝visual-studio-code-bin包：sudo pacman -S visual-studio-code-bin

Debian系

1. 更新你的源：sudo apt update
2. 檢查你的deb源中有無code包若有直接安裝code：sudo apt-get install code（一般國內源都有）
3. 若沒有安裝依賴：sudo apt-get install software-properties-common apt-transport-https wget
4. 然後加入官方源：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"
5. 安裝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擴展

創建工作區

1. 創建一個新的文件夾用於保存您的Wikitext文件；
2. 啟動VS Code，點擊「文件」→「打開文件夾」並打開剛創建的文件夾；
3. 如果彈出是否信任此文件夾中的文件的作者?，必須要選擇「是，我信任此作者」，否則將無法使用擴展功能。
4. 點擊「文件」→「將工作區另存為」將工作區保存下來；
5. 下次啟動時用VS Code打開工作區文件，或者點擊「文件」→「Open Workspace from File…」即可進入工作區。

安裝擴展

1. 打開左側擴展面板，搜索「Wikitext」並安裝。或者訪問Wikitext擴展的Visual Studio Marketplace，點擊「Install」。
2. 打開左側擴展面板，搜索「WikiParser」並安裝。或者訪問WikiParser擴展的Visual Studio Marketplace，點擊「Install」。
3. 安裝完成後在擴展面板的「已安裝」一欄下找到「Wikitext」，點擊右下角的小齒輪，先選擇「禁用」，然後選擇「啟用（工作區）」。這一步的目的是將擴展限制在工作區內，以避免編輯其他類型文件時產生潛在的衝突和性能問題；
4. 在工作區內新建擴展名為「.wikitext」的文件，並輸入一段Wikitext進行測試。如果代碼能夠正常高亮，則表示擴展可用，安裝沒有問題。

配置擴展並接入萌百API

如果需要使用到擴展的預覽功能，則需要接入萌娘百科的API。

萌娘百科的API地址：http://zh.moegirl.tw/api.php

以下為Wikitext擴展的配置方法：

1. 點擊VS Code左下角的齒輪，選擇「設置」，打開設置界面；
2. 在左側的目錄中找到「擴展」→「Wikitext」或直接在搜索框中輸入@ext:rowewilsonfrederiskholme.wikitext；
3. 按照下表進行設置：

名稱	值	解釋
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.tw	主站地址。
Password	[密碼]	用戶密碼。如果不需要使用帳號功能可不填。
User Name	[用戶名]	用戶名。如果不需要使用帳號功能可不填。
WikiParser: Enable	開啟	啟用WikiParser擴展以提供額外的編輯輔助功能。
WikiParser: Sync Article Path	開啟	自動同步Wikitext擴展和WikiParser擴展的Article Path設置。

或者，也可以通過修改code-workspace文件^[1]來實現擴展的配置：

{
    "folders": [
        {
            "path": "[工作區路徑]"
        }
    ],
    "settings": 
    {
        "wikitext.host": "zh.moegirl.tw",
        "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中編輯的小技巧

1. 使用Ctrl/⌘ Cmd+F查找，使用Ctrl+H替換，支持正則查找。
2. 使用Ctrl/⌘ Cmd+/可以注釋選中的內容，被注釋的內容不會在頁面中顯示出來。再按一次取消注釋。
3. 選中所需內容後按下鍵盤上可配對的符號鍵（如"、{、[、<等）可以將內容用對應的符號框起來，可用來將普通文本轉寫為內部連結。
4. 選中多行的情況下按Tab ↹鍵可在行首統一插入一個縮進，按⇧ Shift+Tab ↹將統一刪除行首的一個縮進，可用於整理排版。
5. 按住滑鼠中鍵後拖動將會進入多行編輯模式，可以用來在行首快速添加列表符以及製作ASCII藝術。
6. 可以使用預置代碼來減少鍵入，參見/預置代碼

問題排查

下面列舉在使用中可能存在的問題。

頁面無法預覽

1. API是否配置正確？程序是否提示需要重啟？
2. code-workspace文件的優先級高於全局設置（即settings.json），是否code-workspace的錯誤參數覆蓋了全局設置的參數？
3. 將代碼放在沙盒上測試一下，是否存在讓萌百報錯的代碼？
4. 試試編輯其他的頁面，也許擴展不支持萌百的某些特性？
5. 如果原本能夠預覽後面突然就不能預覽了，可能是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擴展 • 日本論壇用語對照表 • 聲優暱稱對照表 • 特殊符號表 • 顏文字表 • 顏色列表 • 維基星章 另請參見：萌娘百科政策文件 • 專題編輯指導 • 論述與其他文檔 • 工具箱

注釋及外部連結

• （英文）Visual Studio Code Docs
• Frederisk/Wikitext-VSCode-Extension - GitHub
• bhsd-harry/vscode-extension-wikiparser - GitHub