Lint imports (#2369)

* Add recommended eslint configuration * Add new lint configuration to templates, cmra, and Modular project * Documentation & changeset * Remove repo-integrity test (duplicate of integration tests) & update snapshots
jpmorganchase · May 3, 2023 · 3141f92 · 3141f92
1 parent 2ca7fcd
commit 3141f92
Show file tree

Hide file tree

Showing 147 changed files with 354 additions and 537 deletions.
diff --git a/.changeset/proud-ghosts-study.md b/.changeset/proud-ghosts-study.md
@@ -0,0 +1,12 @@
+---
+'modular-template-app': major
+'modular-template-esm-view': major
+'modular-template-package': major
+'modular-template-source': major
+'modular-template-view': major
+'create-modular-react-app': minor
+'eslint-config-modular-app': minor
+---
+
+Added new recommended eslint configuration that includes import sorting -
+"modular-app/recommended"
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -10,7 +10,7 @@ const WARN = 'warn';
 const OFF = 'off';
 
 module.exports = {
-  extends: ['modular-app'],
+  extends: ['modular-app/recommended'],
   rules: {
     strict: [WARN, 'global'],
     'import/no-extraneous-dependencies': ['error', { devDependencies: false }],
@@ -31,7 +31,7 @@ module.exports = {
     },
     {
       // if we want to use js in this repo, then they have
-      // to be explitly marked as modules
+      // to be explicitly marked as modules
       files: '**/*.js',
       parserOptions: {
         sourceType: 'script',

diff --git a/docs/concepts/linting.md b/docs/concepts/linting.md
@@ -25,6 +25,11 @@ named `.eslintrc.js` in your project's root folder with the following content:
       extends: "modular-app",
     }
 
+To get our recommended configuration, which includes linting of import
+statements, change the `extends` field in the eslint configuration (either in
+the project's `.eslintrc.js` or `package.json`'s `eslintConfig`) to
+"modular-app/recommended".
+
 That's it! Add your additional config to this file. Read more about
 [extending sharable configuration packages here](https://eslint.org/docs/user-guide/configuring/configuration-files#using-a-shareable-configuration-package).
 

diff --git a/packages/create-modular-react-app/src/__tests__/__snapshots__/index.test.ts.snap b/packages/create-modular-react-app/src/__tests__/__snapshots__/index.test.ts.snap
@@ -1,149 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`create-modular-react-app WHEN it sets up a project with prefer Offline SHOULD setup an app package.json correctly: 
-        Object {
-          "author": "?",
-          "dependencies": Object {},
-          "modular": Object {
-            "type": "app",
-          },
-          "name": "app",
-          "private": true,
-          "version": "0.1.0",
-        }
-       1`] = `
-{
-  "author": "?",
-  "modular": {
-    "type": "app",
-  },
-  "name": "app",
-  "private": true,
-  "version": "1.0.0",
-}
-`;
-
-exports[`create-modular-react-app WHEN it sets up a project with prefer Offline SHOULD setup an package.json correctly: 
-        Object {
-          "author": "?",
-          "browserslist": Object {
-            "development": Array [
-              "last 1 chrome version",
-              "last 1 firefox version",
-              "last 1 safari version",
-            ],
-            "production": Array [
-              ">0.2%",
-              "not dead",
-              "not op_mini all",
-            ],
-          },
-          "dependencies": Object {
-            "@testing-library/dom": "?",
-            "@testing-library/jest-dom": "?",
-            "@testing-library/react": "?",
-            "@testing-library/user-event": "?",
-            "@types/jest": "?",
-            "@types/node": "?",
-            "@types/react": "?",
-            "@types/react-dom": "?",
-            "eslint-config-modular-app": "?",
-            "modular-scripts": "?",
-            "prettier": "?",
-            "react": "?",
-            "react-dom": "?",
-            "typescript": "?",
-          },
-          "eslintConfig": Object {
-            "extends": "modular-app",
-          },
-          "license": "MIT",
-          "main": "index.js",
-          "modular": Object {
-            "type": "root",
-          },
-          "name": "test-repo",
-          "prettier": Object {
-            "printWidth": 80,
-            "proseWrap": "always",
-            "singleQuote": true,
-            "trailingComma": "all",
-          },
-          "private": true,
-          "scripts": Object {
-            "build": "modular build",
-            "lint": "modular lint",
-            "prettier": "prettier --write .",
-            "start": "modular start",
-            "test": "modular test",
-          },
-          "version": "1.0.0",
-          "workspaces": Array [
-            "packages/**",
-          ],
-        }
-       1`] = `
-{
-  "author": "?",
-  "browserslist": {
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version",
-    ],
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all",
-    ],
-  },
-  "dependencies": {
-    "@testing-library/dom": "?",
-    "@testing-library/jest-dom": "?",
-    "@testing-library/react": "?",
-    "@testing-library/user-event": "?",
-    "@types/jest": "?",
-    "@types/node": "?",
-    "@types/react": "?",
-    "@types/react-dom": "?",
-    "eslint-config-modular-app": "?",
-    "modular-scripts": "?",
-    "modular-template-app": "?",
-    "prettier": "?",
-    "react": "?",
-    "react-dom": "?",
-    "typescript": "?",
-  },
-  "eslintConfig": {
-    "extends": "modular-app",
-  },
-  "license": "MIT",
-  "main": "index.js",
-  "modular": {
-    "type": "root",
-  },
-  "name": "test-repo",
-  "prettier": {
-    "printWidth": 80,
-    "proseWrap": "always",
-    "singleQuote": true,
-    "trailingComma": "all",
-  },
-  "private": true,
-  "scripts": {
-    "build": "modular build",
-    "lint": "modular lint",
-    "prettier": "prettier --write .",
-    "start": "modular start",
-    "test": "modular test",
-  },
-  "version": "1.0.0",
-  "workspaces": [
-    "packages/**",
-  ],
-}
-`;
-
 exports[`create-modular-react-app WHEN it sets up a project with prefer Offline should create a project with prefer offline 1`] = `
 "test-repo
 ├─ .editorconfig
@@ -301,7 +157,7 @@ exports[`create-modular-react-app WHEN setting a project with defaults Sets up t
     "typescript": "?",
   },
   "eslintConfig": {
-    "extends": "modular-app",
+    "extends": "modular-app/recommended",
   },
   "license": "MIT",
   "main": "index.js",

diff --git a/packages/create-modular-react-app/src/__tests__/cli.test.ts b/packages/create-modular-react-app/src/__tests__/cli.test.ts
@@ -1,6 +1,6 @@
+import * as path from 'path';
 import execa from 'execa';
 import * as fs from 'fs-extra';
-import * as path from 'path';
 import * as tmp from 'tmp';
 import { hashlessTree } from 'tree-view-for-tests';
 

diff --git a/packages/create-modular-react-app/src/__tests__/index.test.ts b/packages/create-modular-react-app/src/__tests__/index.test.ts
@@ -1,8 +1,8 @@
-import createModularApp from '../';
-import fs from 'fs-extra';
 import path from 'path';
+import fs from 'fs-extra';
 import { hashlessTree } from 'tree-view-for-tests';
 import tmp from 'tmp';
+import createModularApp from '../';
 
 // We want to omit any information that makes our snapshots
 // fragile and therefore censor the author and package versions

diff --git a/packages/create-modular-react-app/src/__tests__/repo-integrity.test.ts b/packages/create-modular-react-app/src/__tests__/repo-integrity.test.ts
diff --git a/packages/create-modular-react-app/src/cli.ts b/packages/create-modular-react-app/src/cli.ts
@@ -1,9 +1,9 @@
 #!/usr/bin/env node
 
-import createModularApp from './';
 import { program } from 'commander';
 import * as fs from 'fs-extra';
 import type { JSONSchemaForNPMPackageJsonFiles as PackageJson } from '@schemastore/package';
+import createModularApp from './';
 
 // this is a bit gross - but there's no better way of doing this.
 const verbose = process.argv.includes('--verbose');

diff --git a/packages/create-modular-react-app/src/index.ts b/packages/create-modular-react-app/src/index.ts
@@ -1,10 +1,10 @@
-import type { JSONSchemaForNPMPackageJsonFiles as PackageJson } from '@schemastore/package';
 import { Transform } from 'stream';
+import * as path from 'path';
 import execa from 'execa';
 import * as fs from 'fs-extra';
-import * as path from 'path';
 import chalk from 'chalk';
 import * as semver from 'semver';
+import type { JSONSchemaForNPMPackageJsonFiles as PackageJson } from '@schemastore/package';
 
 function exec(
   file: string,
@@ -133,7 +133,7 @@ export default async function createModularApp(argv: {
       prettier: 'prettier --write .',
     },
     eslintConfig: {
-      extends: 'modular-app',
+      extends: 'modular-app/recommended',
     },
     browserslist: {
       production: ['>0.2%', 'not dead', 'not op_mini all'],

diff --git a/packages/eslint-config-modular-app/package.json b/packages/eslint-config-modular-app/package.json
@@ -8,6 +8,7 @@
   },
   "exports": {
     ".": "./index.js",
+    "./recommended": "./recommended.js",
     "./package.json": "./package.json"
   },
   "dependencies": {
@@ -22,7 +23,7 @@
     "babel-preset-react-app": "^10.0.1",
     "confusing-browser-globals": "^1.0.11",
     "eslint-plugin-flowtype": "^8.0.0",
-    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jest": "^27.0.0",
     "eslint-plugin-jest-dom": "^4.0.0",
     "eslint-plugin-jsx-a11y": "6.5.1",

diff --git a/packages/eslint-config-modular-app/recommended.js b/packages/eslint-config-modular-app/recommended.js
@@ -0,0 +1,45 @@
+'use strict';
+/**
+ * Stricter variant of the default index.js configuration
+ * * Adds import sorting rules
+ */
+
+module.exports = {
+  extends: [require.resolve('./index')],
+  overrides: [
+    {
+      files: ['**/*.ts?(x)', '**/*.js?(x)'],
+      rules: {
+        'no-multiple-empty-lines': 1,
+        'sort-imports': [
+          1,
+          {
+            ignoreDeclarationSort: true,
+            ignoreCase: true,
+          },
+        ],
+        'import/order': [
+          1,
+          {
+            groups: [
+              'builtin',
+              'external',
+              'internal',
+              ['parent', 'sibling'],
+              'type',
+            ],
+            pathGroups: [
+              {
+                pattern: 'react+(|-native)',
+                group: 'external',
+                position: 'before',
+              },
+            ],
+            pathGroupsExcludedImportTypes: ['react+(|-native'],
+            'newlines-between': 'never',
+          },
+        ],
+      },
+    },
+  ],
+};