Import order

[benjervis]

To keep things nice and readable, it's a bit nicer if the imports are split into packages, siblings, and other local, and alphabetised within their groups. This rule enforces that (which tbh we were doing most of the time anyway)

[mattcompiles]

Is this fixable? If it's not it's a no from me lol

[benjervis]

Yes, can be --fixed

[michaeltaranto]

Can we ensure that we test this out with a web app. I have concerns around the ordering around things like importing the css reset, and other css related files that may have a side effect from their ordering.

It might be ok, but i'd want to be certain before making it a standard.

[72636c]

Yeah we've tested that. Should've linked this: https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/order.md

Unassigned imports are ignored, as the order they are imported in may be important.

We should also bump eslint-plugin-import to ^2.20.0 as there was surprising formatting behaviour in previous versions: import-js/eslint-plugin-import#1562 (comment)

[72636c]

A bit more testing on the frontend led me to:

Suggested change

	'import/order': [ERROR, { 'newlines-between': 'always' }],
	'import/order': [
	ERROR,
	{
	alphabetize: {
	order: 'asc',
	},
	'newlines-between': 'always',
	pathGroups: [
	{
	pattern: 'src/**',
	group: 'external',
	position: 'after',
	},
	],
	pathGroupsExcludedImportTypes: [
	{
	pattern: 'src/**',
	group: 'external',
	position: 'after',
	},
	],
	},
	],

Which is scary (the pathGroups don't seem to work very intuitively) but nets

// doesn't touch this
import 'braid-design-system/reset';

import { BraidLoadableProvider } from 'braid-design-system';

import { Header } from 'src/components/Header';

import * as styleRefs from './App.treat.ts';

[mattcompiles]

Was looking at this as well. Not sure pattern: 'src/**' makes sense though as not all projects use src and some have other top-level folders.

[benjervis]

Closing this out, as it will need to be implemented directly in sku/smt