JavaScript

JavaScript

Made by DeepSource
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.

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 complex boolean return JS-W1041
Anti-pattern
Major

The following pattern:

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.

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.

Prefer a consistent naming pattern for type aliases JS-0509
Anti-pattern
Minor

'^([A-Z][a-z0-9]*)+Type$$' is the default pattern for type alias names.

Prevent usage of wrong DOM property JS-0455
Anti-pattern
Minor

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.

Found redundant literal in a logical expression JS-W1043
Anti-pattern
Minor

Expressions that consistently result in either true or false when comparing values, and logical operations like ||, &&, and ?? that consistently either skip or fully evaluate their operands, often indicate mistakes. Logical operations that always yield the same result could lead to unexpected behavior or bugs in the program.

The usage of __proto__ property is not recommended JS-0084
Anti-pattern
Minor
Autofix

__proto__ property has been deprecated as of ECMAScript 3.1 and shouldn't be used. Use Object.getPrototypeOf and Object.setPrototypeOf instead.

Found trailing undefined in function call JS-W1042
Anti-pattern
Minor
Autofix

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.

Disallow to pass multiple arguments to scoped slots JS-0692
Anti-pattern
Minor

this.$scopedSlots members should not have more than 2 arguments. - Multiple Arguments create inconsistency.

Marked Flow type identifiers as defined JS-0479
Anti-pattern
Major

Located potential errors resulting from misspellings of variable and parameter names, or accidental implicit globals.

Validation of JSX maximum depth JS-0415
Anti-pattern
Minor

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.

Forbid certain props on DOM Nodes JS-0395
Anti-pattern
Major

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.

Unnecessary non-null assertion JS-0324
Anti-pattern
Minor
Autofix

Multiple non-null assertion operators (!s) are redundant, and may confuse the reader. Moreover, foo?.bar should always be preferred over foo!?.bar.

Prefer event handler naming conventions in JSX JS-0411
Anti-pattern
Minor

Ensures that any component or prop methods used to handle events are correctly prefixed.