Product
Introducing Java Support in Socket
We're excited to announce that Socket now supports the Java programming language.
eslint-plugin-vue
Advanced tools
The eslint-plugin-vue npm package is a plugin for ESLint specifically designed for Vue.js applications. It provides linting rules that are tailored to the Vue.js framework, helping developers to write consistent and error-free code by following best practices and avoiding common mistakes.
Style Guide Enforcement
Enforces a style guide by limiting the number of attributes per line in Vue templates. This helps in maintaining readability and consistency in the codebase.
"vue/max-attributes-per-line": ["error", { "singleline": 3, "multiline": { "max": 1, "allowFirstLine": false } }]
Component Naming
Ensures that component names in templates are written in a specific case, such as PascalCase, which is a common convention in Vue.js projects.
"vue/component-name-in-template-casing": ["error", "PascalCase"]
Avoiding Deprecated Features
Prevents the use of deprecated features like the 'slot' attribute, encouraging developers to use the updated syntax and features of Vue.js.
"vue/no-deprecated-slot-attribute": "error"
Prop Validation
Ensures that every prop has a default value, which can prevent bugs and make the components more predictable.
"vue/require-default-prop": "error"
Script Indentation
Enforces consistent indentation in the script section of Vue single-file components, which improves code readability and maintainability.
"vue/script-indent": ["error", 2, { "baseIndent": 1, "switchCase": 1, "ignores": [] }]
Similar to eslint-plugin-vue, eslint-plugin-react provides linting rules specific to React applications. It helps enforce best practices and conventions for React components, JSX syntax, and more.
This plugin is designed for Angular applications and offers linting rules that cater to the Angular framework's structure and coding styles, similar to how eslint-plugin-vue serves Vue.js developers.
For developers using Svelte, eslint-plugin-svelte3 provides linting rules tailored to the Svelte framework. It helps maintain code quality and consistency in a way that's analogous to eslint-plugin-vue's role for Vue.js.
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).
FAQs
Official ESLint plugin for Vue.js
We found that eslint-plugin-vue demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We're excited to announce that Socket now supports the Java programming language.
Security News
Socket detected a malicious Python package impersonating a popular browser cookie library to steal passwords, screenshots, webcam images, and Discord tokens.
Security News
Deno 2.0 is now available with enhanced package management, full Node.js and npm compatibility, improved performance, and support for major JavaScript frameworks.