Description
Tell us about your environment
- ESLint version: 9.16.0
- eslint-plugin-vue version: 9.32.0
- Vue version: 3.x
- Node version: 22.14.0
The problem you want to solve.
Currently some of the configs set rules to warn
rather than error
, which we've found easily leads to changes we'd want not being applied as warnings don't get surfaced that well - IDEs tend to use a more subtle yellow highlighting rather than angry red, and by default ESLint won't return a non-zero exit code meaning that CIs will be green.
While we can use --max-warnings 0
to have CI fail if there are any warnings, that cannot be configured as part of config to ensure all linting runs apply that and it also doesn't improve the IDE DX.
Your take on the correct solution to problem.
Allow having the configs use error
instead of warn
- since flat config is the future and means plugins and configs are always being used in a js runtime situation, that could be done using a function or an env variable e.g.
const pluginVue = require('eslint-plugin-vue')
// we could do this...
process.env.ESLINT_VUE_ALWAYS_ERROR = 'true';
module.exports = [
// ...or this
...pluginVue.configs['flat/recommended'](true),
]
Personally right now my vote would be for the env variable as I think that is simpler and I don't think I've seen any packages start to take advantage of being able to have functions and whatnot with flat config, but wanted to highlight flat config does give more flexibility in future if folks wanted to move off an env variable
Additional context
I'm happy to do a PR for this 🙂
I can do this:
/**
* Ensures that all ESLint rules configured by the provided configs that are
* enabled use the "error" level rather than "warn", so that they will fail
* CI and be highlighted in editors clearly
*
* @param {import('eslint').Linter.FlatConfig[]} configs
*
* @return {import('eslint').Linter.FlatConfig[]}
*/
const ensureRulesError = configs => {
return configs.map(config => ({
...config,
rules: Object.fromEntries(
Object.entries(config.rules ?? {}).map(([key, value]) => {
const ruleConfig = Array.isArray(value) ? value : [value]
if (ruleConfig[0] === 'warn') {
ruleConfig[0] = 'error'
}
return [key, ruleConfig]
})
),
}))
}
which is fine, but it's a bit ugly and does involve doing some looping work everytime the config is evaluated, and just overall it'd feel nicer if we could have the config handle this with a simpler ? 'error' : 'warn
type check