How to use eslint-plugin-pug in eslint flat

[yanzhangshuai]

How to use eslint-plugin-pug in eslint flat. I use pug and eslint@9 in my vue project. There is a problem that that trouble me.

ts/consistent-type-imports rule will InstanceType covert to import type Component from 'xxxxxx', but this is error

I need help. Thanks.

[lehni]

We can't see the error, the images appears to be broken. Could you post the content again?

But there's a PR for this already, see #26

[yanzhangshuai]

We can't see the error, the images appears to be broken. Could you post the content again?

But there's a PR for this already, see #26

Sorry, I re-uploaded the image.

#26 is open state. And I also made my demands there.

[someonewithpc]

Use this in your eslint.config.js

import { FlatCompat } from '@eslint/eslintrc';
import { dirname } from 'node:path';
import { fileURLToPath } from 'node:url';

const __filename = fileURLToPath(import.meta.url); // I think these two are only needed for Vite based projects
const __dirname = dirname(__filename);
const compat = new FlatCompat({ baseDirectory: __dirname });

export default [
  // Eslint.configs.recommended,
  // ...Vue.configs['flat/recommended'],
  ...compat.extends('plugin:vue-pug/vue3-recommended'),
];

[ziazon]

Use this in your eslint.config.js

import { FlatCompat } from '@eslint/eslintrc';
import { dirname } from 'node:path';
import { fileURLToPath } from 'node:url';

const __filename = fileURLToPath(import.meta.url); // I think these two are only needed for Vite based projects
const __dirname = dirname(__filename);
const compat = new FlatCompat({ baseDirectory: __dirname });

export default [
  // Eslint.configs.recommended,
  // ...Vue.configs['flat/recommended'],
  ...compat.extends('plugin:vue-pug/vue3-recommended'),
];

This works! thank you!

[glutaminefree]

Any hope for native support of flat config?

[tpuida]

+1

[leezng]

Any new progress?

[rashfael]

I just released a new major version that adds flat configs just like eslint-plugin-vue.

You can try it out by installing eslint-plugin-vue-pug@flat and adding the following to your flat config:

…
import pluginVuePug from 'eslint-plugin-vue-pug'

…
  ...pluginVue.configs['flat/recommended'],
  ...pluginVuePug.configs['flat/recommended'],

Please try it out, let me know if it works for you and thanks for your patience!

[tbontb-iaq]

Can you add Typescript type definitions?

[rashfael]

Can you add Typescript type definitions?

I'll have a look at how that works.

[Shinigami92]

Can you add Typescript type definitions?

I'll have a look at how that works.

Summon me and I can help if you wish

[rashfael]

@Shinigami92 It looks like eslint-plugin-vue isn't doing much I can copy. Am I missing something big apart from https://github.com/vuejs/eslint-plugin-vue/blob/d38514020768cb1ea21f577f164cc3b82bcf78c9/lib/index.d.ts ?
I can add that easily.
Are rule settings something that can be typed or what would be the expectation here?
Thanks for your help!

[Shinigami92]

@Shinigami92 It looks like eslint-plugin-vue isn't doing much I can copy. Am I missing something big apart from vuejs/eslint-plugin-vue@d385140/lib/index.d.ts ? I can add that easily. Are rule settings something that can be typed or what would be the expectation here? Thanks for your help!

Yes, there is a very new feature and eslint now ships freshly with defineConfig. Even I would need to look into it 🙂

https://github.com/eslint/rewrite/blob/83e58a1d8d7e5df81c87cfbaeebaea70a40b4e51/packages/config-helpers/src/define-config.js#L495

[lehni]

@rashfael could you please consider merging #30? I am still facing the same issue with v1.0.0-alpha.2 and eslint v9.
Merging #30 would fix that.

Also, I cannot find the flat branch that was released as v1.0.0. Is it not on Github?