feat: add import order sorting via prettier

cli/.prettierrc.cjs

@@ -1,7 +1,10 @@
 /** @type {import('prettier').Config} */
 const config = {
  ...require("../.prettierrc.cjs"),
- plugins: [require.resolve("prettier-plugin-tailwindcss")],
+ plugins: [
+ require.resolve("@ianvs/prettier-plugin-sort-imports"),
+ require.resolve("prettier-plugin-tailwindcss"),
+ ],
  tailwindConfig: "./template/extras/config/tailwind.config.ts",
 };
 

cli/package.json

@@ -33,8 +33,8 @@
  "start": "node dist/index.js",
  "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",
+ "format": "pnpm format:check --write",
+ "format:check": "pnpm prettier --check --plugin-search-dir=. **/*.{cjs,mjs,ts,tsx,md,json} --ignore-path ../.gitignore --ignore-unknown --no-error-on-unmatched-pattern",
  "release": "changeset version",
  "pub:beta": "pnpm build && npm publish --tag beta",
  "pub:next": "pnpm build && npm publish --tag next",
@@ -51,6 +51,7 @@
  "sort-package-json": "^2.4.1"
  },
  "devDependencies": {
+ "@ianvs/prettier-plugin-sort-imports": "^3.7.2",
  "@prisma/client": "^4.11.0",
  "@tanstack/react-query": "^4.28.0",
  "@trpc/client": "^10.18.0",

cli/src/cli/index.ts

@@ -1,9 +1,11 @@
-import { type AvailablePackages } from "~/installers/index.js";
-import { availablePackages } from "~/installers/index.js";
 import chalk from "chalk";
 import { Command } from "commander";
 import inquirer from "inquirer";
 import { CREATE_T3_APP, DEFAULT_APP_NAME } from "~/consts.js";
+import {
+ availablePackages,
+ type AvailablePackages,
+} from "~/installers/index.js";
 import { getVersion } from "~/utils/getT3Version.js";
 import { getUserPkgManager } from "~/utils/getUserPkgManager.js";
 import { logger } from "~/utils/logger.js";
@@ -15,6 +17,7 @@ interface CliFlags {
  noInstall: boolean;
  default: boolean;
  importAlias: string;
+ strictEslintAndPrettier: boolean;
 
  /** @internal Used in CI. */
  CI: boolean;
@@ -47,6 +50,7 @@ const defaultOptions: CliResults = {
  prisma: false,
  nextAuth: false,
  importAlias: "~/",
+ strictEslintAndPrettier: false,
  },
 };
 
@@ -114,6 +118,11 @@ export const runCli = async () => {
  "Explicitly tell the CLI to use a custom import alias",
  defaultOptions.flags.importAlias,
  )
+ .option(
+ "-ep -eslint-pretteier",
+ "enable prettier and a strict eslint config",
+ defaultOptions.flags.strictEslintAndPrettier,
+ )
  /** END CI-FLAGS */
  .version(getVersion(), "-v, --version", "Display the version number")
  .addHelpText(
@@ -153,6 +162,8 @@ export const runCli = async () => {
  if (cliResults.flags.tailwind) cliResults.packages.push("tailwind");
  if (cliResults.flags.prisma) cliResults.packages.push("prisma");
  if (cliResults.flags.nextAuth) cliResults.packages.push("nextAuth");
+ if (cliResults.flags.strictEslintAndPrettier)
+ cliResults.packages.push("strictEslintAndPrettier");
  }
 
  // Explained below why this is in a try/catch block

cli/src/helpers/createProject.ts

@@ -1,8 +1,8 @@
-import { type PkgInstallerMap } from "~/installers/index.js";
 import path from "path";
 import { installPackages } from "~/helpers/installPackages.js";
 import { scaffoldProject } from "~/helpers/scaffoldProject.js";
 import { selectAppFile, selectIndexFile } from "~/helpers/selectBoilerplate.js";
+import { type PkgInstallerMap } from "~/installers/index.js";
 import { getUserPkgManager } from "~/utils/getUserPkgManager.js";
 
 interface CreateProjectOptions {

cli/src/helpers/installPackages.ts

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

cli/src/helpers/logNextSteps.ts

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

cli/src/helpers/scaffoldProject.ts

@@ -1,8 +1,8 @@
-import path from "path";
 import chalk from "chalk";
 import fs from "fs-extra";
 import inquirer from "inquirer";
 import ora from "ora";
+import path from "path";
 import { PKG_ROOT } from "~/consts.js";
 import { type InstallerOptions } from "~/installers/index.js";
 import { logger } from "~/utils/logger.js";

cli/src/helpers/selectBoilerplate.ts

@@ -1,7 +1,7 @@
-import { type InstallerOptions } from "~/installers/index.js";
-import path from "path";
 import fs from "fs-extra";
+import path from "path";
 import { PKG_ROOT } from "~/consts.js";
+import { type InstallerOptions } from "~/installers/index.js";
 
 type SelectBoilerplateProps = Required<
  Pick<InstallerOptions, "projectDir" | "packages">

cli/src/index.ts

@@ -1,23 +1,22 @@
 #!/usr/bin/env node
-
-import { type PackageJson } from "type-fest";
-import path from "path";
+import { installDependencies } from "./helpers/installDependencies.js";
+import { getVersion } from "./utils/getT3Version.js";
+import {
+ getNpmVersion,
+ renderVersionWarning,
+} from "./utils/renderVersionWarning.js";
 import fs from "fs-extra";
+import path from "path";
+import { type PackageJson } from "type-fest";
 import { runCli } from "~/cli/index.js";
 import { createProject } from "~/helpers/createProject.js";
 import { initializeGit } from "~/helpers/git.js";
-import { setImportAlias } from "~/helpers/setImportAlias.js";
 import { logNextSteps } from "~/helpers/logNextSteps.js";
+import { setImportAlias } from "~/helpers/setImportAlias.js";
 import { buildPkgInstallerMap } from "~/installers/index.js";
 import { logger } from "~/utils/logger.js";
 import { parseNameAndPath } from "~/utils/parseNameAndPath.js";
 import { renderTitle } from "~/utils/renderTitle.js";
-import {
- getNpmVersion,
- renderVersionWarning,
-} from "./utils/renderVersionWarning.js";
-import { installDependencies } from "./helpers/installDependencies.js";
-import { getVersion } from "./utils/getT3Version.js";
 
 type CT3APackageJSON = PackageJson & {
  ct3aMetadata?: {
@@ -68,10 +67,12 @@ const main = async () => {
  }
 
  // Rename _eslintrc.json to .eslintrc.json - we use _eslintrc.json to avoid conflicts with the monorepos linter
- fs.renameSync(
- path.join(projectDir, "_eslintrc.cjs"),
- path.join(projectDir, ".eslintrc.cjs"),
- );
+ if (fs.existsSync(path.join(projectDir, "_eslintrc.cjs"))) {
+ fs.renameSync(
+ path.join(projectDir, "_eslintrc.cjs"),
+ path.join(projectDir, ".eslintrc.cjs"),
+ );
+ }
 
  if (!noGit) {
  await initializeGit(projectDir);

cli/src/installers/dependencyVersionMap.ts

@@ -26,5 +26,8 @@ export const dependencyVersionMap = {
  "@trpc/next": "^10.18.0",
  "@tanstack/react-query": "^4.28.0",
  superjson: "1.12.2",
+
+ // strictEslintAndPrettier
+ "@ianvs/prettier-plugin-sort-imports": "^3.7.2",
 } as const;
 export type AvailableDependencies = keyof typeof dependencyVersionMap;

cli/src/installers/envVars.ts

@@ -1,7 +1,7 @@
-import { type Installer } from "~/installers/index.js";
-import path from "path";
 import fs from "fs-extra";
+import path from "path";
 import { PKG_ROOT } from "~/consts.js";
+import { type Installer } from "~/installers/index.js";
 
 export const envVariablesInstaller: Installer = ({ projectDir, packages }) => {
  const usingAuth = packages?.nextAuth.inUse;

cli/src/installers/index.ts

@@ -1,9 +1,10 @@
-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";
+import { strictEsLintAndPrettier } from "~/installers/strictEslintAndPrettier.js";
 import { tailwindInstaller } from "~/installers/tailwind.js";
 import { trpcInstaller } from "~/installers/trpc.js";
+import { type PackageManager } from "~/utils/getUserPkgManager.js";
 
 // Turning this into a const allows the list to be iterated over for programatically creating prompt options
 // Should increase extensability in the future
@@ -13,6 +14,7 @@ export const availablePackages = [
  "tailwind",
  "trpc",
  "envVariables",
+ "strictEslintAndPrettier",
 ] as const;
 export type AvailablePackages = (typeof availablePackages)[number];
 
@@ -56,4 +58,8 @@ export const buildPkgInstallerMap = (
  inUse: true,
  installer: envVariablesInstaller,
  },
+ strictEslintAndPrettier: {
+ inUse: packages.includes("strictEslintAndPrettier"),
+ installer: strictEsLintAndPrettier,
+ },
 });

cli/src/installers/nextAuth.ts

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

cli/src/installers/prisma.ts

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

cli/src/installers/strictEslintAndPrettier.ts

@@ -0,0 +1,41 @@
+import { type Installer } from "../installers/index.js";
+import fs from "fs-extra";
+import path from "path";
+import { PKG_ROOT } from "~/consts.js";
+import { addPackageDependency } from "~/utils/addPackageDependency.js";
+
+export const strictEsLintAndPrettier: Installer = ({
+ projectDir,
+ packages,
+}) => {
+ addPackageDependency({
+ projectDir,
+ dependencies: [
+ "prettier",
+ "@types/prettier",
+ "@ianvs/prettier-plugin-sort-imports",
+ ],
+ devMode: true,
+ });
+
+ const configDir = path.join(PKG_ROOT, "template/extras/config");
+
+ fs.rmSync(path.join(projectDir, "_eslintrc.cjs"));
+ fs.copySync(
+ path.join(configDir, "_strict-eslintrc.cjs"),
+ path.join(projectDir, "_eslintrc.cjs"),
+ );
+
+ if (packages?.tailwind.inUse) {
+ // Include the congig with tailwind class ordering
+ fs.copySync(
+ path.join(configDir, "strict-prettier-with-tailwind.config.cjs"),
+ path.join(projectDir, "prettier.config.cjs"),
+ );
+ } else {
+ fs.copySync(
+ path.join(configDir, "_prettier.config.cjs"),
+ path.join(projectDir, "prettier.config.cjs"),
+ );
+ }
+};

cli/src/installers/tailwind.ts

@@ -4,7 +4,7 @@ import { PKG_ROOT } from "~/consts.js";
 import { type Installer } from "~/installers/index.js";
 import { addPackageDependency } from "~/utils/addPackageDependency.js";
 
-export const tailwindInstaller: Installer = ({ projectDir }) => {
+export const tailwindInstaller: Installer = ({ projectDir, packages }) => {
  addPackageDependency({
  projectDir,
  dependencies: [
@@ -26,7 +26,10 @@ export const tailwindInstaller: Installer = ({ projectDir }) => {
  const postcssCfgSrc = path.join(extrasDir, "config/postcss.config.cjs");
  const postcssCfgDest = path.join(projectDir, "postcss.config.cjs");
 
- const prettierSrc = path.join(extrasDir, "config/prettier.config.cjs");
+ const prettierSrc = path.join(
+ extrasDir,
+ "config/prettier-with-tailwind.config.cjs",
+ );
  const prettierDest = path.join(projectDir, "prettier.config.cjs");
 
  const cssSrc = path.join(extrasDir, "src/styles/globals.css");
@@ -35,7 +38,11 @@ export const tailwindInstaller: Installer = ({ projectDir }) => {
  fs.copySync(twCfgSrc, twCfgDest);
  fs.copySync(postcssCfgSrc, postcssCfgDest);
  fs.copySync(cssSrc, cssDest);
- fs.copySync(prettierSrc, prettierDest);
+
+ // Let strictEslintAndPrettier install the prettier config
+ if (!packages?.strictEslintAndPrettier.inUse) {
+ fs.copySync(prettierSrc, prettierDest);
+ }
 
  // Remove vanilla css file
  const indexModuleCss = path.join(projectDir, "src/pages/index.module.css");

cli/src/installers/trpc.ts

@@ -1,8 +1,8 @@
 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 { addPackageDependency } from "~/utils/addPackageDependency.js";
 
 export const trpcInstaller: Installer = ({ projectDir, packages }) => {
  addPackageDependency({

cli/src/utils/addPackageDependency.ts

@@ -1,11 +1,11 @@
-import path from "path";
 import fs from "fs-extra";
+import path from "path";
+import sortPackageJson from "sort-package-json";
 import { type PackageJson } from "type-fest";
 import {
  dependencyVersionMap,
  type AvailableDependencies,
 } from "~/installers/dependencyVersionMap.js";
-import sortPackageJson from "sort-package-json";
 
 export const addPackageDependency = (opts: {
  dependencies: AvailableDependencies[];

cli/src/utils/getT3Version.ts

@@ -1,6 +1,6 @@
-import { type PackageJson } from "type-fest";
-import path from "path";
 import fs from "fs-extra";
+import path from "path";
+import { type PackageJson } from "type-fest";
 import { PKG_ROOT } from "~/consts.js";
 
 export const getVersion = () => {

cli/src/utils/renderVersionWarning.ts

@@ -1,6 +1,14 @@
-import { execSync } from "child_process";
 import { getVersion } from "./getT3Version.js";
 import { logger } from "./logger.js";
+import { execSync } from "child_process";
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the LICENSE file in the root
+ * directory of this source tree.
+ * https://github.com/facebook/create-react-app/blob/main/packages/create-react-app/LICENSE
+ */
+import https from "https";
 
 export const renderVersionWarning = (npmVersion: string) => {
  const currentVersion = getVersion();
@@ -29,15 +37,6 @@ export const renderVersionWarning = (npmVersion: string) => {
  console.log("");
 };
 
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the LICENSE file in the root
- * directory of this source tree.
- * https://github.com/facebook/create-react-app/blob/main/packages/create-react-app/LICENSE
- */
-import https from "https";
-
 type DistTagsBody = {
  latest: string;
 };