Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add example config with typescript-eslint and Prettier #2522

Merged
merged 6 commits into from
Nov 27, 2024

Conversation

ghiscoding
Copy link
Contributor

@ghiscoding ghiscoding commented Aug 7, 2024

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

- I had to search for a couple of hours to find out how to migrate to the new ESLint v9 flat config `eslint.config.mjs`, so I thought that I could add this to the docs to help others like me to get started with the new flat config
@jfrs
Copy link

jfrs commented Aug 14, 2024

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
Copy link
Contributor Author

ghiscoding commented Aug 14, 2024

@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)

image

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

Copy link
Member

@FloEdelmann FloEdelmann left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for the late review. I like this new section, since it is a common setup and reduces the number of places new users need to visit and get their information from. However, I have a few suggestions, see below.

docs/user-guide/index.md Outdated Show resolved Hide resolved
docs/user-guide/index.md Show resolved Hide resolved
docs/user-guide/index.md Outdated Show resolved Hide resolved
@ghiscoding
Copy link
Contributor Author

@FloEdelmann thanks for the review, I made changes with your suggestions. It should be all good now. :)

Copy link
Member

@FloEdelmann FloEdelmann left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, this looks good to me now 🙂

@FloEdelmann FloEdelmann changed the title docs: add basic config for new ESLint v9 flat configs docs: add example config with typescript-eslint and Prettier Nov 27, 2024
@FloEdelmann FloEdelmann merged commit dc06535 into vuejs:master Nov 27, 2024
18 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants