You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
yosuke ota 03ba30e95a 7.18.0 7 days ago
.circleci Update indent rule to support Class static block and typescript-eslint v5(rc) (#1619) 3 weeks ago
.github/ISSUE_TEMPLATE Update bug_report.md 1 year ago
.vscode Supports ES2022 (Class Fields) (#1481) 3 months ago
docs 7.18.0 7 days ago
eslint-internal-rules fix: prepare suggestable rules for ESLint v8 (and update eslint-plugin-eslint-plugin to v3) (#1607) 1 month ago
lib Add `vue/component-api-style` rule (#1626) 7 days ago
tests Add `vue/component-api-style` rule (#1626) 7 days ago
tools feat: 🎸 https://github.com/vuejs/eslint-plugin-vue/issues/1492 (#1493) 4 months ago
typings Update indent rule to support Class static block and typescript-eslint v5(rc) (#1619) 3 weeks ago
.editorconfig Tidying up (#210) 4 years ago
.env-cmdrc update script 9 months ago
.eslintignore New Rule vue/sort-keys (#997) 2 years ago
.eslintrc.js fix: prepare suggestable rules for ESLint v8 (and update eslint-plugin-eslint-plugin to v3) (#1607) 1 month ago
.gitattributes Merge eslint-plugin-vue-trial 4 years ago
.gitignore Chores: Add JSDoc type checking with TypeScript (#1206) 1 year ago
.npmrc Chore: remove package-lock.json (#128) 4 years ago
.prettierrc Introduce Prettier and update eslint config (#1161) 1 year ago
LICENSE Merge eslint-plugin-vue-trial 4 years ago
README.md Upgrade vue-eslint-parser to 7.1.1 and fixed CRLF issues. (#1332) 11 months ago
package.json 7.18.0 7 days ago
tsconfig.json Chores: Add JSDoc type checking with TypeScript (#1206) 1 year ago

README.md

eslint-plugin-vue

NPM version NPM downloads CircleCI License

Official ESLint plugin for Vue.js

📖 Documentation

See the official website.

Versioning Policy

This plugin is following Semantic Versioning and ESLint's Semantic Versioning Policy.

📰 Changelog

This project uses GitHub Releases.

🍻 Contribution Guide

Contribution is welcome!

See The ESLint Vue Plugin Developer Guide.

Working with Rules

Before you start writing a new rule, please read the official ESLint guide.

Next, in order to get an idea how does the AST of the code that you want to check looks like, use the astexplorer.net. The astexplorer.net is a great tool to inspect ASTs, also Vue templates are supported.

After opening astexplorer.net, select Vue as the syntax and vue-eslint-parser as the parser.

Since single file components in Vue are not plain JavaScript, the default parser couldn't be used, so a new one was introduced. vue-eslint-parser generates enhanced AST with nodes that represent specific parts of the template syntax, as well as what's inside the <script> tag.

To know more about certain nodes in produced ASTs, go here:

The vue-eslint-parser provides a few useful parser services that help traverse the produced AST and access tokens of the template:

  • context.parserServices.defineTemplateBodyVisitor(visitor, scriptVisitor)
  • context.parserServices.getTemplateBodyTokenStore()

Check out an example rule to get a better understanding of how these work.

Please be aware that regarding what kind of code examples you'll write in tests, you'll have to accordingly set up the parser in RuleTester (you can do it on a per test case basis). See an example here.

If you'll stuck, remember there are plenty of rules you can learn from already. If you can't find the right solution, don't hesitate to reach out in issues – we're happy to help!

🔒 License

See the LICENSE file for license rights and limitations (MIT).