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:

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.

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

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.

Found flawed string comparison JS-W1040
Bug risk
Major
Autofix

The result of a call to String#toUpperCase should only be compared with an uppercase string. Calls like s.toUpperCase() === "Not-Uppercase" will always evaluate to false. Similarly, calls to toLowerCase should only be compared with lowercase strings.

Should not use Arrow functions JS-0774
Bug risk
Minor

Arrow functions should not be used in computed properties because they are unable to access other properties (using this.property) of the same object. Accidental usage can thus lead to bugs.

Should not use .on() JS-0800
Bug risk
Minor

Avoid using .on() in favour of component's lifecycle hooks. The order of execution for on() is not deterministic.

function or var declarations in nested blocks is not preferred JS-0016
Bug risk
Major

Function declarations (with the function keyword) and variable declarations should preferably be in the root of a program or the body of a function. Having nested function declarations inside blocks may have unexpected results at runtime due to hoisting.

Migrate ember-data to @ember-data JS-0818
Bug risk
Minor

ember-data has been split in multiple packages. For instance, its store is now released in @ember-data/store package. These packages have been released starting from ember-data version 3.11.

Why we have to migrate?

  • Reduce Confusion & Bike Shedding
  • Improve The TypeScript Experience
  • Simplify The Mental Model
  • Provide a Clear Subdivision of Packages
Detected the assignment to exports JS-0256
Bug risk
Major

This rule is aimed at disallowing exports = {}, but allows module.exports = exports = {} to avoid conflict with node/exports-style rule's allowBatchAssign option.

Incorrect computed macros JS-0789
Bug risk
Minor
Autofix

Macros are called with incorrect number of arguments

Found redeclared variables JS-0085
Bug risk
Minor

The var keyword is soft-deprecated, and should not be used to redeclare existing variables.

Found unused expressions JS-0093
Bug risk
Minor
Autofix

An unused expression that does not affect the state of the program indicates a logic error.

Typo in class properties and lifecycle methods JS-0453
Bug risk
Major

This issue ensures the proper casing and spelling while declaring static class properties and lifecycle methods. The static class properties i.e., propTypes, contextTypes and childContextTypes are supported by the react-props.