docs: add basic config for new ESLint v9 flat configs

ghiscoding commented 3 months ago

Since I had myself to search for a couple of hours to find out how to migrate to the new ESLint v9 flat config eslint.config.mjs, I thought it could be good to improve the docs to help others like me to get started with the new flat config

jfrs commented 3 months ago

Just in case, this is the config I have for strict type checks:

import eslintConfigPrettier from 'eslint-config-prettier';
import pluginVue from 'eslint-plugin-vue';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  ...tseslint.configs.strictTypeChecked,
  ...tseslint.configs.stylisticTypeChecked,
  ...pluginVue.configs['flat/recommended'],
  eslintConfigPrettier,
  {
    languageOptions: {
      parserOptions: {
        parser: tseslint.parser,
        projectService: true,
        extraFileExtensions: ['.vue']
      }
    }
  }
);

ghiscoding commented 3 months ago

@jfrs your code does seem shorter but trying it out doesn't produce the same result on my side, if I move the eslintPrettierConfig on the top like you did (instead of completely at the bottom), then I actually get the correct rule 'vue/max-attributes-per-line': ['error', { singleline: 5 }] kicking in (it actually wasn't working correctly when Prettier was the last config)

but now the problem that I have is that Prettier seems to completely ignore these rules when I said and so is not in sync with the eslint prettier config, not exactly sure why though. @jfrs do you happen to know why? or how to make Prettier use the same config?

EDIT

taking another look at eslint-config-prettier docs, it seems that we have to add it after the rules so that it disables the rules that are conflicting with Prettier. So I think it's better to keep as the last prop in the flat config

vuejs / eslint-plugin-vue

docs: add basic config for new ESLint v9 flat configs #2522