eslint-plugin-vue icon indicating copy to clipboard operation
eslint-plugin-vue copied to clipboard

Add support for recognizing Vue components in .md files

Open salazarr-js opened this issue 4 months ago • 7 comments

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

salazarr-js avatar Oct 14 '24 22:10 salazarr-js