学习 Build Admin 前端项目开发规范

发布时间 2025-08-19 09:56:00

阅读量加载中...

背景

在一次翻阅 ElementUI 的官网的时候，发现了一个免费开源项目 Build Admin ，这个项目是一个基于 Vue3、Thinkphp 的后台管理系统，学习记录一下这个项目的前端项目开发规范。也方便后期直接复制使用其配置。

编辑器相关配置

.vscode 配置

在项目根目录下，新建文件夹 .vscode ，这个文件是 VSCode 的配置文件。

在 .vscode 文件夹下，新建文件 settings.json ，这个文件是 VSCode 的全局配置文件。

     json
    
  
{
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.validate": ["javascript", "vue", "typescript"]
}

在 .vscode 文件夹下，新建文件 extensions.json ，这个文件是 VSCode 的插件配置文件。

当首次打开项目时，VSCode 会提示安装推荐的插件，我们可以根据提示安装。

     json
    
  
{
  "recommendations": [
    "vue.volar",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint"
  ]
}

editorconfig 配置

在根目录下，新建文件 .editorconfig ，这个文件是编辑器的配置文件。

editorconfig

# https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
indent_style = tab
insert_final_newline = false
trim_trailing_whitespace = false

项目配置

修改 package.json ，添加如下配置：

     json
    
  
   "scripts": {
        "lint": "eslint .",
        "lint-fix": "eslint --fix .",
        "format": "npx prettier --write .",
        "typecheck": "vue-tsc --noEmit"
    }

eslint 配置参考

     js
    
  
import js from "@eslint/js";
import eslintConfigPrettier from "eslint-config-prettier";
import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
import eslintPluginVue from "eslint-plugin-vue";
import globals from "globals";
import ts from "typescript-eslint";

export default [
  // 三大基本推荐规则
  js.configs.recommended,
  ...ts.configs.recommended,
  ...eslintPluginVue.configs["flat/recommended"],

  // 忽略规则
  {
    ignores: ["node_modules", "dist", "public"],
  },

  // 全局变量
  {
    languageOptions: {
      globals: {
        ...globals.browser,
      },
    },
  },

  // vue
  {
    files: ["**/*.vue"],
    languageOptions: {
      parserOptions: {
        // ts 解析器
        parser: ts.parser,
        // 允许 jsx
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
  },

  // eslint + prettier 的兼容性问题解决规则
  eslintConfigPrettier,
  eslintPluginPrettierRecommended,

  // ts
  {
    files: ["**/*.{ts,tsx,vue}"],
    rules: {
      "no-empty": "off",
      "no-undef": "off",
      "no-unused-vars": "off",
      "no-useless-escape": "off",
      "no-sparse-arrays": "off",
      "no-prototype-builtins": "off",
      "no-use-before-define": "off",
      "no-case-declarations": "off",
      "no-console": "off",
      "no-control-regex": "off",

      "vue/v-on-event-hyphenation": "off",
      "vue/custom-event-name-casing": "off",
      "vue/component-definition-name-casing": "off",
      "vue/attributes-order": "off",
      "vue/one-component-per-file": "off",
      "vue/html-closing-bracket-newline": "off",
      "vue/max-attributes-per-line": "off",
      "vue/multiline-html-element-content-newline": "off",
      "vue/singleline-html-element-content-newline": "off",
      "vue/attribute-hyphenation": "off",
      "vue/html-self-closing": "off",
      "vue/require-default-prop": "off",
      "vue/no-arrow-functions-in-watch": "off",
      "vue/no-v-html": "off",
      "vue/comment-directive": "off",
      "vue/multi-word-component-names": "off",
      "vue/require-prop-types": "off",
      "vue/html-indent": "off",

      "@typescript-eslint/no-unsafe-function-type": "off",
      "@typescript-eslint/no-empty-function": "off",
      "@typescript-eslint/no-explicit-any": "off",
      "@typescript-eslint/no-non-null-assertion": "off",
      "@typescript-eslint/no-unused-expressions": "off",
      "@typescript-eslint/no-unused-vars": [
        "warn",
        {
          argsIgnorePattern: "^_",
          varsIgnorePattern: "^_",
        },
      ],
    },
  },

  // prettier 规则
  {
    files: ["**/*.{ts,tsx,vue,js}"],
    rules: {
      "prettier/prettier": [
        "warn", // 使用警告而不是错误
        {
          endOfLine: "auto", // eslint 无需检查文件换行符
        },
      ],
    },
  },
];

prettier 配置参考

     js
    
  
export default {
  printWidth: 150,
  // 指定每个缩进级别的空格数
  tabWidth: 4,
  // 使用制表符而不是空格缩进行
  useTabs: false,
  // 在语句末尾打印分号
  semi: false,
  // 使用单引号而不是双引号
  singleQuote: true,
  // 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
  quoteProps: "as-needed",
  // 在JSX中使用单引号而不是双引号
  jsxSingleQuote: false,
  // 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
  trailingComma: "es5",
  // 在对象文字中的括号之间打印空格
  bracketSpacing: true,
  // 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
  arrowParens: "always",
  // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
  rangeStart: 0,
  rangeEnd: Infinity,
  // 指定要使用的解析器，不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准 always\never\preserve
  proseWrap: "preserve",
  // 指定HTML文件的全局空格敏感度 css\strict\ignore
  htmlWhitespaceSensitivity: "css",
  // Vue文件脚本和样式标签缩进
  vueIndentScriptAndStyle: false,
  // 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
  endOfLine: "lf",
};

#Vue3 #开发规范