Nuxt3+TypeScript项目ESLint与Prettier配置优化及问题解决

我是Vue3和Nuxt3的新手，正在从零搭建一个基于TypeScript的新项目，尝试完成规范配置。添加vue/indent-script-and-style（即你提到的vueIndentScriptAndStyle）规则后，ESLint可正确检测脚本与样式缩进需求，但Prettier格式化时未遵循该规则，寻求配置优化建议。

当前配置文件 #

package.json #

{
    "name": "nuxt-prototype",
    "private": true,
    "scripts": {
        "build": "nuxt build",
        "dev": "nuxt dev",
    },
    "devDependencies": {
        "@privatePackage/commitlint-config": "^1.0.1",
        "@privatePackage/prettier-config": "^2.0.0",
        "@cspell/dict-de-de": "^3.1.0",
        "@nuxt/devtools": "latest",
        "@nuxtjs/color-mode": "^3.3.0",
        "@nuxtjs/eslint-config-typescript": "^12.0.0",
        "@nuxtjs/eslint-module": "^4.1.0",
        "@nuxtjs/stylelint-module": "^5.1.0",
        "@types/node": "^20.4.8",
        "@typescript-eslint/eslint-plugin": "^6.2.1",
        "@typescript-eslint/parser": "^6.2.1",
        "@vueuse/core": "^10.3.0",
        "@vueuse/nuxt": "^10.3.0",
        "autoprefixer": "^10.4.14",
        "cspell": "^6.31.2",
        "eslint": "^8.46.0",
        "eslint-config-prettier": "9.0.0",
        "eslint-plugin-prettier": "^5.0.0",
        "eslint-plugin-simple-import-sort": "^10.0.0",
        "eslint-plugin-vue": "^9.16.1",
        "lint-staged": "^13.2.3",
        "nuxt": "^3.6.5",
        "postcss": "^8.4.27",
        "postcss-html": "^1.5.0",
        "prettier": "3.0.1",
        "prettier-plugin-tailwindcss": "^0.4.1",
        "stylelint": "^15.10.2",
        "stylelint-config-standard-scss": "^10.0.0",
        "stylelint-config-standard-vue": "^1.0.0",
        "tailwindcss": "^3.3.3"
    },
    "dependencies": {
        "sass": "^1.64.2",
        "simple-git-hooks": "^2.9.0",
        "typescript": "^5.1.6"
    },
    "lint-staged": {
        "*.{html,js,json,jsx,md,scss,ts,tsx,vue}": "cspell --no-must-find-files",
        "*.{html,js,json,jsx,scss,ts,tsx,vue}": "prettier --check",
        "*.{js,jsx,ts,tsx,vue}": "eslint",
        "*.{scss,vue}": "stylelint"
    },
    "simple-git-hooks": {
        "commit-msg": "npx commitlint --edit \"$1\"",
        "pre-commit": "npx lint-staged"
    },
    "prettier": "@privatePackage/prettier-config"
}

.eslintrc.js #

module.exports = {
    extends: [
        "@nuxtjs/eslint-config-typescript",
        "plugin:vue/vue3-recommended",
        "prettier",
        "plugin:prettier/recommended"
    ],
    parser: "vue-eslint-parser",
    parserOptions: {
        parser: "@typescript-eslint/parser"
    },
    plugins: ["simple-import-sort"],
    root: true,
    env: {
        browser: true,
        node: true
    },
    // Lint .*.js files in the project root directory.
    ignorePatterns: ["!/.*.js", "types/generated.d.ts"],
    // TODO: check the clashes with "index" routing in nuxt.
    rules: {
        "vue/multi-word-component-names": 0
    }
};

prettier.config.js #

module.exports = {
    plugins: ["prettier-plugin-tailwindcss"]
};

nuxt.config.ts（modules部分） #

modules: [
    "@nuxtjs/color-mode",
    "@nuxtjs/eslint-module",
    "@nuxtjs/stylelint-module",
    "@vueuse/nuxt"
]

配置优化方案 #

1. 开启Prettier的Vue缩进支持 #

Prettier 2.3.0+版本新增了vueIndentScriptAndStyle配置项，专门用于控制Vue文件中script和style标签内容的缩进。在项目的prettier.config.js中添加该配置：

module.exports = {
  plugins: ["prettier-plugin-tailwindcss"],
  vueIndentScriptAndStyle: true
};

你的项目使用Prettier 3.0.1，完全满足版本要求。

2. 对齐ESLint规则与Prettier行为 #

在.eslintrc.js中明确开启vue/indent-script-and-style规则，并确保缩进参数与Prettier保持一致（示例中使用2空格缩进）：

rules: {
  "vue/multi-word-component-names": 0,
  // 开启脚本与样式的缩进检测
  "vue/indent-script-and-style": ["error", { 
    indentScript: true, 
    indentStyle: true 
  }],
  // 确保脚本内部的缩进规则与Prettier匹配
  "vue/script-indent": ["error", 2, { baseIndent: 1 }],
  // 确保样式内部的缩进规则与Prettier匹配
  "vue/style-indent": ["error", 2]
}

3. 排查私有配置的覆盖问题 #

由于项目继承了@privatePackage/prettier-config，需确认该私有配置是否未设置vueIndentScriptAndStyle。如果私有配置中显式关闭了该选项，项目级的prettier.config.js会覆盖继承的配置，无需额外调整。

4. 验证配置有效性 #

运行以下命令测试格式化效果：

• 执行Prettier格式化：npx prettier --write src/**/*.vue
• 执行ESLint检查：npx eslint src/**/*.vue
  若两者均无报错，说明ESLint与Prettier的缩进规则已对齐。

内容的提问来源于stack exchange，提问作者Erythros