JavaScript

JavaScript

By DeepSource

Consider Using PascalCase for user-defined JSX components JS-0426
Style

It is recommended to use PascalCase for user-defined React JSX components since it uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.

Prefer using self closing instead of closing tag for components having no children JS-0468
Style
Autofix

Components without children can be self-closed to avoid the unnecessary extra closing tag. In JSX, closing tags are required when the component has children example <MyComponent>...</MyComponent> and if there are no child component between these tags, then this component can be self closed using <MyComponent />. It is recommended as it improves readability, and it is more compact to use self-closing for these types of components.

Found redundant naming for modules JS-0238
Style
Autofix

ES2015 allows for the renaming of references in import and export statements as well as destructuring assignments. This gives programmers a concise syntax for performing these operations while renaming these references.

Prevent usage of string literals in JSX JS-0420
Style

The issue is raised when the analyzer encounters a string literal inside a react component. We recommend wrapping the string literals in a JSX Container, e.g., {'Text'}.

Use reference modules with the getter syntax JS-0514
Style

When using a module, avoid using a variable and instead use chaining with the getter syntax. It produces readable code and avoids variable collisions or leaks.