{"id":10842,"library":"eslint-processor-vue-blocks","title":"ESLint Processor for Vue Blocks","description":"eslint-processor-vue-blocks enables ESLint to process individual blocks within Vue Single File Components (SFCs) by creating virtual files for each block (e.g., `<style>`, `<custom-block>`). This allows for more granular linting, applying different ESLint configurations and rules to specific parts of a Vue component. The current stable version is 2.0.0, which introduced breaking changes by requiring ESLint v9+ and becoming an ESM-only package. The package is maintained by Antfu and sees updates driven by ecosystem changes like new ESLint versions or Vue SFC parsing improvements. Its key differentiator is providing a flexible way to extend `eslint-plugin-vue`'s default processing, enabling linting of styles or custom blocks independently, which `eslint-plugin-vue` typically delegates or ignores.","status":"active","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/antfu/eslint-processor-vue-blocks","tags":["javascript","eslint","eslint-processor","vue","typescript"],"install":[{"cmd":"npm install eslint-processor-vue-blocks","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-processor-vue-blocks","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-processor-vue-blocks","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for parsing Vue Single File Components into their constituent blocks.","package":"@vue/compiler-sfc","optional":false},{"reason":"Core ESLint engine, required for any ESLint processor. Version 9.0.0 or higher is required since v2.0.0.","package":"eslint","optional":false},{"reason":"Commonly used alongside to combine this processor with `eslint-plugin-vue`'s default processor for .vue files.","package":"eslint-merge-processors","optional":false}],"imports":[{"note":"ESM-only since v2.0.0. Use this as a function to configure block processing.","wrong":"const processorVueBlocks = require('eslint-processor-vue-blocks')","symbol":"processorVueBlocks","correct":"import processorVueBlocks from 'eslint-processor-vue-blocks'"},{"note":"Named export from `eslint-merge-processors`, commonly used to combine multiple processors.","wrong":"import mergeProcessors from 'eslint-merge-processors'","symbol":"mergeProcessors","correct":"import { mergeProcessors } from 'eslint-merge-processors'"},{"note":"While not directly from this package, typings for ESLint configuration are crucial for `eslint.config.js`.","symbol":"ConfigObject","correct":"import type { Linter } from 'eslint'"}],"quickstart":{"code":"import { mergeProcessors } from 'eslint-merge-processors'\nimport pluginVue from 'eslint-plugin-vue'\nimport processorVueBlocks from 'eslint-processor-vue-blocks'\n\nexport default [\n  {\n    files: ['**/*.vue'],\n    plugins: {\n      vue: pluginVue,\n    },\n    processor: mergeProcessors([\n      pluginVue.processors['.vue'],\n      processorVueBlocks({\n        blocks: {\n          styles: true,\n          customBlocks: true,\n          // Usually it's not recommended to lint <script> and <template>\n          // As eslint-plugin-vue already provides the support\n          script: false,\n          template: false,\n        }\n      }),\n    ]),\n    rules: {\n      // Your Vue-specific rules for script and template\n      'vue/no-unused-vars': 'error',\n      'vue/multi-word-component-names': 'off'\n    }\n  },\n  {\n    files: ['**/*.css', '**/*.vue/*.css'], // Lint CSS files and <style> blocks\n    rules: {\n      'selector-list-comma-newline-after': 'always',\n      // ... your CSS rules\n    }\n  },\n  {\n    files: ['**/*.md', '**/*.vue/*.md'], // Example for custom blocks, e.g., <docs lang=\"md\"> \n    rules: {\n      'prettier/prettier': 'error' // Assuming you have eslint-plugin-prettier configured\n    }\n  }\n]","lang":"typescript","description":"This quickstart demonstrates how to configure `eslint-processor-vue-blocks` with ESLint flat config to lint Vue SFC `<style>` and custom blocks alongside `eslint-plugin-vue`."},"warnings":[{"fix":"Upgrade ESLint to version 9.x or later. Ensure your project dependencies reflect `\"eslint\": \"^9.0.0\"`.","message":"Version 2.0.0 of `eslint-processor-vue-blocks` requires ESLint v9.0.0 or higher. Older ESLint versions are not supported.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"If you are using CommonJS, you must switch your ESLint configuration (e.g., `eslint.config.js`) to use ESM syntax (`import`/`export`) or use a tool like `esm-hook` to enable ESM in your CJS environment. Ensure your `package.json` specifies `\"type\": \"module\"` if your config is in a `.js` file.","message":"Since v2.0.0, `eslint-processor-vue-blocks` is an ESM-only package. It no longer provides CommonJS builds.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"It is generally recommended to set `script: false` and `template: false` in the `blocks` option of `processorVueBlocks` to avoid conflicts with `eslint-plugin-vue`'s built-in processing.","message":"By default, `eslint-plugin-vue` already handles `<script>` and `<template>` blocks. Enabling them in `eslint-processor-vue-blocks` can lead to duplicate linting or unexpected behavior.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure `@vue/compiler-sfc` is installed in your project. Add `npm i -D @vue/compiler-sfc` or `yarn add -D @vue/compiler-sfc`.","message":"This package requires `@vue/compiler-sfc` as a peer dependency for parsing Vue SFCs. Without it, the processor cannot function.","severity":"gotcha","affected_versions":">=0.1.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure your ESLint configuration file (`eslint.config.js`) is treated as an ES Module. This typically means adding `\"type\": \"module\"` to your `package.json` or renaming the config file to `.mjs`.","cause":"Attempting to `require()` an ESM-only package in a CommonJS context.","error":"Error: Cannot find module 'eslint-processor-vue-blocks'"},{"fix":"Verify that you are using `import processorVueBlocks from 'eslint-processor-vue-blocks'` and that your environment supports ES Modules.","cause":"Incorrect import of `processorVueBlocks` or attempt to use it without `import` in an ESM context.","error":"TypeError: processorVueBlocks is not a function"},{"fix":"Install `eslint-plugin-vue` (e.g., `npm i -D eslint-plugin-vue`) and ensure it is included in your ESLint flat config under the `plugins` key.","cause":"`eslint-plugin-vue` is not installed or correctly configured.","error":"ESLint couldn't find the plugin \"vue\"."}],"ecosystem":"npm"}