ESLint/Prettier config for Vue 3 in VS Code

.eslintrc.js

module.exports = {
    root: true,
    env: {
        browser: true,
        node: true,
    },
    extends: [
        'eslint:recommended',
        'plugin:vue/vue3-recommended',
        'prettier'
    ],
    plugins: ['prettier'],
    rules: {
        'prettier/prettier': ['error'],
        'vue/require-default-prop': 0,
        'vue/html-indent': ['error', 4],
        'vue/singleline-html-element-content-newline': 0,
        'vue/component-name-in-template-casing': ['error', 'PascalCase'],
    },
    globals: {
        _: true,
    },
}

.prettierrc

{
    "semi": false,
    "singleQuote": true,
    "tabWidth": 4,
    "printWidth": 120
}

install.sh

$ npm install --save-dev prettier @prettier/plugin-php
$ npm install --save-dev eslint eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier

package.json

{
    // ...
    "devDependencies": {
        "@prettier/plugin-php": "^0.19.1",
        "eslint": "^8.6.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-plugin-prettier": "^4.0.0",
        "eslint-plugin-vue": "^8.2.0",
        "eslint-loader": "^4.0.2",
        "eslint-plugin-nuxt": "^2.0.0",
        "prettier": "^2.7.1"
    }
}

settings.json

{
    "vetur.validation.template": false,
    "vetur.format.defaultFormatter.html": "none",
    // Set the default
    "editor.formatOnSave": false,
    // Enable per-language
    "[javascript]": {
        "editor.formatOnSave": true
    },
    "[vue]": {
        "editor.formatOnSave": true
    },
    "[php]": {
        "editor.formatOnSave": true
    }
}