vue3+eslint9+vite配置

依赖

"devDependencies": {
        "@eslint/js": "^9.5.0",
        "@types/node": "^20.14.9",
        "eslint": "^9.5.0",
        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-prettier": "^5.1.3",
        "eslint-plugin-vue": "^9.26.0",
        "prettier": "^3.3.2",
        "typescript": "^5.5.2",
        "typescript-eslint": "^7.14.1",
        "vite-plugin-eslint": "^1.8.1",
    }

.prettierrc.cjs配置

module.exports = {
    printWidth: 300, // 指定代码长度，超出换行
    tabWidth: 4, // tab 键的宽度
    useTabs: false, // 不使用tab
    semi: true, // 结尾加上分号
    singleQuote: false, // 使用单引号
    quoteProps: "as-needed", // 要求对象字面量属性是否使用引号包裹,(‘as-needed’: 没有特殊要求，禁止使用，'consistent': 保持一致 , preserve: 不限制，想用就用)
    jsxSingleQuote: false, // jsx 语法中使用单引号
    trailingComma: "none", // 确保对象的最后一个属性后有逗号
    bracketSpacing: true, // 大括号有空格 { name: 'rose' }
    jsxBracketSameLine: false, // 在多行JSX元素的最后一行追加 >
    arrowParens: "always", // 箭头函数，单个参数添加括号
    requirePragma: false, // 是否严格按照文件顶部的特殊注释格式化代码
    insertPragma: false, // 是否在格式化的文件顶部插入Pragma标记，以表明该文件被prettier格式化过了
    proseWrap: "preserve", // 按照文件原样折行
    htmlWhitespaceSensitivity: "ignore", // html文件的空格敏感度，控制空格是否影响布局
    endOfLine: "auto" // 结尾是 \n \r \n\r auto
};

.prettierignore忽略文件配置

/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*

eslint.config.js配置

// 引入vue模版的eslint
import pluginVue from "eslint-plugin-vue";
import pluginJs from "@eslint/js";
// ts-eslint解析器，使 eslint 可以解析 ts 语法
import tseslint from "typescript-eslint";
// vue文件解析器
import vueParser from "vue-eslint-parser";
//关闭所有不必要的或可能与Prettier冲突的规则。
//https://github.com/prettier/eslint-plugin-prettier?tab=readme-ov-file#configuration-new-eslintconfigjs
import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";

export default tseslint.config({
    // tseslint.config添加了extends扁平函数，直接用。否则是eslint9.0版本是没有extends的
    extends: [
        pluginJs.configs.recommended,
        ...tseslint.configs.recommended,
        ...pluginVue.configs["flat/essential"], // vue3推荐的eslint配置
        eslintPluginPrettierRecommended
    ],
    languageOptions: {
        parser: vueParser, // 使用vue解析器，这个可以识别vue文件
        parserOptions: {
            parser: tseslint.parser, // 在vue文件上使用ts解析器
            sourceType: "module"
        }
    },
    rules: {
        semi: ["always", "never"],
        "comma-dangle": ["error", "never"],
        "@typescript-eslint/no-unused-vars": "off",
        "space-before-function-paren": 0,
        "generator-star-spacing": "off",
        "object-curly-spacing": 0, // 强制在大括号中使用一致的空格
        "array-bracket-spacing": 0 // 方括号
    }
});