Official ESLint plugin for Vue.js
See the official website.
This plugin is following Semantic Versioning and ESLint's Semantic Versioning Policy.
This project uses GitHub Releases.
Contribution is welcome!
See The ESLint Vue Plugin Developer Guide.
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!
See the LICENSE file for license rights and limitations (MIT).
今天使用 Vue CLI 创建 Vue 应用,然后从之前的项目中拷贝 ESLint rules,但是 vscode 并没有识别,格式化配置中也没有 ESLint 选项。 一般这种情况应该是 ESLint 配置有问题,可能是插件、解析器或者规则。 一个一个注释后重载 vscode 查看效果,最终定位到 eslint-plugin-vue 下的 vue/max-attributes-per-line
我今天写代码的时候出现了这个问题 [vue/no-deprecated-filter] Filters are deprecated.eslint-plugin-vue,原因是项目是vue3.0的,从vue3.0开始,过滤器就被移除了。 官方文档:过滤器 | Vue.js 所有vue3.x不能用过滤器,而是使用方法调用或计算属性来替换它们。 vue2.x中的过滤
报错: Failed to load plugin vue: Connot find moudule 'eslint-plugin-vue' 或者 ESLint:Error:Failed to load plugin vue: Cannot find module 'eslint-plugin-vue' 解决方法: 1.查看版本 npm -v 2.更
背景:自己用webpack 搭建了 一个类似 vue-cli 的脚手架, 就在配置 …eslintrc文件时 使用了 eslint-plugin-vue, module.exports = { root: true, env: { browser: true, es6: true }, // extends: [ "plugin:@vue/essential","p
eslint-plugin-sql SQL linting rules for ESLint. In its current form, the plugin has been designed and tested to work with Postgres codebase. eslint-plugin-sql Installation Configuration Settings place
eslint-plugin-node Additional ESLint's rules for Node.js �� Install & Usage $ npm install --save-dev eslint eslint-plugin-node Requires Node.js >=8.10.0 Requires ESLint >=5.16.0 Note: It recommends a
eslint-plugin-ember An ESLint plugin that provides a set of rules for Ember applications based on commonly known good practices. ❗️ Requirements ESLint >= 6 Node.js 10.* || 12.* || >= 14 �� Usage 1. I
eslint-plugin-wxml 为 lint 微信小程序 wxml 文件而开发的 eslint 插件,可使用 eslint 来检查微信小程序项目内的 wxml 代码 当开发者使用 VSCode 或者 Webstorm 时可以得到代码错误提示,目前支持的 lint 规则如下: 1. wxml/colon-style-event-binding 强制使用:冒号隔开时间绑定 2. wxml/emp
eslint-plugin-optimize-regex Optimize regex literals Installation You'll first need to install ESLint: npm i eslint --save-dev Next, install eslint-plugin-optimize-regex: npm install eslint-plugin-opt
ESLint plugin for React Native React Native specific linting rules for ESLint. This repository is structured like (and contains code from) the excellent eslint-plugin-react. Installation Install ESLin