Option to add `@stylistic` eslint plugins

[NormandoHall]

As Eslint 9 removes all formatters, was a tragedy for all as I who has customized Eslint formatters. Now we have https://eslint.style who has ported all the formatters to a new package. I think it is a good option to offer in SV, "@stylistic/eslint-plugin" for all js/ts files.

Maybe in future we can create a stylistic/svelte plugin to format also .svelte files.

Here I shared my eslint.config.js file with stylistic formatter if it is useful:

import eslint from '@eslint/js';
import prettier from 'eslint-config-prettier';
import svelte from 'eslint-plugin-svelte';
import globals from 'globals';
import tseslint from 'typescript-eslint';
import stylistic from '@stylistic/eslint-plugin';

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  ...svelte.configs['flat/recommended'],
  prettier,
  ...svelte.configs['flat/prettier'],
  {
    plugins : {
      '@stylistic' : stylistic
    }
  },
  {
    rules : {
      // reglas formato
      '@stylistic/array-bracket-spacing' : [ 'error', 'always',
        {
          'singleValue'     : false,
          'objectsInArrays' : true,
          'arraysInArrays'  : true
        }
      ],
      '@stylistic/arrow-parens'  : [ 'error', 'always' ],
      '@stylistic/arrow-spacing' : 'error',
      '@stylistic/block-spacing' : [ 'error', 'always' ],
      '@stylistic/brace-style'   : [ 'error', '1tbs',
        {
          'allowSingleLine' : true
        }
      ],
      '@stylistic/comma-dangle'  : 'error',
      '@stylistic/comma-spacing' : [ 'error',
        {
          'before' : false,
          'after'  : true
        }
      ],
      '@stylistic/comma-style'               : 'error',
      '@stylistic/computed-property-spacing' : 'error',
      '@stylistic/func-call-spacing'         : 'error',
      '@stylistic/generator-star-spacing'    : 'error',
      '@stylistic/indent'                    : [ 'error', 2,
        {
          'SwitchCase' : 1
        }
      ],
      '@stylistic/key-spacing' : [ 'error',
        {
          'singleLine' : {
            'afterColon' : true
          },
          'multiLine' : {
            'beforeColon' : true,
            'align'       : 'colon'
          }
        }
      ],
      '@stylistic/keyword-spacing'      : 'error',
      '@stylistic/linebreak-style'      : [ 'error', 'unix' ],
      '@stylistic/lines-around-comment' : [ 'error',
        {
          'allowBlockStart'    : true,
          'allowObjectStart'   : true,
          'beforeBlockComment' : true,
          'beforeLineComment'  : false
        }
      ],
      '@stylistic/max-len' : [ 'error', 160,
        {
          'tabWidth'               : 2,
          'comments'               : 160,
          'ignoreUrls'             : true,
          'ignoreStrings'          : true,
          'ignoreTemplateLiterals' : true,
          'ignoreRegExpLiterals'   : true
        }
      ],
      '@stylistic/member-delimiter-style'   : 'error',
      '@stylistic/no-confusing-arrow'       : 'error',
      '@stylistic/no-extra-semi'            : 'error',
      '@stylistic/no-mixed-operators'       : 'error',
      '@stylistic/no-mixed-spaces-and-tabs' : 'error',
      '@stylistic/no-multi-spaces'          : [ 'error',
        {
          'exceptions' : {
            'TSPropertySignature' : true,
            'PropertyDefinition'  : true,
            'TSTypeAnnotation'    : true
            // 'TSIndexSignature'    : true
          }
        }
      ],
      '@stylistic/no-multiple-empty-lines' : [ 'warn',
        {
          'max'    : 1,
          'maxEOF' : 0,
          'maxBOF' : 0
        }
      ],
      '@stylistic/no-whitespace-before-property' : 'error',
      '@stylistic/object-curly-newline'          : 'off',
      '@stylistic/object-curly-spacing'          : [ 'error', 'always' ],
      '@stylistic/object-property-newline'       : [ 'error',
        {
          'allowMultiplePropertiesPerLine' : true
        }
      ],
      '@stylistic/quotes' : [ 'error', 'single',
        {
          'avoidEscape' : true
        }
      ],
      '@stylistic/semi'                        : [ 'error', 'always' ],
      '@stylistic/semi-spacing'                : 'error',
      '@stylistic/space-before-blocks'         : 'error',
      '@stylistic/space-before-function-paren' : [ 'error',
        {
          'anonymous'  : 'never',
          'named'      : 'never',
          'asyncArrow' : 'always'
        }
      ],
      '@stylistic/space-in-parens'          : [ 'error', 'never' ],
      '@stylistic/spaced-comment'           : [ 'error', 'always' ],
      '@stylistic/type-generic-spacing'     : 'error',
      '@stylistic/type-named-tuple-spacing' : 'error',

      // Reglas linter
      'no-unused-vars'                    : 'off',
      '@typescript-eslint/no-unused-vars' : [
        'warn', // or "error"
        {
          'argsIgnorePattern'         : '^_',
          'varsIgnorePattern'         : '^_',
          'caughtErrorsIgnorePattern' : '^_'
        }
      ]
    }
  },
  {
    languageOptions : {
      globals : {
        ...globals.browser,
        ...globals.node
      }
    }
  },
  {
    files           : ['**/*.svelte'],
    languageOptions : {
      parserOptions : {
        parser : tseslint.parser
      }
    }
  },
  {
    ignores : [ 'build/', '.svelte-kit/', 'dist/' ]
  }
);

VSCODE settings:

  //...
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[svelte]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  //...

[NormandoHall]

There are two issues about integration:

https://github.com/eslint-stylistic/eslint-stylistic/issues/251

https://github.com/eslint-stylistic/eslint-stylistic/issues/218

[benmccann]

There are quite a few eslint plugins: https://github.com/dustinspecker/awesome-eslint?tab=readme-ov-file#plugins. It seems hard to decide which we would add, if any. I think the one potential reason for giving this one special treatment is that it used to be a part of eslint core, so it's somewhat popular. Still, it's only about 2% of eslint users that use it and I don't know if it makes sense to add an option that users might say no to 98% of the time. I think the other thing that cuts across this is that there's a small amount of easy setup we can do for the user, but most of the work is configuring it with your exact style rules and that's much too opinionated for us to be able to do by default and so we'd barely be doing any of the work anyway: https://eslint.style/packages/js#install

[NormandoHall]

Thanks for you reply @benmccann . Yes, you are right, but I think this happens because Prettier is "de facto" unopinionated formatter that comes in a lot of frameworks as default. Maybe a good thing would be do a plugin to integrate it as formatter for .svelte files also.

Well, I leave this as a suggest. Thanks for your work