eslint.config.js > vue3

eslint.config.js

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs['flat/recommended'],
  {
    "rules": {
      "no-unused-vars": [
        "error",
        {
          "ignoreRestSiblings": true
        }
      ],
      "vue/max-attributes-per-line": [
        "error",
        {
          "singleline": {
            "max": 1
          },
          "multiline": {
            "max": 1
          }
        }
      ],
      "vue/attributes-order": [
        "error",
        {
          "order": [
            "DEFINITION",
            "LIST_RENDERING",
            "CONDITIONALS",
            "RENDER_MODIFIERS",
            "GLOBAL",
            [
              "UNIQUE",
              "SLOT"
            ],
            "TWO_WAY_BINDING",
            "OTHER_DIRECTIVES",
            "OTHER_ATTR",
            "EVENTS",
            "CONTENT"
          ],
          "alphabetical": true
        }
      ],
      "vue/no-v-html": "off",
      "vue/require-prop-types": "off",
      "vue/require-default-prop": "off",
      "vue/multi-word-component-names": "off",
      "vue/prefer-import-from-vue": "off",
      "vue/no-v-text-v-html-on-component": "off",
      "vue/no-setup-props-destructure": "off",
      "vue/component-tags-order": [
        "error",
        {
          "order": [
            "script",
            "template",
            "style"
          ]
        }
      ],
      "vue/block-tag-newline": [
        "error",
        {
          "singleline": "always",
          "multiline": "always"
        }
      ],
      "vue/component-name-in-template-casing": [
        "error",
        "PascalCase"
      ],
      "vue/component-options-name-casing": [
        "error",
        "PascalCase"
      ],
      "vue/define-macros-order": [
        "error",
        {
          "order": [
            "defineProps",
            "defineEmits"
          ]
        }
      ],
      "vue/html-comment-content-spacing": [
        "error",
        "always",
        {
          "exceptions": [
            "-"
          ]
        }
      ],
      "vue/no-restricted-v-bind": [
        "error",
        "/^v-/"
      ],
      "vue/no-useless-v-bind": "error",
      "vue/no-unused-refs": "error",
      "vue/padding-line-between-blocks": [
        "error",
        "always"
      ],
      "vue/prefer-separate-static-class": "error",
      "vue/array-bracket-spacing": [
        "error",
        "never"
      ],
      "vue/arrow-spacing": [
        "error",
        {
          "before": true,
          "after": true
        }
      ],
      "vue/block-spacing": [
        "error",
        "always"
      ],
      "vue/brace-style": [
        "error",
        "stroustrup",
        {
          "allowSingleLine": true
        }
      ],
      "vue/comma-dangle": [
        "error",
        "always-multiline"
      ],
      "vue/comma-spacing": [
        "error",
        {
          "before": false,
          "after": true
        }
      ],
      "vue/comma-style": [
        "error",
        "last"
      ],
      "vue/dot-location": [
        "error",
        "property"
      ],
      "vue/dot-notation": [
        "error",
        {
          "allowKeywords": true
        }
      ],
      "vue/eqeqeq": [
        "error",
        "smart"
      ],
      "vue/key-spacing": [
        "error",
        {
          "beforeColon": false,
          "afterColon": true
        }
      ],
      "vue/keyword-spacing": [
        "error",
        {
          "before": true,
          "after": true
        }
      ],
      "vue/no-constant-condition": "warn",
      "vue/no-empty-pattern": "error",
      "vue/no-extra-parens": [
        "error",
        "functions"
      ],
      "vue/no-irregular-whitespace": "error",
      "vue/no-loss-of-precision": "error",
      "vue/no-restricted-syntax": [
        "error",
        "DebuggerStatement",
        "LabeledStatement",
        "WithStatement"
      ],
      "vue/no-sparse-arrays": "error",
      "vue/object-curly-newline": [
        "error",
        {
          "multiline": true,
          "consistent": true
        }
      ],
      "vue/object-curly-spacing": [
        "error",
        "always"
      ],
      "vue/object-property-newline": [
        "error",
        {
          "allowMultiplePropertiesPerLine": true
        }
      ],
      "vue/object-shorthand": [
        "error",
        "always",
        {
          "ignoreConstructors": false,
          "avoidQuotes": true
        }
      ],
      "vue/operator-linebreak": [
        "error",
        "before"
      ],
      "vue/prefer-template": "error",
      "vue/quote-props": [
        "error",
        "consistent-as-needed"
      ],
      "vue/space-in-parens": [
        "error",
        "never"
      ],
      "vue/space-infix-ops": "error",
      "vue/space-unary-ops": [
        "error",
        {
          "words": true,
          "nonwords": false
        }
      ],
      "vue/template-curly-spacing": "error"
    }
  }
);

package.json

{
  "name": "my-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@eslint/js": "^9.0.0",
    "@vitejs/plugin-vue": "^5.0.4",
    "eslint": "^9.0.0",
    "eslint-plugin-vue": "^9.24.1",
    "typescript": "^5.4.4",
    "typescript-eslint": "^7.6.0",
    "vite": "^5.2.0",
    "vue-tsc": "^2.0.6"
  }
}