代码规范

• Eslint + Prettier

安装

pnpm i -D eslint @antfu/eslint-config
pnpm i prettier eslint-config-prettier eslint-plugin-prettier -D
pnpm i vite-plugin-eslint2 -D

配置

在根目录下创建eslint.config.mjs 文件

import antfu from "@antfu/eslint-config";

const apps = "src";
const histoirePath = `${apps}`;

export default await antfu(
  {
    typescript: true,
    vue: true,
    ignores: [
      "**/*.json",
      ".prettierrc.cjs",
      "eslint.config.mjs",
      "**/*.md",
      "pnpm-workspace.yaml",
    ],
  },

  // Histoire Overrides
  {
    files: [`${histoirePath}/**/*.{js,ts,vue}`],
    rules: {
      "import/default": "off",
      // 允许console.log
      "no-console": ["error", { allow: ["warn", "error", "log"] }],
      // 单标签闭合关闭 类似 <img />
      "vue/html-self-closing": "off",
      // 多行属性换行 关闭 允许属性不换行
      // 比如<button @click=xxx></button> 这样不用把@click换乘第二行
      "vue/singleline-html-element-content-newline": "off",
      "vue/multiline-html-element-content-newline": "off",
    },
  }
);

在根目录下创建.prettierrc.cjs文件

module.exports = {
  /* 打印宽度，超过后，会将属性换行 */

  printWidth: 120,

  /* 禁止使用尾随逗号,对象和数组最后一个逗号去掉 */

  trailingComma: "all",

  /* 在对象字面量中的括号之间添加空格 */

  bracketSpacing: true,

  /* 使用单引号而不是双引号来定义字符串 */

  singleQuote: true,

  /* 当箭头函数只有一个参数时，保留参数前后的括号 */

  arrowParens: "always",

  /* script和style标签中间的内容缩进 */

  vueIndentScriptAndStyle: false,

  // 将>多行 HTML（HTML、JSX、Vue、Angular）元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭合元素

  bracketSameLine: false,

  /* 禁止使用尾随分号 */
  semi: false,
};

在根目录下面新建.editorconfig文件

// .editorconfig  文件

# http://editorconfig.org

root = true

[*] # 表示所有文件

charset = utf-8 # 设置文件字符集为 utf-8

[*.md] # 表示对 md 文件应用以下规则

insert_final_newline = false # 不在文件结尾插入新行

trim_trailing_whitespace = false # 不去除行尾空白

vite.config.ts

import { fileURLToPath, URL } from "node:url";
import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";
import vueDevTools from "vite-plugin-vue-devtools";
// 新增加 eslint
import eslint from "vite-plugin-eslint2";
// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), vueDevTools(), eslint()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

这样运行npm run dev即可,这样 eslint 就会自动检查代码规范了