置顶公告:【置顶】关于临时开启评论区所有功能的公告(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 格式化文檔操作格式化後即可提交。