fix: make type-imports autofixable & general project cleanup (#1217)

.changeset/fast-sheep-teach.md

@@ -0,0 +1,5 @@
+---
+"create-t3-app": patch
+---
+
+fix: add autofix to eslint type rule

.eslintrc.cjs

@@ -1,57 +1,46 @@
+/** @type {import("eslint").Linter.Config} */
 module.exports = {
-  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
-  plugins: [
-    // Provides extra useful rules:
-    // https://github.com/IsaacScript/isaacscript/tree/main/packages/eslint-plugin-isaacscript
-    "isaacscript",
-  ],
+  root: true,
+  parser: "@typescript-eslint/parser",
+  plugins: ["isaacscript", "import"],
   extends: [
     "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
     "plugin:prettier/recommended",
   ],
-  overrides: [
-    {
-      extends: [
-        "plugin:@typescript-eslint/recommended-requiring-type-checking",
-      ],
-      files: ["*.ts", "*.tsx"],
-      parserOptions: {
-        project: "tsconfig.json",
-      },
-      rules: {
-        "@typescript-eslint/require-await": "off",
-        "@typescript-eslint/restrict-plus-operands": "off",
-        "@typescript-eslint/restrict-template-expressions": "off",
-
-        // These rules are only disabled because we hit a bug in linting.
-        // See https://github.com/t3-oss/create-t3-app/pull/1036#discussion_r1060505136
-        // If you still see the bug once TypeScript@5 is used, please let typescript-eslint know!
-        "@typescript-eslint/no-unsafe-argument": "off",
-        "@typescript-eslint/no-unsafe-assignment": "off",
-        "@typescript-eslint/no-unsafe-call": "off",
-        "@typescript-eslint/no-unsafe-call": "off",
-        "@typescript-eslint/no-unsafe-member-access": "off",
-        "@typescript-eslint/no-unsafe-return": "off",
-      },
-    },
-  ],
   parserOptions: {
-    ecmaVersion: "latest", // Allows for the parsing of modern ECMAScript features
-    sourceType: "module", // Allows for the use of import
-    project: "./tsconfig.eslint.json", // Allows for the use of rules which require parserServices to be generated
+    ecmaVersion: "latest",
+    sourceType: "module",
+    tsconfigRootDir: __dirname,
+    project: [
+      "./tsconfig.json",
+      "./cli/tsconfig.eslint.json", // separate eslint config for the CLI since we want to lint and typecheck differently due to template files
+      "./www/tsconfig.json",
+    ],
   },
   rules: {
-    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs.
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/restrict-template-expressions": "off",
     "@typescript-eslint/no-unused-vars": [
       "error",
       { argsIgnorePattern: "^_", destructuredArrayIgnorePattern: "^_" },
     ],
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      { prefer: "type-imports", fixStyle: "inline-type-imports" },
+    ],
+    "import/consistent-type-specifier-style": ["error", "prefer-inline"],
+
+    // These rules are only disabled because we hit a bug in linting.
+    // See https://github.com/t3-oss/create-t3-app/pull/1036#discussion_r1060505136
+    // If you still see the bug once TypeScript@5 is used, please let typescript-eslint know!
+    "@typescript-eslint/no-unsafe-argument": "off",
+    "@typescript-eslint/no-unsafe-assignment": "off",
+    "@typescript-eslint/no-unsafe-call": "off",
+    "@typescript-eslint/no-unsafe-member-access": "off",
+    "@typescript-eslint/no-unsafe-return": "off",
+    "@typescript-eslint/no-unnecessary-type-assertion": "off",
 
-    // These rules auto-format comments, similar to how Prettier auto-formats code. For more
-    // information, see:
-    // https://github.com/IsaacScript/isaacscript/blob/main/packages/eslint-plugin-isaacscript/docs/comments.md
+    // For educational purposes we format our comments/jsdoc nicely
     "isaacscript/complete-sentences-jsdoc": "warn",
     "isaacscript/format-jsdoc-comments": "warn",
   },

.github/workflows/translations.yml

@@ -45,13 +45,17 @@ jobs:
               "zh-hans": ["fernandoxu", "lodisy"],
             };
 
