萌娘百科:代码规范临时论述

提示：本页面“萌娘百科:代码规范临时论述”是萌娘百科论述而不是方针或指引

• 本页面是帮助您理解的论述性文件，不是萌娘百科的方针或指引；
• 当实际情况随着方针的确立或修改而发生改变，请您协助编辑本页面。

由于运营方代码平台仍在建设中，考虑到即将迎来一批界面管理员和脚本编辑员，为规范代码样式，提升合作效率，临时编写本论述。

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 格式化文档操作格式化后即可提交。