使用 Nuxt3 正确设置 ESlint 和 Prettier

Question

我是 Vue3 和 Nuxt3 的新手，我正在从头开始一个新项目，尝试使用 Typescript 正确设置它。

这就是我的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: [
        "@nuxtjs/color-mode",
        "@nuxtjs/eslint-module",
        "@nuxtjs/stylelint-module",
        "@vueuse/nuxt"
    ]

关于如何改进这一点有什么建议吗？我确信这不能正常工作的原因是因为我试图添加vueIndentScriptAndStyle到 ESlint 和 Prettier。

ESlint 会正确检测到脚本和样式需要缩进，但是 prettier 在格式化时不会考虑这一点。

任何有关如何更好地设置此功能的建议都非常受欢迎。

Answer 1

@nuxtjs/eslint-config并且@nuxtjs/eslint-config-typescript在撰写本文时已经近一年没有更新了。我建议切换到@antfu/eslint-config. 它由 Vue、Nuxt 和 Vite 的核心团队成员 Anthony Fu 创建。它非常理智并且经常更新。使用它，您还可以删除eslint-plugin-vue，因为它包含在该配置中。

eslint-plugin-prettier当你有的时候你就不需要了eslint-config-prettier。
至于vueIndentScriptAndStyle，那是 Prettier 的设置，与 ESLint 无关。只要您的 ESLint 配置中有prettier最后一项extends，任何与 Prettier 冲突的 ESLint 规则都应该被关闭。