[Feature]: Add import/order rule to ESLint config

[g-elwell]

The feature

We should consider adding the import/order eslint rule, which enforces alphabetical module imports, use of 'import groups' and single line spacing between import groups.

Import groups include namespaced modules such as @wordpress packages, external/vs internal dependencies, components vs non-components, eg:

Before:

After:

This enhances readability of code and separating imports into groups is a practice most of the lead engineering team loosely follow by default already.

The alphabetical aspect is likely not currently implemented by most people, but in practice isn't as annoying as one might think. Although, applying the rule to existing code-bases is likely to flag up a lot of warnings/errors.

[ampersarnie]

Merging #111

---

The feature

To further bolster our working standards and to set some common styling across JS, it has been agreed that it would be worth adding the import/order rule to our ES Lint configuration.

There are additional configurations that need to be considered, however I believe (and this is personal preference) that we should follow this:

"import/order": [
  "error",
  {
    "alphabetize": "asc",
    "warnOnUnassignedImports": true,
    "newlines-between": "always",
    "pathGroups": [
      {
        "pattern": "@wordpress/**",
        "group": "builtin",
        "position": "before"
      }
    ],
  }
]

With this setup it do the following:

• groups will stick with the default ordering and grouping.
• pathGroups will ensure that all @wordpress packages are at the top of the document.
• warnOnUnassignedImports will ensure that imports such as a stylesheet are included in the right place.
• alphabetize ascending order.
• newlines-between additional spacing between groups.

Documentation: https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md

[g-elwell]

Having reviewed the docs, that config looks good to me