Intellisense & Quick fix: Add import type from 'xxx.ts'

[dislido]

I have a typescript project that includes the following configurations:
.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll": true
  }
}

.eslintrc.js

module.exports = {
  rules: {
    '@typescript-eslint/consistent-type-imports': 'error',
    'import/no-duplicates': 'error',
  },
}

Now I have a file that defines a customElement my-element.ts;

export class MyElement extends HTMLElement {}

customElements.define('my-element', MyElement);

Usually, I directly import it as side effect;

import './my-element';

const el = document.createElement('my-element');

Sometimes I need to use its type, when I input MyElement, Intellisense or Quick fix will add a named import, which violated the eslint rules.

import './my-element';

import { MyElement } from './my-element';

const el = document.createElement('my-element') as MyElement;

When I save this file, it will be auto fixed: the side effect import disappears, and the named import becomes a type import, Then I lost the ./my-element import;

import type { MyElement } from './my-element';

const el = document.createElement('my-element') as MyElement;

If we have an "Add import type from './my-element.ts'" option in Intellisense & Quick fix, we can solve this problem.

[RyanCavanaugh]

This is addressed by #56090

TypeScript doesn't know anything about external lint programs and can't adjust its behavior accordingly, so the contents of your .eslintrc.js aren't relevant in this situation.

[typescript-bot]

This issue has been marked as "Duplicate" and has seen no recent activity. It has been automatically closed for house-keeping purposes.