+            console.log("Changed languages:", changedLanguages)
+
             const formattedString = changedLanguages
               .map(
                 (lang) =>
-                  `${lang.toUpperCase()}: ${CODEOWNERS[lang].map((user) => `@${user}`).join(", ")}`,
+                  `${lang.toUpperCase()}: ${(CODEOWNERS[lang] || []).map((user) => `@${user}`).join(", ")}`,
               )
               .join("  |  "); // cause we can't linebreak in env vars
 
+            console.log("Formatted string:", formattedString)
+
             require("fs").appendFileSync(
               process.env.GITHUB_ENV,
               `\nCODEOWNERS=${formattedString}`,

.prettierrc.cjs

@@ -1,3 +1,4 @@
+/** @type {import('prettier').Config} */
 module.exports = {
   arrowParens: "always",
   printWidth: 80,

.vscode/settings.json

@@ -7,6 +7,14 @@
   "editor.rulers": [100],
   "editor.tabSize": 2,
 
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "astro",
+    "typescript",
+    "typescriptreact"
+  ],
+
   "eslint.rules.customizations": [{ "rule": "*", "severity": "warn" }],
   "typescript.tsdk": "node_modules/typescript/lib",
   "prettier.documentSelectors": [

cli/package.json

@@ -31,9 +31,10 @@
     "dev": "tsup --watch",
     "clean": "rm -rf dist .turbo node_modules",
     "start": "node dist/index.js",
-    "lint": "eslint src --report-unused-disable-directives",
-    "format": "prettier --write --plugin-search-dir=. **/*.{cjs,mjs,ts,tsx,md,json} --ignore-path ../.gitignore",
-    "format:check": "prettier --check --plugin-search-dir=. **/*.{cjs,mjs,ts,tsx,md,json} --ignore-path ../.gitignore",
+    "lint": "eslint . --report-unused-disable-directives",
+    "lint:fix": "pnpm lint --fix",
+    "format": "prettier --write --plugin-search-dir=. **/*.{cjs,mjs,ts,tsx,md,json} --ignore-path ../.gitignore --ignore-unknown --no-error-on-unmatched-pattern",
+    "format:check": "pnpm format --check",
     "release": "changeset version",
     "pub:beta": "pnpm build && npm publish --tag beta",
     "pub:next": "pnpm build && npm publish --tag next",

cli/src/cli/index.ts

@@ -1,4 +1,4 @@
-import type { AvailablePackages } from "~/installers/index.js";
+import { type AvailablePackages } from "~/installers/index.js";
 import { availablePackages } from "~/installers/index.js";
 import chalk from "chalk";
 import { Command } from "commander";
@@ -179,6 +179,7 @@ export const runCli = async () => {
     // If the user is not calling create-t3-app from an interactive terminal, inquirer will throw an error with isTTYError = true
     // If this happens, we catch the error, tell the user what has happened, and then continue to run the program with a default t3 app
     // Otherwise we have to do some fancy namespace extension logic on the Error type which feels overkill for one line
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     if (err instanceof Error && (err as any).isTTYError) {
       logger.warn(
         `${CREATE_T3_APP} needs an interactive terminal to provide options`,

cli/src/helpers/createProject.ts

@@ -1,4 +1,4 @@
-import type { PkgInstallerMap } from "~/installers/index.js";
+import { type PkgInstallerMap } from "~/installers/index.js";
 import path from "path";
 import { installPackages } from "~/helpers/installPackages.js";
 import { scaffoldProject } from "~/helpers/scaffoldProject.js";

cli/src/helpers/installDependencies.ts

@@ -1,9 +1,9 @@
 import chalk from "chalk";
 import { execa } from "execa";
-import ora, { Ora } from "ora";
+import ora, { type Ora } from "ora";
 import {
   getUserPkgManager,
-  PackageManager,
+  type PackageManager,
 } from "~/utils/getUserPkgManager.js";
 import { logger } from "~/utils/logger.js";
 

cli/src/helpers/installPackages.ts

@@ -1,4 +1,7 @@
-import type { InstallerOptions, PkgInstallerMap } from "~/installers/index.js";
+import {
+  type InstallerOptions,
+  type PkgInstallerMap,
+} from "~/installers/index.js";
 import chalk from "chalk";
 import ora from "ora";
 import { logger } from "~/utils/logger.js";

cli/src/helpers/logNextSteps.ts

@@ -1,4 +1,4 @@
-import type { InstallerOptions } from "~/installers/index.js";
+import { type InstallerOptions } from "~/installers/index.js";
 import { DEFAULT_APP_NAME } from "~/consts.js";
 import { getUserPkgManager } from "~/utils/getUserPkgManager.js";
 import { logger } from "~/utils/logger.js";

cli/src/helpers/scaffoldProject.ts

@@ -4,7 +4,7 @@ import fs from "fs-extra";
 import inquirer from "inquirer";
 import ora from "ora";
 import { PKG_ROOT } from "~/consts.js";
-import { InstallerOptions } from "~/installers/index.js";
+import { type InstallerOptions } from "~/installers/index.js";
 import { logger } from "~/utils/logger.js";
 
 // This bootstraps the base Next.js application

cli/src/helpers/selectBoilerplate.ts

@@ -1,4 +1,4 @@
-import type { InstallerOptions } from "~/installers/index.js";
+import { type InstallerOptions } from "~/installers/index.js";
 import path from "path";
 import fs from "fs-extra";
 import { PKG_ROOT } from "~/consts.js";

cli/src/helpers/setImportAlias.ts

@@ -20,10 +20,7 @@ function replaceTextInFiles(
   });
 }
 
-export const setImportAlias = async (
-  projectDir: string,
-  importAlias: string,
-) => {
+export const setImportAlias = (projectDir: string, importAlias: string) => {
   const normalizedImportAlias = importAlias
     .replace(/\*/g, "") // remove any wildcards (~/* -> ~/)
     .replace(/[^\/]$/, "$&/"); // ensure trailing slash (@ -> ~/)

cli/src/index.ts

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-import type { PackageJson } from "type-fest";
+import { type PackageJson } from "type-fest";
 import path from "path";
 import fs from "fs-extra";
 import { runCli } from "~/cli/index.js";
@@ -60,7 +60,7 @@ const main = async () => {
 
   // update import alias in any generated files if not using the default
   if (importAlias !== "~/") {
-    await setImportAlias(projectDir, importAlias);
+    setImportAlias(projectDir, importAlias);
   }
 
   if (!noInstall) {
@@ -71,6 +71,12 @@ const main = async () => {
     await initializeGit(projectDir);
   }
 
+  // Rename _eslintrc.json to .eslintrc.json - we use _eslintrc.json to avoid conflicts with the monorepos linter
+  fs.renameSync(
+    path.join(projectDir, "_eslintrc.json"),
+    path.join(projectDir, ".eslintrc.json"),
+  );
+
   logNextSteps({ projectName: appDir, packages: usePackages, noInstall });
 
   process.exit(0);

cli/src/installers/envVars.ts

@@ -1,4 +1,4 @@
-import type { Installer } from "~/installers/index.js";
+import { type Installer } from "~/installers/index.js";
 import path from "path";
 import fs from "fs-extra";
 import { PKG_ROOT } from "~/consts.js";

cli/src/installers/index.ts

@@ -1,4 +1,4 @@
-import type { PackageManager } from "~/utils/getUserPkgManager.js";
+import { type PackageManager } from "~/utils/getUserPkgManager.js";
 import { envVariablesInstaller } from "~/installers/envVars.js";
 import { nextAuthInstaller } from "~/installers/nextAuth.js";
 import { prismaInstaller } from "~/installers/prisma.js";

cli/src/installers/nextAuth.ts

@@ -1,5 +1,5 @@
-import type { Installer } from "~/installers/index.js";
-import { AvailableDependencies } from "~/installers/dependencyVersionMap.js";
+import { type Installer } from "~/installers/index.js";
+import { type AvailableDependencies } from "~/installers/dependencyVersionMap.js";
 import path from "path";
 import fs from "fs-extra";
 import { PKG_ROOT } from "~/consts.js";

cli/src/installers/prisma.ts

@@ -1,5 +1,5 @@
-import type { PackageJson } from "type-fest";
-import type { Installer } from "~/installers/index.js";
+import { type PackageJson } from "type-fest";
+import { type Installer } from "~/installers/index.js";
 import path from "path";
 import fs from "fs-extra";
 import { PKG_ROOT } from "~/consts.js";
@@ -33,7 +33,10 @@ export const prismaInstaller: Installer = ({ projectDir, packages }) => {
   const packageJsonPath = path.join(projectDir, "package.json");
 
   const packageJsonContent = fs.readJSONSync(packageJsonPath) as PackageJson;
-  packageJsonContent.scripts!.postinstall = "prisma generate";
+  packageJsonContent.scripts = {
+    ...packageJsonContent.scripts,
+    postinstall: "prisma generate",
+  };
 
   fs.copySync(schemaSrc, schemaDest);
   fs.copySync(clientSrc, clientDest);

cli/src/installers/tailwind.ts

@@ -1,4 +1,4 @@
-import type { Installer } from "~/installers/index.js";
+import { type Installer } from "~/installers/index.js";
 import path from "path";
 import fs from "fs-extra";
 import { PKG_ROOT } from "~/consts.js";

cli/src/installers/trpc.ts

@@ -2,7 +2,7 @@ import fs from "fs-extra";
 import path from "path";
 import { PKG_ROOT } from "~/consts.js";
 import { addPackageDependency } from "~/utils/addPackageDependency.js";
-import type { Installer } from "~/installers/index.js";
+import { type Installer } from "~/installers/index.js";
 
 export const trpcInstaller: Installer = ({ projectDir, packages }) => {
   addPackageDependency({

cli/src/utils/addPackageDependency.ts

@@ -3,7 +3,7 @@ import fs from "fs-extra";
 import { type PackageJson } from "type-fest";
 import {
   dependencyVersionMap,
-  AvailableDependencies,
+  type AvailableDependencies,
 } from "~/installers/dependencyVersionMap.js";
 import sortPackageJson from "sort-package-json";
 
@@ -21,10 +21,10 @@ export const addPackageDependency = (opts: {
   dependencies.forEach((pkgName) => {
     const version = dependencyVersionMap[pkgName];
 
-    if (devMode) {
-      pkgJson.devDependencies![pkgName] = version;
-    } else {
-      pkgJson.dependencies![pkgName] = version;
+    if (devMode && pkgJson.devDependencies) {
+      pkgJson.devDependencies[pkgName] = version;
+    } else if (pkgJson.dependencies) {
+      pkgJson.dependencies[pkgName] = version;
     }
   });
   const sortedPkgJson = sortPackageJson(pkgJson);

cli/src/utils/getT3Version.ts

@@ -1,4 +1,4 @@
-import type { PackageJson } from "type-fest";
+import { type PackageJson } from "type-fest";
 import path from "path";
 import fs from "fs-extra";
 import { PKG_ROOT } from "~/consts.js";

cli/template/base/.eslintrc.json → cli/template/base/_eslintrc.json

@@ -17,6 +17,12 @@
   "plugins": ["@typescript-eslint"],
   "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
   "rules": {
-    "@typescript-eslint/consistent-type-imports": "warn"
+    "@typescript-eslint/consistent-type-imports": [
+      "warn",
+      {
+        "prefer": "type-imports",
+        "fixStyle": "inline-type-imports"
+      }
+    ]
   }
 }

cli/template/extras/src/env/with-auth-prisma.mjs

@@ -1,8 +1,8 @@
 import { z } from "zod";
 
 /**
- * Specify your server-side environment variables schema here.
- * This way you can ensure the app isn't built with invalid env vars.
+ * Specify your server-side environment variables schema here. This way you can ensure the app isn't
+ * built with invalid env vars.
  */
 const server = z.object({
   DATABASE_URL: z.string().url(),
@@ -24,17 +24,17 @@ const server = z.object({
 });
 
 /**
- * Specify your client-side environment variables schema here.
- * This way you can ensure the app isn't built with invalid env vars.
- * To expose them to the client, prefix them with `NEXT_PUBLIC_`.
+ * Specify your client-side environment variables schema here. This way you can ensure the app isn't
+ * built with invalid env vars. To expose them to the client, prefix them with `NEXT_PUBLIC_`.
  */
 const client = z.object({
   // NEXT_PUBLIC_CLIENTVAR: z.string().min(1),
 });
 
 /**
- * You can't destruct `process.env` as a regular object in the Next.js
- * edge runtimes (e.g. middlewares) or client-side so we need to destruct manually.
+ * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
+ * middlewares) or client-side so we need to destruct manually.
+ *
  * @type {Record<keyof z.infer<typeof server> | keyof z.infer<typeof client>, string | undefined>}
  */
 const processEnv = {