JavaScript

JavaScript

Made by DeepSource
Race condition in compound assignment JS-0040
Bug risk
Major

When writing asynchronous code, it is possible to create subtle race condition bugs. Consider the following example:

Found invalid v-bind directive JS-0628
Anti-pattern
Minor

The v-bind directive is invalid when: - The directive does not have an attribute value.

Prefer not to declare variables in global scope JS-0067
Anti-pattern
Minor

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.

Prefer not to extend native types JS-0061
Anti-pattern
Minor

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.

Prefer having synchronous computed properties JS-0607
Bug risk
Minor

Computed properties should be synchronous. Asynchronous actions inside them may not work as expected and can lead to unexpected behavior, that's why it is recommended to avoid using asynchronous actions.

render function should return value JS-0622
Anti-pattern
Minor

It 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.

Found invalid v-cloak directives JS-0630
Bug risk
Major

The issue is raised when v-cloak has argument, modifier, and attribute value. The v-cloak directive will remain on the element until the associated Vue instance finishes compilation. It is combined with CSS rules such as [v-cloak] { display: none }, this directive can be used to hide un-compiled mustache bindings until the Vue instance is ready.

Found complex boolean return JS-W1041
Anti-pattern
Major

The following pattern:

Found invalid v-else-if directives JS-0631
Bug risk
Minor

v-else-if is not valid when:

  • The directive has an argument.
  • The directive has a modifier.
  • The directive doesn't have an attribute value.
  • The directive is on the elements that the previous element don't have v-if/v-else-if directives.
  • The directive is on the elements which have v-if/v-else directives.
Deprecation of .native modifiers JS-0655
Bug risk
Major

To migrate to Vue 3.x, consider making the following changes: - .native modifier for v-on will be removed. - this.$listeners will be removed.

emits validator does not always return a boolean value JS-0660
Bug risk
Major

Emitted events can be defined on the component via the emits option. In the event a native event (e.g., click) is defined in the emits option, it will be overwritten by the event in the component instead of being treated as a native listener. To add validation, the event is assigned a function that receives the arguments passed to the $emit call and returns a boolean to indicate whether the event is valid or not.

Should have valid v-is directives JS-0661
Bug risk
Minor

When using in-DOM templates, the template is subject to native HTML parsing rules. Some HTML elements, such as <ul>, <ol>, <table> and <select> have restrictions on what elements can appear inside them, and some elements such as <li>, <tr>, and <option> can only appear inside certain other elements. As a workaround, we can use the v-is directive on these elements.

Should have valid .sync modifier on v-bind directives JS-0665
Bug risk
Major

In some cases, we may need “two-way data binding” for a prop. Unfortunately, true two-way binding can create maintenance issues, because child components can mutate the parent without the source of that mutation being obvious in both the parent and the child.

Avoid using promises in places not designed to handle them JS-0336
Anti-pattern
Major

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.

Should have order of component top-level elements JS-0690
Anti-pattern
Minor

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.

Should have inheritAttrs to be set to false when using v-bind=$attrs JS-0703
Anti-pattern
Minor

By 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.

Disallow the <template> <script> <style> block to be empty JS-0704
Bug risk
Minor

If you prefer splitting up your *.vue components into multiple files, you can use the src attribute to import an external file for a language block. Beware that src imports follow the same path resolution rules as webpack module requests, which means: - Relative paths need to start with ./

Disallow using components that are not registered inside templates JS-0713
Bug risk
Minor

All components used in a Vue template should be registered in the components field.

Logical operator can be refactored to optional chain JS-W1044
Anti-pattern
Minor
Autofix

The optional chaining operator can be used to perform null checks before accessing a property, or calling a function.

Avoid using dangerous JSX properties JS-0440
Security
Major

Dangerous properties in React are those whose behavior is known to be a common source of application vulnerabilities. The properties names clearly indicate they are dangerous and should be avoided unless great care is taken.