moved prettier related setup to eslint file so that it is not tied to…

… tailwind css
t3-oss · Nov 10, 2024 · bafb814 · bafb814
1 parent 41d2811
commit bafb814
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 44 deletions.
diff --git a/cli/src/installers/dependencyVersionMap.ts b/cli/src/installers/dependencyVersionMap.ts
@@ -16,17 +16,14 @@ export const dependencyVersionMap = {
   // Drizzle
   "drizzle-kit": "^0.24.0",
   "drizzle-orm": "^0.33.0",
-  "eslint-plugin-drizzle": "^0.2.3",
   mysql2: "^3.11.0",
   "@planetscale/database": "^1.19.0",
   postgres: "^3.4.4",
   "@libsql/client": "^0.9.0",
 
   // TailwindCSS
   tailwindcss: "^3.4.3",
-  postcss: "^8.4.39",
-  prettier: "^3.3.2",
-  "prettier-plugin-tailwindcss": "^0.6.5",
+  postcss: "^8.4.39",  
 
   // tRPC
   "@trpc/client": "^11.0.0-rc.446",
@@ -39,6 +36,17 @@ export const dependencyVersionMap = {
 
   // biome
   "@biomejs/biome": "1.9.4",
-  //* TODO also add prettier / eslint plugins here
+
+  // eslint / prettier
+  prettier: "^3.3.2",
+  "prettier-plugin-tailwindcss": "^0.6.5",
+  "eslint": "^8.57.0",
+  "eslint-config-next": "^15.0.1",
+  "eslint-plugin-drizzle": "^0.2.3",
+  "@types/eslint": "^8.56.10",
+  "@typescript-eslint/eslint-plugin": "^8.1.0",
+  "@typescript-eslint/parser": "^8.1.0",
+  //* TODO make sure all these are install normally when eslint is selected
+
 } as const;
 export type AvailableDependencies = keyof typeof dependencyVersionMap;
diff --git a/cli/src/installers/drizzle.ts b/cli/src/installers/drizzle.ts
@@ -5,22 +5,17 @@ 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";
-import { type AvailableDependencies } from "./dependencyVersionMap.js";
 
 export const drizzleInstaller: Installer = ({
   projectDir,
   packages,
   scopedAppName,
   databaseProvider,
 }) => {
-  const devPackages: AvailableDependencies[] = [
-    "drizzle-kit",
-    "eslint-plugin-drizzle", //* TODO make this depend on eslint being installed
-  ];
 
   addPackageDependency({
     projectDir,
-    dependencies: devPackages,
+    dependencies: ["drizzle-kit"],
     devMode: true,
   });
   addPackageDependency({

diff --git a/cli/src/installers/eslint.ts b/cli/src/installers/eslint.ts
@@ -1,12 +1,66 @@
 import path from "path";
 import fs from "fs-extra";
+import { type PackageJson } from "type-fest";
 
+import { PKG_ROOT } from "~/consts.js";
 import { _initialConfig } from "~/../template/extras/config/_eslint.js";
 import { type Installer } from "~/installers/index.js";
+import { addPackageDependency } from "~/utils/addPackageDependency.js";
+import { type AvailableDependencies } from "./dependencyVersionMap.js";
 
+
+// Also installs prettier
 export const dynamicEslintInstaller: Installer = ({ projectDir, packages }) => {
-  const usingDrizzle = !!packages?.drizzle?.inUse;
+  const devPackages: AvailableDependencies[] = [
+    "prettier",
+    "eslint",
+    "eslint-config-next",
+    "@types/eslint",
+    "@typescript-eslint/eslint-plugin",
+    "@typescript-eslint/parser",
+  ];
 
+  if (packages?.tailwind.inUse) {
+    devPackages.push("prettier-plugin-tailwindcss");
+  }
+  if (packages?.drizzle.inUse) {
+    devPackages.push("eslint-plugin-drizzle");
+  }
+
+  addPackageDependency({
+    projectDir,
+    dependencies: devPackages,
+    devMode: true,
+  });
+  const extrasDir = path.join(PKG_ROOT, "template/extras");
+
+  // Prettier
+  let prettierSrc: string;
+  if (packages?.tailwind.inUse) {
+    prettierSrc = path.join(extrasDir, "config/_tailwind.prettier.config.js");
+  }
+  else {
+    prettierSrc = path.join(extrasDir, "config/_prettier.config.js");
+  }
+  const prettierDest = path.join(projectDir, "prettier.config.js");
+
+  fs.copySync(prettierSrc, prettierDest);
+
+  // add format:* scripts to package.json
+  const packageJsonPath = path.join(projectDir, "package.json");
+  const packageJsonContent = fs.readJSONSync(packageJsonPath) as PackageJson;
+  packageJsonContent.scripts = {
+    ...packageJsonContent.scripts,
+    "format:write": 'prettier --write "**/*.{ts,tsx,js,jsx,mdx}" --cache',
+    "format:check": 'prettier --check "**/*.{ts,tsx,js,jsx,mdx}" --cache',
+  };
+
+  fs.writeJSONSync(packageJsonPath, packageJsonContent, {
+    spaces: 2,
+  });
+
+  // eslint
+  const usingDrizzle = !!packages?.drizzle?.inUse;
   const eslintConfig = getEslintConfig({ usingDrizzle });
 
   // Convert config from _eslint.config.json to .eslintrc.cjs

diff --git a/cli/src/installers/tailwind.ts b/cli/src/installers/tailwind.ts
@@ -1,6 +1,5 @@
 import path from "path";
 import fs from "fs-extra";
-import { type PackageJson } from "type-fest";
 
 import { PKG_ROOT } from "~/consts.js";
 import { type Installer } from "~/installers/index.js";
@@ -12,8 +11,6 @@ export const tailwindInstaller: Installer = ({ projectDir }) => {
     dependencies: [
       "tailwindcss",
       "postcss",
-      "prettier",
-      "prettier-plugin-tailwindcss",
     ],
     devMode: true,
   });
@@ -26,30 +23,10 @@ export const tailwindInstaller: Installer = ({ projectDir }) => {
   const postcssCfgSrc = path.join(extrasDir, "config/postcss.config.js");
   const postcssCfgDest = path.join(projectDir, "postcss.config.js");
 
-  const prettierSrc = path.join(extrasDir, "config/_prettier.config.js");
-  const prettierDest = path.join(projectDir, "prettier.config.js");
-
   const cssSrc = path.join(extrasDir, "src/styles/globals.css");
   const cssDest = path.join(projectDir, "src/styles/globals.css");
 
-  // add format:* scripts to package.json
-  const packageJsonPath = path.join(projectDir, "package.json");
-
-  //* TODO for some reason the prettier related install stuff is here with tailwind, should probably be in its own installer
-  //* along with biome stuff
-  //* Update: prettier is not installed if you don't select tailwind css, which really doesn't make sense. Should move it to the eslint installer
-  const packageJsonContent = fs.readJSONSync(packageJsonPath) as PackageJson;
-  packageJsonContent.scripts = {
-    ...packageJsonContent.scripts,
-    "format:write": 'prettier --write "**/*.{ts,tsx,js,jsx,mdx}" --cache',
-    "format:check": 'prettier --check "**/*.{ts,tsx,js,jsx,mdx}" --cache',
-  };
-
   fs.copySync(twCfgSrc, twCfgDest);
   fs.copySync(postcssCfgSrc, postcssCfgDest);
   fs.copySync(cssSrc, cssDest);
-  fs.copySync(prettierSrc, prettierDest);
-  fs.writeJSONSync(packageJsonPath, packageJsonContent, {
-    spaces: 2,
-  });
 };
diff --git a/cli/template/base/package.json b/cli/template/base/package.json
@@ -22,14 +22,9 @@
     "zod": "^3.23.3"
   },
   "devDependencies": {
-    "@types/eslint": "^8.56.10",
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.1.0",
-    "@typescript-eslint/parser": "^8.1.0",
-    "eslint": "^8.57.0",
-    "eslint-config-next": "^15.0.1",
     "typescript": "^5.5.3"
   }
 }
diff --git a/cli/template/extras/config/_prettier.config.js b/cli/template/extras/config/_prettier.config.js
@@ -1,4 +1,2 @@
-/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
-export default {
-  plugins: ["prettier-plugin-tailwindcss"],
-};
+/** @type {import('prettier').Config} */
+export default {};
diff --git a/cli/template/extras/config/_tailwind.prettier.config.js b/cli/template/extras/config/_tailwind.prettier.config.js
@@ -0,0 +1,4 @@
+/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
+export default {
+  plugins: ["prettier-plugin-tailwindcss"],
+};