feat: add import order sorting via prettier

.github/workflows/e2e.yml

@@ -27,6 +27,8 @@ jobs:
  tailwind: ["true", "false"]
  nextAuth: ["true", "false"]
  prisma: ["true", "false"]
+ eslint: ["true", "false"]
+ prettier: ["true", "false"]
 
  name: "Build and Start T3 App ${{ matrix.trpc }}-${{ matrix.tailwind }}-${{ matrix.nextAuth }}-${{ matrix.prisma }}"
  steps:

cli/src/index.ts

@@ -67,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

@@ -15,9 +15,6 @@ export const dependencyVersionMap = {
  tailwindcss: "^3.3.0",
  autoprefixer: "^10.4.14",
  postcss: "^8.4.21",
- prettier: "^2.8.6",
- "prettier-plugin-tailwindcss": "^0.2.6",
- "@types/prettier": "^2.7.2",
 
  // tRPC
  "@trpc/client": "^10.18.0",
@@ -26,5 +23,14 @@ export const dependencyVersionMap = {
  "@trpc/next": "^10.18.0",
  "@tanstack/react-query": "^4.28.0",
  superjson: "1.12.2",
+
+ // Prettier
+ prettier: "^2.8.6",
+ "prettier-plugin-tailwindcss": "^0.2.6",
+ "@types/prettier": "^2.7.2",
+ "@ianvs/prettier-plugin-sort-imports": "^3.7.2",
+
+ // Eslint
+ "eslint-config-next": "^13.4.1",
 } as const;
 export type AvailableDependencies = keyof typeof dependencyVersionMap;

cli/src/installers/eslint.ts

@@ -0,0 +1,23 @@
+import { type Installer } from "./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 eslint: Installer = ({ projectDir }) => {
+ addPackageDependency({
+ dependencies: ["eslint-config-next"],
+ devMode: true,
+ projectDir,
+ });
+
+ const configDir = path.join(PKG_ROOT, "template/extras/config");
+
+ // Remove the default config
+ fs.rmSync(path.join(projectDir, "_eslintrc.cjs"));
+
+ fs.copySync(
+ path.join(configDir, "_eslintrc.cjs"),
+ path.join(projectDir, ".eslintrc.cjs"),
+ );
+};

cli/src/installers/index.ts

@@ -1,3 +1,5 @@
+import { eslint } from "./eslint.js";
+import { prettier } from "./prettier.js";
 import { envVariablesInstaller } from "~/installers/envVars.js";
 import { nextAuthInstaller } from "~/installers/nextAuth.js";
 import { prismaInstaller } from "~/installers/prisma.js";
@@ -13,6 +15,8 @@ export const availablePackages = [
  "tailwind",
  "trpc",
  "envVariables",
+ "eslint",
+ "prettier",
 ] as const;
 export type AvailablePackages = (typeof availablePackages)[number];
 
@@ -56,4 +60,12 @@ export const buildPkgInstallerMap = (
  inUse: true,
  installer: envVariablesInstaller,
  },
+ prettier: {
+ inUse: packages.includes("prettier"),
+ installer: prettier,
+ },
+ eslint: {
+ inUse: packages.includes("eslint"),
+ installer: eslint,
+ },
 });

cli/src/installers/prettier.ts

@@ -0,0 +1,39 @@
+import { type Installer } from "../installers/index.js";
+import { type AvailableDependencies } from "./dependencyVersionMap.js";
+import fs from "fs-extra";
+import path from "path";
+import { PKG_ROOT } from "~/consts.js";
+import { addPackageDependency } from "~/utils/addPackageDependency.js";
+
+export const prettier: Installer = ({ projectDir, packages }) => {
+ const packeagesToInstall: AvailableDependencies[] = [
+ "prettier",
+ "@types/prettier",
+ "@ianvs/prettier-plugin-sort-imports",
+ ];
+
+ if (packages?.tailwind.inUse) {
+ packeagesToInstall.push("prettier-plugin-tailwindcss");
+ }
+
+ addPackageDependency({
+ projectDir,
+ dependencies: packeagesToInstall,
+ devMode: true,
+ });
+
+ if (packages?.tailwind.inUse) {
+ fs.copySync(
+ path.join(
+ PKG_ROOT,
+ "template/extras/config/prettier-with-tailwind.config.cjs",
+ ),
+ path.join(projectDir, "prettier.config.cjs"),
+ );
+ } else {
+ fs.copySync(
+ path.join(PKG_ROOT, "template/extras/config/_prettier.config.cjs"),
+ path.join(projectDir, "prettier.config.cjs"),
+ );
+ }
+};

