vue-eslint-parser

What is vue-eslint-parser?

The vue-eslint-parser npm package is a parser that allows ESLint to lint .vue files' script and template sections. It is designed to parse Vue.js component files and extract the JavaScript expression inside them for ESLint to check.

What are vue-eslint-parser's main functionalities?

Parsing .vue files

This feature allows the integration of ESLint with Vue.js single-file components. The code sample shows how to configure ESLint to use vue-eslint-parser in a project's .eslintrc.js file.

module.exports = { parser: 'vue-eslint-parser', parserOptions: { parser: 'babel-eslint', sourceType: 'module', ecmaVersion: 2020 } }

Extracting script content

vue-eslint-parser extracts the script content from a .vue file, enabling ESLint to lint the JavaScript code within. The code sample is a Vue component with a template and a script section.

/* eslint-disable */ <template><div>{{ message }}</div></template><script>export default { data() { return { message: 'Hello Vue!' }; } }</script>

Supporting custom blocks

The parser can handle custom blocks in .vue files, such as style and i18n blocks, although linting these blocks may require additional plugins or configurations. The code sample includes a style block along with the template and script.

/* eslint-disable */ <template><div>{{ message }}</div></template><script>export default { data() { return { message: 'Hello Vue!' }; } }</script><style scoped>.message { color: red; }</style>

Other packages similar to vue-eslint-parser

eslint-plugin-vue

This package is an ESLint plugin that provides linting rules for Vue.js templates. It is often used in conjunction with vue-eslint-parser to lint both the template and script parts of Vue components.

babel-eslint

babel-eslint is a parser that allows ESLint to run on source code that is transpiled with Babel. While it does not specifically target Vue.js files, it is commonly used as the underlying JavaScript parser for vue-eslint-parser.

README

The README file is missing