萌娘百科:代碼規範臨時論述

提示：本頁面「萌娘百科:代碼規範臨時論述」是萌娘百科論述而不是方針或指引

• 本頁面是幫助您理解的論述性文件，不是萌娘百科的方針或指引；
• 當實際情況隨著方針的確立或修改而發生改變，請您協助編輯本頁面。

由於運營方代碼平台仍在建設中，考慮到即將迎來一批介面管理員和指令碼編輯員，為規範代碼樣式，提升合作效率，臨時編寫本論述。

IDE

建議使用 VSCode 編輯，並推薦在提交前使用 VSCode 格式化文檔操作格式化一次。

JavaScript 代碼

lint

為了便於與他人協作，降低出現 bug 的概率，在編輯 JavaScript 代碼時強烈建議在提交前使用以下 ESLint 規則檢查代碼：

Eslint 規則

JSON { "env": { "browser": true, "jquery": true, "es6": true, "es2020": true }, "parserOptions": { "ecmaVersion": 2020 }, "globals": { "mw": "readonly", "mediaWiki": "readonly", "OO": "readonly", "moment": "readonly", "LocalObjectStorage": "readonly", "Cron": "readonly", "wgULS": "readonly", "insertToBottomRightCorner": "readonly", "oouiDialog": "readonly" }, "extends": "eslint:recommended", "rules": { "no-var": "error", "prefer-const": "error", "no-extra-parens": "error", "no-misleading-character-class": "error", "no-template-curly-in-string": "error", "require-atomic-updates": "error", "curly": "error", "indent": [ "error", 4, { "SwitchCase": 1 } ], "linebreak-style": "off", "semi": [ "error", "always" ], "no-console": "off", "no-unused-vars": [ "warn", { "varsIgnorePattern": "^_" } ], "no-redeclare": [ "warn" ], "no-unreachable": "warn", "no-inner-declarations": "off", "comma-dangle": [ "warn", "always-multiline" ], "eqeqeq": "error", "dot-notation": "error", "no-else-return": "error", "no-extra-bind": "error", "no-labels": "error", "no-floating-decimal": "error", "no-lone-blocks": "error", "no-loop-func": "error", "no-magic-numbers": "off", "no-multi-spaces": "error", "no-param-reassign": "error", "strict": [ "error", "global" ], "quotes": [ "warn", "double", { "avoidEscape": true } ], "quote-props": [ "warn", "as-needed", { "keywords": true, "unnecessary": true, "numbers": false } ], "no-empty": [ "error", { "allowEmptyCatch": true } ], "arrow-spacing": [ "error", { "before": true, "after": true } ], "prefer-arrow-callback": "error", "prefer-spread": "error", "prefer-template": "error", "prefer-rest-params": "error", "prefer-exponentiation-operator": "error", "require-await": "error" } } YAML # https://zh.moegirl.org.cn/_?curid=490758 env: browser: true jquery: true es6: true es2020: true parserOptions: ecmaVersion: 2020 globals: mw: readonly mediaWiki: readonly OO: readonly moment: readonly LocalObjectStorage: readonly Cron: readonly $: readonly jQuery: readonly "wgULS": "readonly", "insertToBottomRightCorner": "readonly", "oouiDialog": "readonly" extends: "eslint:recommended" rules: no-var: error prefer-const: error no-extra-parens: error no-misleading-character-class: error no-template-curly-in-string: error require-atomic-updates: error curly: error indent: - error - 4 - SwitchCase: 1 linebreak-style: "off" semi: - error - always no-console: "off" no-unused-vars: - warn - varsIgnorePattern： "^_" no-redeclare: warn no-unreachable: warn no-inner-declarations: "off" comma-dangle: - warn - always-multiline eqeqeq: error dot-notation: error no-else-return: error no-extra-bind: error no-labels: error no-floating-decimal: error no-lone-blocks: error no-loop-func: error no-magic-numbers: "off" no-multi-spaces: error no-param-reassign: error strict: - error - global quotes: - warn - double - avoidEscape: true quote-props: - warn - as-needed - keywords: true unnecessary: true numbers: false no-empty: - error - allowEmptyCatch: true arrow-spacing: - error - before: true after: true prefer-arrow-callback: error prefer-spread: error prefer-template: error prefer-rest-params: error prefer-exponentiation-operator: error require-await: error

VSCode 配置

您可以使用 .vscode/settings.json 文件修改當前工作區的配置，而不必修改全局配置

{
    "editor.tabSize": 4,
    "editor.insertSpaces": true,
}

代碼提示與自動補全

您可以通過安裝並配置types-mediawiki這個包來獲取有關 mw 全局對象以及 jQuery 的代碼提示和自動補全支持。

最佳實踐

由於 MediaWiki 的系統限制，只能識別 ES5 標準的代碼。如果您不想線下編譯，可以通過 Typescript Playground REPL 進行在線編譯。

CSS 代碼

只需通過 VSCode 格式化文檔操作格式化後即可提交。