[eslint] Enable import/sort rule

This provides consistency of how imports are order,
reducing differences in authored files.

Bug: none
Change-Id: I45ddd71e3e0004aca32f101cb926101544a34157
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6218490
Commit-Queue: Nikolay Vitkov <[email protected]>
Reviewed-by: Benedikt Meurer <[email protected]>

Author: Lightning00Blade

eslint.config.mjs

@@ -3,14 +3,15 @@
 // found in the LICENSE file.
 
 /* eslint-disable import/no-default-export */
+
+import stylisticPlugin from '@stylistic/eslint-plugin';
 import typescriptPlugin from '@typescript-eslint/eslint-plugin';
-import mochaPlugin from 'eslint-plugin-mocha';
-import rulesdirPlugin from 'eslint-plugin-rulesdir';
+import tsParser from '@typescript-eslint/parser';
 import importPlugin from 'eslint-plugin-import';
 import jsdocPlugin from 'eslint-plugin-jsdoc';
+import mochaPlugin from 'eslint-plugin-mocha';
+import rulesdirPlugin from 'eslint-plugin-rulesdir';
 import globals from 'globals';
-import tsParser from '@typescript-eslint/parser';
-import stylisticPlugin from '@stylistic/eslint-plugin';
 import { join } from 'path';
 
 rulesdirPlugin.RULES_DIR = join(
@@ -259,6 +260,24 @@ export default [
        * import * as FooModule from './foo.js'
        **/
       'import/no-duplicates': 'error',
+      /**
+       * Provides more consistency in the imports.
+       */
+      'import/order': [
+        'error',
+        {
+          // We need to group the builtin and external as clang-format
+          // can't differentiate the two
+          groups: [['builtin', 'external'], 'parent', 'sibling', 'index'],
+          'newlines-between': 'always',
+          // clang-format has it's own logic overriding this
+          named: false,
+          alphabetize: {
+            order: 'asc',
+            caseInsensitive: true,
+          },
+        },
+      ],
       // Try to spot '// console.log()' left over from debugging
       'rulesdir/no-commented-out-console': 'error',
       // Prevent imports being commented out rather than deleted.
@@ -283,11 +302,11 @@ export default [
       parserOptions: {
         allowAutomaticSingleRunInference: true,
         project: join(
-            import.meta.dirname,
-            'config',
-            'typescript',
-            'tsconfig.eslint.json',
-            ),
+          import.meta.dirname,
+          'config',
+          'typescript',
+          'tsconfig.eslint.json',
+        ),
       },
     },
 
@@ -476,12 +495,12 @@ export default [
         {
           // Enforce that any import of models/trace/trace.js names the import Trace.
           modulePath: join(
-              import.meta.dirname,
-              'front_end',
-              'models',
-              'trace',
-              'trace.js',
-              ),
+            import.meta.dirname,
+            'front_end',
+            'models',
+            'trace',
+            'trace.js',
+          ),
           importName: 'Trace',
         },
       ],

front_end/Images/generate-css-vars.js

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 const path = require('path');
+
 const {writeIfChanged} = require('../../scripts/build/ninja/write-if-changed.js');
 const [, , buildTimestamp, targetGenDir, targetName, ...imageSources] = process.argv;
 

front_end/core/common/Settings.ts

