Properly set up ESlint and Prettier with Nuxt3

Question

I'm new to Vue3 and Nuxt3 and I'm starting a new project from scratch, trying to set it up properly with Typescript.

This is how my package.json looks like

{
    "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"
}

Then 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
    }
};

Finally, my prettier.config.js

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

I have also added the following to nuxt.config.ts

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

Any suggestions on how to improve this? The reason I am sure this is not working correctly is because I was trying to add vueIndentScriptAndStyle to ESlint and Prettier.

ESlint would correctly detect that scripts and styles need to be indented, however prettier would not take this into consideration when formatting.

Any advice on how to better set this up is more than welcomed.

Answer 1

@nuxtjs/eslint-config and @nuxtjs/eslint-config-typescript haven't been updated in almost a year at the time of writing. I would recommend switching to @antfu/eslint-config. It's created by Anthony Fu, a core team member of Vue, Nuxt and Vite. It's very sane and is updated frequently. Using that, you can also remove eslint-plugin-vue, as it's included in that config.

You don't need eslint-plugin-prettier when you have eslint-config-prettier.
As for vueIndentScriptAndStyle, that's a setting for Prettier and has nothing to do with ESLint. As long as you have prettier as the last item in extends, in your ESLint config, any ESLint rules that conflict with Prettier should be turned off.