eslint.config.js

import stylistic from '@stylistic/eslint-plugin'
import esParser from '@typescript-eslint/parser'
import vue from 'eslint-plugin-vue'
import vParser from 'vue-eslint-parser'

const tsRules = {
  '@stylistic/space-before-blocks': [ 'error', 'always' ],
  '@stylistic/switch-colon-spacing': [ 'error', { 'after': true, 'before': false }],
  '@stylistic/keyword-spacing': [ 'error', { before: true, after: true }],
  '@stylistic/space-in-parens': [ 'error', 'never' ],
  '@stylistic/type-generic-spacing': [ 'error' ],
  '@stylistic/type-annotation-spacing': [ 'error' ],
  '@stylistic/curly-newline': [ 'error', { 'minElements': 2, 'consistent': true }],
  '@stylistic/indent': [ 'error', 2 ],
  '@stylistic/quotes': [ 'error', 'single' ],
  '@stylistic/semi': [ 'error', 'never' ],
  '@stylistic/eol-last': [ 'error', 'always' ],
  '@stylistic/arrow-spacing': [ 'error', { 'before': true, 'after': true }],
  '@stylistic/space-before-function-paren': [ 'error', 'always' ],
  '@stylistic/comma-spacing': [ 'error', { 'before': false, 'after': true }],
  '@stylistic/comma-dangle': [ 'error', 'always-multiline' ],
  '@stylistic/array-bracket-spacing': [
    'error', 
    'always', 
    {
      // 'singleValue': false, // makes [1] into [ 1 ] provided there are no other items in the list. disabled for now. 
      'objectsInArrays': false, 
      'arraysInArrays': false,
    },
  ],
  '@stylistic/spaced-comment': [ 'error', 'always' ],
  '@stylistic/space-infix-ops': [ 'error' ],
  '@stylistic/block-spacing': [ 'error', 'always' ],
  '@stylistic/array-bracket-newline': [ 'error', { multiline: true, minItems: null }],
  '@stylistic/object-curly-spacing': [ 'error', 'always' ],
  '@stylistic/object-curly-newline': [ 'error', { multiline: true, consistent: true }],
}

export default [
  {
    globals: {
      definePage: 'readonly',
    },
  },
  {
    files: [ '**/*.js', '**/*.ts' ],
    languageOptions: {
      parser: esParser,
      ecmaVersion: 'latest',
      sourceType: 'module',
    },
    plugins: { '@stylistic': stylistic },
    rules: { ...tsRules },
  },
  {
    files: [ '**/*.vue' ],
    languageOptions: {
      parser: vParser,
      parserOptions: {
        parser: esParser, // Use TypeScript parser for `<script>` blocks
        ecmaVersion: 'latest',
        sourceType: 'module',
      },
    },
    plugins: { vue, '@stylistic': stylistic },
    rules: {
      // TS STUFF IN VUE JS FILES
      ...tsRules,

      /**
       * VUE JS STUFF
       * Format and ordering. note that v-bind will sit among props/conventional attributes
       * <div
       *   is="header"
       *   v-for="item in items"
       *   v-if="!visible"
       *   v-once
       *   id="uniqueID"
       *   ref="header"
       *   v-model="headerData"
       *   my-prop="prop"
       *   @click="functionCall"
       *   v-text="textContent"
       * >
       * ...
       * </div>
       */
      'vue/attributes-order': [
        'error', 
        {
          'order': [
            'DEFINITION',
            'LIST_RENDERING',
            'CONDITIONALS',
            'RENDER_MODIFIERS',
            'GLOBAL',
            [ 'UNIQUE', 'SLOT' ],
            'TWO_WAY_BINDING',
            'OTHER_DIRECTIVES',
            'OTHER_ATTR',
            'EVENTS',
            'CONTENT',
          ],
          'alphabetical': false,
        },
      ],
      'vue/max-attributes-per-line': [
        'error', {
          'singleline': { 'max': 1 },
          'multiline': { 'max': 1 },
        },
      ],
      'vue/first-attribute-linebreak': [
        'error', {
          'singleline': 'ignore',
          'multiline': 'below',
        },
      ],
      'vue/html-indent': [ 'error', 2 ], // Enforce 2 spaces for indentation
      'vue/html-closing-bracket-newline': [
        'error',
        {
          'multiline': 'always',
          'selfClosingTag': { 'multiline': 'always' },
        },
      ],
      'vue/html-closing-bracket-spacing': [
        'error', {
          startTag: 'never',
          endTag: 'never',
          selfClosingTag: 'always',
        },
      ],
      'vue/singleline-html-element-content-newline': [
        'error', {
          ignoreWhenNoAttributes: true,
          ignoreWhenEmpty: true,
        },
      ],
    },
  },
]