cli/src/installers/tailwind.ts

@@ -7,14 +7,7 @@ import { addPackageDependency } from "~/utils/addPackageDependency.js";
 export const tailwindInstaller: Installer = ({ projectDir }) => {
  addPackageDependency({
  projectDir,
- dependencies: [
- "tailwindcss",
- "postcss",
- "autoprefixer",
- "prettier",
- "prettier-plugin-tailwindcss",
- "@types/prettier",
- ],
+ dependencies: ["tailwindcss", "postcss", "autoprefixer"],
  devMode: true,
  });
 
@@ -26,16 +19,12 @@ 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 prettierDest = path.join(projectDir, "prettier.config.cjs");
-
  const cssSrc = path.join(extrasDir, "src/styles/globals.css");
  const cssDest = path.join(projectDir, "src/styles/globals.css");
 
  fs.copySync(twCfgSrc, twCfgDest);
  fs.copySync(postcssCfgSrc, postcssCfgDest);
  fs.copySync(cssSrc, cssDest);
- fs.copySync(prettierSrc, prettierDest);
 
  // Remove vanilla css file
  const indexModuleCss = path.join(projectDir, "src/pages/index.module.css");

cli/template/base/_eslintrc.cjs

@@ -3,33 +3,11 @@ const path = require("path");
 
 /** @type {import("eslint").Linter.Config} */
 const config = {
- overrides: [
- {
- extends: [
- "plugin:@typescript-eslint/recommended-requiring-type-checking",
- ],
- files: ["*.ts", "*.tsx"],
- parserOptions: {
- project: path.join(__dirname, "tsconfig.json"),
- },
- },
- ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
  project: path.join(__dirname, "tsconfig.json"),
  },
  plugins: ["@typescript-eslint"],
- extends: ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
- rules: {
- "@typescript-eslint/consistent-type-imports": [
- "warn",
- {
- prefer: "type-imports",
- fixStyle: "inline-type-imports",
- },
- ],
- "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
- },
 };
 
 module.exports = config;

cli/template/base/package.json

@@ -6,7 +6,9 @@
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
- "lint": "next lint"
+ "lint": "next lint",
+ "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"
  },
  "dependencies": {
  "@t3-oss/env-nextjs": "^0.2.1",
@@ -23,7 +25,6 @@
  "@typescript-eslint/eslint-plugin": "^5.56.0",
  "@typescript-eslint/parser": "^5.56.0",
  "eslint": "^8.36.0",
- "eslint-config-next": "^13.4.1",
  "typescript": "^5.0.2"
  }
 }

cli/template/extras/config/_eslintrc.cjs

@@ -0,0 +1,43 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require("path");
+
+/** @type {import("eslint").Linter.Config} */
+const config = {
+ overrides: [
+ {
+ extends: [
+ "plugin:@typescript-eslint/recommended-requiring-type-checking",
+ ],
+ files: ["*.ts", "*.tsx"],
+ parserOptions: {
+ project: path.join(__dirname, "tsconfig.json"),
+ },
+ },
+ ],
+ parser: "@typescript-eslint/parser",
+ parserOptions: {
+ project: path.join(__dirname, "tsconfig.json"),
+ },
+ plugins: ["@typescript-eslint"],
+ extends: ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
+ rules: {
+ "@typescript-eslint/consistent-type-imports": [
+ "warn",
+ {
+ prefer: "type-imports",
+ fixStyle: "inline-type-imports",
+ },
+ ],
+ "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
+ "@typescript-eslint/no-misused-promises": [
+ 2,
+ {
+ checksVoidReturn: {
+ attributes: false,
+ },
+ },
+ ],
+ },
+};
+
+module.exports = config;

cli/template/extras/config/_prettier.config.cjs

@@ -0,0 +1,6 @@
+/** @type {import("prettier").Config} */
+const config = {
+ plugins: [require.resolve("@ianvs/prettier-plugin-sort-import")],
+};
+
+module.exports = config;

www/.prettierrc.cjs

@@ -5,6 +5,7 @@ const config = {
  plugins: [
  ...baseConfig.plugins,
  require.resolve("prettier-plugin-astro"),
+ require.resolve("@ianvs/prettier-plugin-sort-imports"),
  require.resolve("prettier-plugin-tailwindcss"), // MUST come last
  ],
  pluginSearchDirs: false,