feat: enforce consistent imports with import/order

[AriPerkkio]

• Adds new rule import/order: https://github.com/un-ts/eslint-plugin-import-x/blob/master/docs/rules/order.md
• Ref. chore(style): minor code style adjustments for improved consistency tutorialkit#152

Example:

// Before
import utils from "./utils";
import { test } from "vitest"
import messages from "../util/messages"
import fs from "fs";
import json from "./json";

// After
import fs from 'fs';                     // Group: Built in module
import { test } from 'vitest';           // Group: 3rd party dependency
import messages from '../util/messages'; // Group: Relative files, sorted asc
import json from './json';               // Group: Relative files, sorted asc
import utils from './utils';             // Group: Relative files, sorted asc

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation if applicable
• I have added tests for this change

[AriPerkkio]

@d3lm any thought about adding https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/prefer-node-protocol.md? It would enforce consistent Node built-in imports, e.g. import 'fs' -> import 'node:fs'.

[d3lm]

Yep, I'd be fine with adding prefer-node-protocol I think that's a good thing and makes it easier which modules are Node builtins vs 3rd party deps.

[d3lm]

Can we double check if it works correctly that it doesn't re-order imports that are separated by newlines? So that each block of imports is independently sorted and not all imports are sorted / grouped? There is often the use case to have say .css imports in a separate block to group them a bit by JS and styles for instance.

[AriPerkkio]

Yep, this is allowed:

import fs from 'fs';
import { test } from 'vitest';
import messages from '../util/messages';
import json from './json';
import utils from './utils';

import './side-effects';
import './some.css';

Looks like this is nicely configurable: https://github.com/un-ts/eslint-plugin-import-x/blob/master/docs/rules/order.md#newlines-between-ignorealwaysalways-and-inside-groupsnever

[d3lm]

Very cool!

[d3lm]

The only thing would be that I can prolly no longer use the "organize imports" in VSC since it doesn't match the ordering of this plugin. That's very unfortunate cause it's so easy but I guess the plugin provides a fixer?

[AriPerkkio]

Yup, there's autofix! Just run ESLint autofixes on save and it provides similar experience.

[d3lm]

Okay, I guess I can re-map maybe that shortcut to run eslint or something. I have to look into it unless you know if that's possible.

[AriPerkkio]

I've used just ESLint and prettier plugins for sorting the imports. IDE's modifying code is not consistent across all developers so I try to avoid those. 😄

[d3lm]

There's conflicts here as well in the lock file. I suppose we can just re-genrate it.

[d3lm]

If we resolve the conflict in the lock file this is good to go! 🙏 🔥