Repository files navigation

A wrapper aroundeslint-config-prettier designed to work more intuitively withcreate-vue setups.

This config is specifically designed to be used bycreate-vue setupsand is not meant for outside use (it can be used but some adaptationson the user side might be needed - for details see the config file).

A part of its design is that this config may implicitly depend onother parts ofcreate-vue setups.

npm add --dev @vue/eslint-config-prettier

Please also make sure that you haveprettier andeslint installed.

Note: the current version doesn't support the legacy.eslintrc* configuration format. For that you need to use version 9 or earlier. See thecorresponding README for more usage instructions.

Import@vue/eslint-config-prettier ineslint.config.js (oreslint.config.mjs), and put it in the configuration array –after other configs that you want to override.

import{defineConfig}from"eslint/config";importsomeConfigfrom"some-other-config-you-use";importprettierConfigfrom"@vue/eslint-config-prettier";exportdefaultdefineConfig([someConfig,prettierConfig]);

Make sure to put itlast, so it gets the chance to override other configs.

This configuration is the most straightward way to use ESLint with Prettier.

It disables all rules that are unnecessary or might conflict with Prettier.It also enables theeslint-plugin-prettier plugin, which runs Prettier as an ESLint rule and reports differences as individual ESLint issues.

By default all formatting issues are reported as warnings, and will be automatically fixed duringeslint --fix.

While the above setup is very straightforward, it is not necessarily the best way.

Running prettier inside the linter slows down the linting process, might clutter the editor with annoying warnings, and adds one layer of indirection where things may break.Prettier's official documentation recommends using separate commands for linting and formatting, i.e., Prettier for code formatting concerns and ESLint for code-quality concerns.

So we offered an additional ruleset to support this workflow:

import{defineConfig}from"eslint/config";importsomeConfigfrom"some-other-config-you-use";importskipFormattingConfigfrom"@vue/eslint-config-prettier/skip-formatting";exportdefaultdefineConfig([someConfig,skipFormattingConfig]);

Formatting issues won't be reported with this config.

You can runprettier --check . separately to check for formatting issues, orprettier --write . to fix them.

The default config is based on the recommended configuration ofeslint-plugin-prettier, which also depends oneslint-config-prettier. Please refer to their corresponding documentations for more implementation details.