v-bind
directive JS-0628The v-bind
directive is invalid when: - The directive does not have an attribute value.
It is considered a best practice to avoid 'polluting' the global scope with variables that are intended to be local to the script. Global variables created from a script can produce name collisions with global variables created from another script, which will usually lead to runtime errors or unexpected behavior. It is mostly useful for browser scripts.
In JavaScript, you can extend any object, including builtin or "native" objects. Sometimes people change the behavior of these native objects in ways that break the assumptions made about them in other parts of the code.
render
function should return value JS-0622It is required to have a return value for every render
method. A render function returns a virtual DOM node, commonly named VNode
in the Vue ecosystem, which is an interface that allows Vue to write these objects in your browser DOM. They contain all the information necessary to work with Vue.
The following pattern:
Using promises is forbidden in places where the TypeScript compiler allows them but they are not handled properly. These situations can often arise due to a missing await keyword or just a misunderstanding of the way async functions are handled/awaited.
Single-file components should always order <script>
, <template>
, and <style>
tags consistently, with <style>
last. At least one of the other two is always necessary.
$attrs
JS-0703By default, parent scope attribute bindings that are not recognized as props will "fallthrough". This means that when we have a single-root component, these bindings will be applied to the root element of the child component as normal HTML attributes. When authoring a component that wraps a target element or another component, this may not always be the desired behavior.
Using literals like true
, 0
, and false
on either side of a logical operator is unnecessary. For example, true && something
will always evaluate to something
.
The optional chaining operator can be used to perform null checks before accessing a property, or calling a function.
'^([A-Z][a-z0-9]*)+Type$$'
is the default pattern for type alias names.
React components use JSX, not HTML.
So we need to use JSX attributes and React replicate the respective HTML property/attribute while rendering.
Use of HTML property in JSX can sometimes lead to errors.
For example, class
is a keyword in JavaScript (JSX is an extension of JavaScript), so it will throw an error.
However, in HTML it is a valid attribute.
Note: If you use React with Web Components, use the class
attribute instead.
__proto__
property is not recommended JS-0084__proto__
property has been deprecated as of ECMAScript 3.1 and shouldn't be used. Use Object.getPrototypeOf
and Object.setPrototypeOf
instead.
When an argument is omitted from a function call, it will default to undefined
. It is therefore redundant to explicitly pass an undefined
literal as the last argument.
this.$scopedSlots
members should not have more than 2 arguments. - Multiple Arguments create inconsistency.
Located potential errors resulting from misspellings of variable and parameter names, or accidental implicit globals.
Nesting JSX elements too deeply can confuse developers reading the code. To make maintenance and refactoring easier, DeepSource recommends limiting the maximum JSX tree depth to 4.
This rule prevents passing of props to elements. This rule only applies to DOM Nodes (e.g. <div />
) and not Components (e.g. <Component />
). The list of forbidden props can be customized with the forbid option.
Multiple non-null assertion operators (!
s) are redundant, and may confuse the reader. Moreover, foo?.bar
should always be preferred over foo!?.bar
.
Ensures that any component or prop methods used to handle events are correctly prefixed.