@@ -1396,14 +1396,14 @@ export function settingForTest(settingName: string): Setting<unknown> {
 export {
   getLocalizedSettingsCategory,
   maybeRemoveSettingExtension,
-  registerSettingExtension,
   RegExpSettingItem,
+  registerSettingExtension,
+  registerSettingsForTest,
+  resetSettings,
   SettingCategory,
   SettingExtensionOption,
   SettingRegistration,
   SettingType,
-  registerSettingsForTest,
-  resetSettings,
 };
 
 export interface Serializer<I, O> {

front_end/core/i18n/collect-ui-strings.js

@@ -4,15 +4,16 @@
 
 const glob = require('glob');
 const path = require('path');
+const yargs = require('yargs');
 
+const {writeIfChanged} = require('../../../scripts/build/ninja/write-if-changed.js');
+const {bakePlaceholders} = require('../../../third_party/i18n/bake-ctc-to-lhl.js');
 const {collectAllStringsInDir, createPsuedoLocaleStrings, IGNORED_PATH_COMPONENTS} =
     require('../../../third_party/i18n/collect-strings.js');
-const {bakePlaceholders} = require('../../../third_party/i18n/bake-ctc-to-lhl.js');
-const {writeIfChanged} = require('../../../scripts/build/ninja/write-if-changed.js');
 
 /** @typedef {import('../../../third_party/i18n/bake-ctc-to-lhl.js').CtcMessage} CtcMessage */
 
-const yargsObject = require('yargs')
+const yargsObject = yargs
                         .option('input-directories', {
                           type: 'array',
                           demandOption: true,
@@ -25,7 +26,7 @@ const yargsObject = require('yargs')
                           type: 'boolean',
                         })
                         .strict()
-                        .argv;
+                        .parseSync();
 
 /**
  * @param {string} outputDirectory

front_end/core/i18n/generate-locales-js.js

@@ -3,9 +3,11 @@
 // found in the LICENSE file.
 
 const path = require('path');
+const yargs = require('yargs');
+
 const {writeIfChanged} = require('../../../scripts/build/ninja/write-if-changed.js');
 
-const yargsObject = require('yargs')
+const yargsObject = yargs
                         .option('target-gen-dir', {
                           type: 'string',
                           demandOption: true,
@@ -31,7 +33,7 @@ const yargsObject = require('yargs')
                           demandOption: true,
                         })
                         .strict()
-                        .argv;
+                        .parseSync();
 
 const remoteLocaleList = yargsObject['remote-locales'].map(locale => `\n  '${locale}',`).join('');
 const bundledLocaleList = yargsObject['bundled-locales'].map(locale => `\n  '${locale}',`).join('');

front_end/core/protocol_client/InspectorBackend.ts

@@ -28,10 +28,11 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import {NodeURL} from './NodeURL.js';
-import type * as Platform from '../platform/platform.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import type * as Protocol from '../../generated/protocol.js';
+import type * as Platform from '../platform/platform.js';
+
+import {NodeURL} from './NodeURL.js';
 
 export const DevToolsStubErrorCode = -32015;
 // TODO(dgozman): we are not reporting generic errors in tests, but we should

front_end/core/protocol_client/protocol_client.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as InspectorBackendCommands from '../../generated/InspectorBackendCommands.js';
+
 import * as InspectorBackend from './InspectorBackend.js';
 import * as NodeURL from './NodeURL.js';
 

front_end/core/sdk/EmulationModel.ts

@@ -2,16 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Common from '../common/common.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import * as Protocol from '../../generated/protocol.js';
+import * as Common from '../common/common.js';
 
 import {CSSModel} from './CSSModel.js';
 import {MultitargetNetworkManager} from './NetworkManager.js';
 import {Events, OverlayModel} from './OverlayModel.js';
-
-import {Capability, type Target} from './Target.js';
 import {SDKModel} from './SDKModel.js';
+import {Capability, type Target} from './Target.js';
 
 export class EmulationModel extends SDKModel<void> {
   readonly #emulationAgent: ProtocolProxyApi.EmulationApi;

front_end/core/sdk/IOModel.ts

@@ -2,13 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * as Protocol from '../../generated/protocol.js';
 import * as Common from '../common/common.js';
 
 import {RemoteObject} from './RemoteObject.js';
-
-import {Capability, type Target} from './Target.js';
 import {SDKModel} from './SDKModel.js';
-import type * as Protocol from '../../generated/protocol.js';
+import {Capability, type Target} from './Target.js';
 
 export class IOModel extends SDKModel<void> {
   constructor(target: Target) {

front_end/core/sdk/IssuesModel.ts

@@ -5,8 +5,11 @@
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import type * as Protocol from '../../generated/protocol.js';
 
-import {Capability, type Target} from './Target.js';
 import {SDKModel} from './SDKModel.js';
+import {
+  Capability,
+  type Target,
+} from './Target.js';
 
 /**
  * The `IssuesModel` is a thin dispatch that does not store issues, but only creates the representation