How to extend eslint-config-vuetify? #31
Comments
|
eslint-config-vuetify is a flat config, so I suppose something like import vuetify from 'eslint-config-vuetify/index.ts.mjs'
import eslintConfigLove from 'eslint-config-love'
import eslintPluginVue from 'eslint-plugin-vue'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
import {
configureVueProject,
} from '@vue/eslint-config-typescript'
configureVueProject({ scriptLangs: ['ts', 'tsx'] })
const { languageOptions, ...love } = eslintConfigLove
export default [
...vuetify,
eslintPluginPrettierRecommended,
vueTsConfigs.recommendedTypeChecked,
love,
{
rules: {
// Custom rules
}
}
]should work. You can remove |
|
It doesn't work unless I wrap everything into I have a couple of questions:
import config from './index.js.mjs'
import {
defineConfigWithVueTs,
vueTsConfigs,
} from '@vue/eslint-config-typescript'
export default defineConfigWithVueTs([
vueTsConfigs.recommended,
...config,
{
// False positive for variables in type declarations
rules: {
'no-unused-vars': 'off',
},
},
])
import pluginVue from 'eslint-plugin-vue'
import globals from 'globals'
import eslint from '@eslint/js'
import stylistic from '@stylistic/eslint-plugin'
import { defu } from 'defu'
import { loadAutoImports } from './utils/autoimports.mjs'
import { globalIgnores } from 'eslint/config'
const autoImports = loadAutoImports()
export default [
globalIgnores(['dist/**'], 'ignore dist folder'),
eslint.configs.recommended,
...pluginVue.configs['flat/recommended'],
{
name: 'app/files-to-lint',
files: ['**/*.{js,mjs,jsx,ts,mts,tsx,vue}'],
plugins: {
'@stylistic': stylistic,
},
languageOptions: defu(autoImports, {
globals: {
...globals.node,
...globals.browser,
},
}),
rules: {[...]},
},
{
name: 'app/overrides',
files: ['**/*.vue'],
rules: {[...]},
},
]
Ideally I would love to be able to import |
|
I ended up doing something like this: import eslintConfigLove from 'eslint-config-love'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
import {
configureVueProject,
defineConfigWithVueTs,
vueTsConfigs
} from '@vue/eslint-config-typescript'
import eslint from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import vuetify from 'eslint-config-vuetify/index.js.mjs'
const vuetifyFilesToLint = vuetify.find((el) => el.name === 'app/files-to-lint')
if (vuetifyFilesToLint == null) throw new Error('Cannot find app/files-to-lint')
const vuetifyOverrides = vuetify.find((el) => el.name === 'app/overrides')
if (vuetifyFilesToLint == null) throw new Error('Cannot find app/overrides')
configureVueProject({ scriptLangs: ['ts', 'tsx'] })
const { languageOptions, ...love } = eslintConfigLove
export default defineConfigWithVueTs(
{
name: 'app/files-to-ignore',
ignores: [
'**/dist/**',
'**/dist-ssr/**',
'**/coverage/**',
'src/openapi',
'src/auto-imports.d.ts',
'src/components.d.ts',
'src/typed-router.d.ts',
'src/vite-env.d.ts'
]
},
// vuetify
eslint.configs.recommended,
// Even if in eslint-config-vuetify is beind added first it should go after eslint.configs.recommended or you get all kind of weird errors
vueTsConfigs.recommendedTypeChecked,
...pluginVue.configs['flat/recommended'],
vuetifyFilesToLint,
vuetifyOverrides,
eslintPluginPrettierRecommended,
love,
{
rules: {[...]}
}
)My other questions remain valid though. |
|
|
As eslint-config-vuetify 4 is now in RC, this code should work (still need to configure ): import vuetify from 'eslint-config-vuetify';
import love from 'eslint-config-love'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
export default vuetify({
imports: false, // disable imports plugin as `love` comes with different plugin
ts: {
preset: 'recommendedTypeChecked'
}
},
love,
eslintPluginPrettierRecommended,
) |
|
@AndreyYolkin thanks! Unfortunately I'm getting the following error while importing the config now:
Any idea why? |
|
Currently no, I didn't face it before. Could you extract a minimal repro? |
I could not experience that either. There are also few rules missing: 'vue/block-lang' and 'vue/order-in-components' which are present in the 'eslint-plugin-vuetify' plugin. |
|
I think it should be like that (vitest, globalIgnores with .gitignore support, vue are already included) import pluginPlaywright from 'eslint-plugin-playwright'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
import vuetify from 'eslint-config-vuetify'
export default vuetify({
ts: { preset: 'recommendedTypeChecked' },
stylistic: false,
},
{
rules: {
'@typescript-eslint/array-type': ['error', { default: 'generic' }],
'@typescript-eslint/consistent-type-imports': 'error',
'@typescript-eslint/no-empty-function': 'error',
'@typescript-eslint/no-invalid-this': 'error',
'@typescript-eslint/no-non-null-assertion': 'error',
'@typescript-eslint/no-shadow': 'error',
'@typescript-eslint/no-unused-vars': 'error',
'vue/order-in-components': [...],
},
},
{
...pluginPlaywright.configs['flat/recommended'],
files: ['e2e/**/*.{test,spec}.{js,ts,jsx,tsx}'],
},
eslintPluginPrettierRecommended,
skipFormatting,
) |
|
I tried that also but the typescript rules dont have any effect. See empty function or meals (MealValues[] instead of Array. I got this error in intellij: Is there a pssability to just use the eslint flat config instead? It would be great instead of using the vuetify wrapper. Thank you for your help. |
I want to use an external config like
eslint-config-lovein addition tovuetifyjs/create's . Previously the following was enough (even though I had some issues):Now with the use of
eslint-config-vuetifywhat's the best way to extend it?It looks like only the output of
defineConfigWithVueTsis being exported and not the single pieces used as its arguments.The text was updated successfully, but these errors were encountered: