82 lines
2.6 KiB
Markdown
82 lines
2.6 KiB
Markdown
# eslint-processor-vue-blocks
|
|
|
|
[![npm version][npm-version-src]][npm-version-href]
|
|
[![npm downloads][npm-downloads-src]][npm-downloads-href]
|
|
[![bundle][bundle-src]][bundle-href]
|
|
[![JSDocs][jsdocs-src]][jsdocs-href]
|
|
[![License][license-src]][license-href]
|
|
|
|
Create virtual files in ESLint for each Vue SFC block, so that you can lint them individually.
|
|
|
|
## Install
|
|
|
|
```bash
|
|
npm i -D eslint-processor-vue-blocks eslint-merge-processors
|
|
```
|
|
|
|
## Usage
|
|
|
|
In ESLint flat config:
|
|
|
|
```js
|
|
// 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
|
|
|
|
<p align="center">
|
|
<a href="https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg">
|
|
<img src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg'/>
|
|
</a>
|
|
</p>
|
|
|
|
## License
|
|
|
|
[MIT](./LICENSE) License © 2023-PRESENT [Anthony Fu](https://github.com/antfu)
|
|
|
|
<!-- Badges -->
|
|
|
|
[npm-version-src]: https://img.shields.io/npm/v/eslint-processor-vue-blocks?style=flat&colorA=080f12&colorB=1fa669
|
|
[npm-version-href]: https://npmjs.com/package/eslint-processor-vue-blocks
|
|
[npm-downloads-src]: https://img.shields.io/npm/dm/eslint-processor-vue-blocks?style=flat&colorA=080f12&colorB=1fa669
|
|
[npm-downloads-href]: https://npmjs.com/package/eslint-processor-vue-blocks
|
|
[bundle-src]: https://img.shields.io/bundlephobia/minzip/eslint-processor-vue-blocks?style=flat&colorA=080f12&colorB=1fa669&label=minzip
|
|
[bundle-href]: https://bundlephobia.com/result?p=eslint-processor-vue-blocks
|
|
[license-src]: https://img.shields.io/github/license/antfu/eslint-processor-vue-blocks.svg?style=flat&colorA=080f12&colorB=1fa669
|
|
[license-href]: https://github.com/antfu/eslint-processor-vue-blocks/blob/main/LICENSE
|
|
[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669
|
|
[jsdocs-href]: https://www.jsdocs.io/package/eslint-processor-vue-blocks
|