Skip to content

Instantly share code, notes, and snippets.

@kievechua
Last active February 8, 2017 06:55
Show Gist options
  • Save kievechua/42f7f4d4aaa2e409f701 to your computer and use it in GitHub Desktop.
Save kievechua/42f7f4d4aaa2e409f701 to your computer and use it in GitHub Desktop.
ES6 Reverse Module - ES6 Module is a little hard to scan, can we put module in front instead?
/* Just create out of frustration, it's hard for me to scan through the line to add an item.
For example I want to add react-bootstrap component "Alert".
It's easier to use the proposed version to scan through and add in.
Also it can be sorted, if not multi line.
Might need to some thinking on the syntax. */
// Current
import { Breadcrumb } from 'components';
import connectData from 'helpers/connectData';
import {
FormControls, Input,
Breadcrumb, alert
} from 'react-bootstrap';
import DocumentMeta from 'react-document-meta';
import { connect } from 'react-redux';
import React, { Component, PropTypes } from 'react';
import { initializeWithKey} from 'redux-form';
import { isLoaded, load as loadUser } from 'redux/modules/auth';
import * as userActions from 'redux/modules/auth';
// Proposed
from 'components' import { Breadcrumb };
from 'helpers/connectData' import connectData;
from 'react-bootstrap' import {
FormControls, Input,
Breadcrumb, alert
};
from 'react-document-meta' import DocumentMeta;
from 'react-redux' import { connect };
from 'react' import React, { Component, PropTypes };
from 'redux-form' import { initializeWithKey};
from 'redux/modules/auth' import { isLoaded, load as loadUser };
from 'redux/modules/auth' import * as userActions;
@kievechua
Copy link
Author

This plugin help relief my pain a little :)
https://atom.io/packages/atom-import-sort

@saginadir
Copy link

I feel the same pain. You are the first person I see writes about it.

I really like the "elm" notation which makes a lot of sense, Here's an example with a theoretical Math module:

import Math exposing (round, ceil, floor)

floor 4.68 
// 4

Or

import Math exposing (..)

floor 4.68

This way I get autocomplete for the packages I want to import, helps tons.

I wonder where it stands in the JS community.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment