Add support for recognizing Vue components in .md files

[salazarr-js]

Not sure if this is in the scope of eslint-plugin-vue or is more a responsibility of vitepress itself, but there is no mention on the docs of how to lint .md files when you are using vitepress

Checklist

• I have tried restarting my IDE and the issue persists.
• I have read the FAQ and my problem is not listed.

Tell us about your environment

• ESLint version: ^9.12.0
• eslint-plugin-vue version: ^9.28.0
• Vue version: ^3.5.11
• Vitepress: ^1.4.0
• Node version: v20.17.0
• Operating System: Microsoft Windows 11 Pro Version 10.0.22631 Build 22631

Please show your full configuration:

import js from '@eslint/js';
import ts from 'typescript-eslint';
import vue from 'eslint-plugin-vue'

/** @type {import('eslint').Linter.Config[]} */
export default [
  js.configs.recommended,
  ...ts.configs.recommended,
  ...vue.configs['flat/recommended'],
  {
    files: ['*.vue', '**/*.vue'],
    languageOptions: {
      parserOptions: {
        parser: '@typescript-eslint/parser'
      }
    }
  }
];

What did you do?

I use the custom parser config example, but the plugin ignores all the .md files, if I add the .md globs to the files config, the lint script throws an error Parsing error: Invalid character type of error

{
    files: ['*.vue', '**/*.vue', '*.md', '**/*.md'],
    extends: [
      ...vue.configs['flat/recommended'],
    ],
  },
  {
    files: ['*.vue', '**/*.vue', '*.md', '**/*.md'],
    languageOptions: {
      parserOptions: {
        parser: '@typescript-eslint/parser'
      }
    }
  },

Not sure if I could use and set a custom parser from @eslint/markdown or marked for this use case.
All the .ts and .vue files are correctly linted

What did you expect to happen?

The eslint-plugin-vue should be able to lint the vue components in .md files

What actually happened?

\vitepress-eslint\docs\components\linted.vue
  1:1  error  Component name "linted" should always be multi-word  vue/multi-word-component-names

\vitepress-eslint\docs\index.md
  1:0  error  Parsing error: Invalid character

\vitepress-eslint\docs\utils\linted.ts
  5:7   error  'lorem' is assigned a value but never used  @typescript-eslint/no-unused-vars
  5:14  error  Unexpected any. Specify a different type    @typescript-eslint/no-explicit-any

\vitepress-eslint\readme.md
  1:0  error  Parsing error: Invalid character

✖ 5 problems (5 errors, 0 warnings)

Repository to reproduce this issue

https://github.com/salazarr-js/vitepress-eslint

[FloEdelmann]

This is indeed out of scope for eslint-plugin-vue. That the Vue parser chokes on Markdown files is expected.

However, you can indeed use @eslint/markdown's processor config, which creates virtual .js or .ts files for code blocks in Markdown files, which in turn can then be linted by eslint-plugin-vue.

[salazarr-js]

@FloEdelmann thanks for your response, I understand that we can use the @eslint/markdown's processor to lint code blocks from .md files, but what about the script tag with vue logic like

# Vue script in `.md` files aren't linted

some markdown content

<LintedComponent />

```ts
console.warn(`code blocks can be linted`)
```

<script setup lang="ts">
  import { ref } from 'vue'
  import LintedComponent from './components/linted.vue'

  console.warn("Vue script in `.md` files aren't linted")
  const lorem = ref('ipsum')
</script>

[FloEdelmann]

But that is not md but mdx, right? Nevermind, it isn't.

[FloEdelmann]

I've never heard about this use case. Is it supported/endorsed specifically by Vitepress, or do you know of other frameworks that allow/execute/transform <script> tags in Markdown files?

[salazarr-js]

Vitepress brings the ability to use Vue component logic in .md files out of the box, vuepress did this before, and I found that SveltKit provides this feature too but through a preprocessor. For a moment I thought astro did the same, but I realized they use the .astro file extension

Vitepress - Using Vue in Markdown
Vuepress - Using Vue in Markdown
MDsveX - Markdown preprocessor for Svelte

⁉️ Not sure if you mean only vue frameworks or frameworks in general

[FloEdelmann]

@ota-meshi Do you think this is worth supporting?

[salazarr-js]

I am not sure if it's worth mentioning that vuejs/language-tools support .md files.

• VitePress markdown support in vue-tsc
• feat: redesign additional extensions, VitePress, PetiteVue support (merged)

It would be great to have both IntelliSense and linting support for vitepress and vuepress projects

[ota-meshi]

I think it would be interesting for the ESLint plugin to support VitePress markdown, but I think that would need to be a separate plugin from this plugin.

[FloEdelmann]

Okay, I'll close this as won't fix then. But feel free to share any additional information as comments 🙂