Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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

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

Merged
FloEdelmann merged 6 commits into vuejs:master from ghiscoding:patch-1
Nov 27, 2024
Merged

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

FloEdelmann merged 6 commits into vuejs:master from ghiscoding:patch-1
Nov 27, 2024

Conversation

Copy link
Contributor

@ghiscoding ghiscoding commented Aug 7, 2024
edited
Loading

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

Perdolique and Mael-Abgrall reacted with thumbs up emoji
- 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
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']
 }
 }
 }
);

Copy link
Contributor Author

ghiscoding commented Aug 14, 2024
edited
Loading

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

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 🙂

ghiscoding reacted with hooray emoji
@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
Reviewers

@FloEdelmann FloEdelmann FloEdelmann approved these changes

Assignees
No one assigned
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

AltStyle によって変換されたページ (->オリジナル) /