build: enforce sort-imports eslint rule (#1147)

Author: aryanshridhar

.eslintrc.js

@@ -11,12 +11,21 @@ const config = {
     react: {
       version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
     },
+    'import/resolver': {
+      // Allows eslint-plugin-import to detect resolved imports
+      typescript: {
+        project: './tsconfig.json',
+      },
+    },
   },
   extends: [
     'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
     'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
     'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+    'plugin:import/recommended', // Used along with eslint-plugin-import to sort imports with recommended standards
+    'plugin:import/typescript', // To handle import order cases for typescript files
   ],
+  plugins: ['import'],
   rules: {
     // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
     // e.g. "@typescript-eslint/explicit-function-return-type": "off",
@@ -26,6 +35,47 @@ const config = {
     '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/no-var-requires': 'off',
     '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+    'sort-imports': [
+      'error',
+      {
+        ignoreCase: false,
+        ignoreDeclarationSort: true, // use eslint-plugin-import to handle this rule
+        ignoreMemberSort: false,
+        memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
+        allowSeparatedGroups: true,
+      },
+    ],
+    'import/no-named-as-default-member': 'off',
+    'import/namespace': 'off',
+    'import/order': [
+      'error',
+      {
+        groups: [
+          'builtin', // Built-in imports
+          'external', // External imports
+          'internal', // Absolute imports
+          ['sibling', 'parent'], // Relative imports
+          'index', // index imports
+          'unknown',
+        ],
+        // Keep all the `react` imports at the top level
+        pathGroups: [
+          {
+            pattern: 'react',
+            group: 'builtin',
+            position: 'before',
+          },
+        ],
+        'newlines-between': 'always',
+        alphabetize: {
+          // sort in ascending order
+          order: 'asc',
+          caseInsensitive: true,
+        },
+        // Exclude `react` imports so that our custom pathGroups applies
+        pathGroupsExcludedImportTypes: ['react'],
+      },
+    ],
   },
   // the static folder is linted by standard
   ignorePatterns: ['/out', '/.webpack', '/coverage', '/static'],

forge.config.js

@@ -1,5 +1,6 @@
-const path = require('path');
 const fs = require('fs');
+const path = require('path');
+
 const packageJson = require('./package.json');
 const { maybeFetchContributors } = require('./tools/contributors');
 

package.json

@@ -9,6 +9,7 @@
     "contributors": "node ./tools/contributors.js",
     "lint:style": "stylelint  \"./src/less/*.less\" --fix",
     "lint:ts": "eslint \"./**/*.{ts,tsx}\" --fix",
+    "lint:js": "eslint \"./**/*.js\" --fix",
     "lint:templates": "standard \"static/**/*.js\" --fix",
     "lint:links": "node ./tools/check-links.js",
     "lint": "npm-run-all \"lint:*\"",
@@ -106,6 +107,8 @@
     "enzyme-to-json": "^3.6.1",
     "eslint": "^7.21.0",
     "eslint-config-prettier": "^8.1.0",
+    "eslint-import-resolver-typescript": "^3.4.0",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "fetch-mock-jest": "^1.5.1",

rtl-spec/commands-address-bar.spec.tsx

@@ -1,13 +1,13 @@
-import { StateMock } from '../tests/mocks/state';
-
 import React from 'react';
+
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { runInAction } from 'mobx';
 
+import { GistActionState } from '../src/interfaces';
 import { AddressBar } from '../src/renderer/components/commands-address-bar';
 import { AppState } from '../src/renderer/state';
-import { GistActionState } from '../src/interfaces';
-import { runInAction } from 'mobx';
+import { StateMock } from '../tests/mocks/state';
 
 describe('AddressBar component', () => {
   let store: StateMock;

rtl-spec/commands-bisect.spec.tsx

@@ -1,6 +1,8 @@
+import * as React from 'react';
+
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import * as React from 'react';
+
 import { VersionState } from '../src/interfaces';
 import { BisectHandler } from '../src/renderer/components/commands-bisect';
 import { AppState } from '../src/renderer/state';

src/ambient.d.ts

@@ -1,6 +1,7 @@
-import { App } from './renderer/app';
 import * as MonacoType from 'monaco-editor';
 
+import { App } from './renderer/app';
+
 declare global {
   interface Window {
     ElectronFiddle: {

src/main/about-panel.ts

@@ -1,6 +1,9 @@
 import * as path from 'path';
+
 import { app } from 'electron';
+
 import { Contributor } from 'src/interfaces';
+
 import contributorsJSON from '../../static/contributors.json';
 
 /**

src/main/command-line.ts

@@ -1,6 +1,7 @@
+import * as os from 'os';
+
 import * as commander from 'commander';
 import * as fs from 'fs-extra';
-import * as os from 'os';
 import getos from 'getos';
 
 import {

src/main/context-menu.ts

@@ -4,6 +4,7 @@ import {
   Menu,
   MenuItemConstructorOptions,
 } from 'electron';
+
 import { IpcEvents } from '../ipc-events';
 import { isDevMode } from '../utils/devmode';
 import { ipcMainManager } from './ipc';

src/main/dialogs.ts

@@ -1,4 +1,5 @@
-import { dialog, IpcMainEvent } from 'electron';
+import { IpcMainEvent, dialog } from 'electron';
+
 import { IpcEvents } from '../ipc-events';
 import { ipcMainManager } from './ipc';
 import { getOrCreateMainWindow } from './windows';