vuejs
Add support for recognizing Vue components in .md files
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
- [x] I have tried restarting my IDE and the issue persists.
- [x] 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
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.
@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>
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?
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
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
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.
Okay, I'll close this as won't fix then. But feel free to share any additional information as comments :slightly_smiling_face: