eslint-processor-vue-blocks

Create virtual files in ESLint for each Vue SFC block, so that you can lint them individually.

Install

npm i -D eslint-processor-vue-blocks eslint-merge-processors

Usage

In ESLint flat config:

// eslint.config.js
import { mergeProcessors } from 'eslint-merge-processors'
import pluginVue from 'eslint-plugin-vue'
import processorVueBlocks from 'eslint-processor-vue-blocks'

export default [
  {
    files: ['*/*.vue'],
    plugins: {
      vue: pluginVue,
    },
    // `eslint-plugin-vue` will set a default processor for `.vue` files
    // we use `eslint-merge-processors` to extend it
    processor: mergeProcessors([
      pluginVue.processors['.vue'],
      processorVueBlocks({
        blocks: {
          styles: true,
          customBlocks: true,
          // Usually it's not recommended to lint <script> and <template>
          // As eslint-plugin-vue already provides the support
          script: false,
          template: false,
        }
      }),
    ]),
    rules: {
      // ...
    }
  },
  {
    files: ['**/*.css'],
    // ... now you can lint CSS files as well as the <style> blocks in Vue SFCs
  }
]

Sponsors

License

MIT License © 2023-PRESENT Anthony Fu