JS-0249 · Use sorted import declarations within modules

Use sorted import declarations within modules JS-0249

Anti-pattern

Minor

2 years ago — 2 years old

Expected 'none' syntax before 'single' syntax

 1import React, {useState, useEffect} from 'react'
 2import axios from 'axios'
 3import './App.css' 4import './Tx'
 5import Tx from './Tx';
 6

Member 'useEffect' of the import declaration should be sorted alphabetically

src/App.js

 1import React, {useState, useEffect} from 'react' 2import axios from 'axios'
 3import './App.css'
 4import './Tx'

Imports should be sorted alphabetically

src/index.js

 1import React from 'react';
 2import ReactDOM from 'react-dom';
 3import App from './App'; 4
 5ReactDOM.render(
 6  <React.StrictMode>

Imports should be sorted alphabetically

src/Tx.js

 2import './Tx.css'
 3import 'bootstrap/dist/css/bootstrap.css';
 4import Row from 'react-bootstrap/Row';
 5import Col from 'react-bootstrap/Col'; 6
 7
 8const Tx = ({ transaction, time, symbol, amt_out, base_price, swappedSymbol, amt_in, quote_price, amt_usd, amm }) => {

Expected 'none' syntax before 'single' syntax

src/Tx.js

 1import React from 'react';
 2import './Tx.css' 3import 'bootstrap/dist/css/bootstrap.css';
 4import Row from 'react-bootstrap/Row';
 5import Col from 'react-bootstrap/Col';

Description

The import statement is used to import members (functions, objects or primitives) that have been exported from an external module. Using a specific member syntax:

// single - Import single member.
import myMember from "my-module.js";

// multiple - Import multiple members.
import {foo, bar} from "my-module.js";

// all - Import all members, where myModule contains all the exported bindings.
import * as myModule from "my-module.js";

The import statement can also import a module without exported bindings. Used when the module does not export anything, but runs it own code or changes the global context object.

// none - Import module without exported bindings.
import "my-module.js"

When declaring multiple imports, a sorted list of import declarations make it easier for developers to read the code and find necessary imports later. This rule is purely a matter of style.

Bad Practice

import b from 'foo.js';
import a from 'bar.js';

import a from 'foo.js';
import A from 'bar.js';

import {b, c} from 'foo.js';
import {a, b} from 'bar.js';

import a from 'foo.js';
import {b, c} from 'bar.js';

import a from 'foo.js';
import * as b from 'bar.js';

import {b, a, c} from 'foo.js'

import 'module-without-export.js';
import * as bar from 'bar.js';
import * as foo from 'foo.js';
import {alpha, beta} from 'alpha.js';
import {delta, gamma} from 'delta.js';
import a from 'baz.js';
import b from 'qux.js';

import a from 'foo.js';
import b from 'bar.js';
import c from 'baz.js';

import 'foo.js'
import * as bar from 'bar.js';
import {a, b} from 'baz.js';
import c from 'qux.js';

import {a, b, c} from 'foo.js'

LucidSamuel / Defi-Portfolio

Bad Practice

Recommended