置顶公告:【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关,请注意分别。

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

来自萌娘百科
跳到导航 跳到搜索
Commons-emblem-question book yellow.svg
提示:本页面“萌娘百科:代码规范临时论述”是萌娘百科论述而不是方针或指引
  • 本页面是帮助您理解的论述性文件,不是萌娘百科的方针或指引
  • 当实际情况随着方针的确立或修改而发生改变,请您协助编辑本页面

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

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