JavaScript

JavaScript

By DeepSource

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

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

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.

Avoid using promises in places not designed to handle them JS-0336
Anti-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.

Prevent missing displayName in a React component definition JS-0393
Anti-pattern

DisplayName allows you to name your component. This name is used by React in debugging messages.

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

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

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

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.

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

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

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

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

Disallow boolean defaults JS-0702
Anti-pattern

A boolean prop should not set a default (Vue defaults it to false).

Validation of JSX maximum depth JS-0415
Anti-pattern

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

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

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

Prefer having a consistent component name pattern JS-0538
Anti-pattern

It is recommended to use the same file names as the angular component name because it brings consistency and helps build tools. All components should follow a pattern that describes the component's feature then (optionally) its type for better naming convention. Thus, it provides a consistent way to identify components quickly. In addition, it provides pattern matching for any automated tasks.

Use ES6 class for React Components JS-0460
Anti-pattern

React offers two ways to create traditional components: the ES5 create-react-class module or the new ES6 class system. It is recommended to use ES6 class because classes are the first-class citizens in ES6. Using classes, you can leverage Object-oriented features like inheritance, composition, and reusability.

Use $Exact to make type spreading safe JS-0508
Anti-pattern

Prefer that the object types that are spread to be exact type explicitly.

Prefer to use $window instead of window JS-0569
Anti-pattern

Instead of the default window object, prefer the AngularJS wrapper service $window. Rule based on Angular 1.x

Require and specify a prefix for all controller names JS-0535
Anti-pattern

It is recommended to use a consistent prefix across all controllers. The recommended way to name controllers ares:

  • Controllers should be named after their feature
  • Controllers should use UpperCamelCase, as they are constructors
Require and specify a prefix for all value names JS-0543
Anti-pattern

All your values should have a name starting with the parameter you can define in your config object. The second parameter can be a Regexp wrapped in quotes. You can not prefix your values by "$" (reserved keyword for AngularJS services) Rule based on Angular 1.x

Specify a consistent function style for components JS-0547
Anti-pattern

Anonymous or named functions inside AngularJS components. The first parameter sets which type of function is required and can be 'named' or 'anonymous'. The second parameter is an optional list of angular object names. Rule based on Angular 1.x