chore: Adding eslint and prettier to toolchain options (#70)

As per [this](#36)
comment thread, I've added eslint+prettier as a toolchain option.

I've tested start configurations in the contributing guide and all looks
to be working.

[This](https://github.com/TanStack/config/blob/main/prettier.config.js)
was my source for the prettier config. I used the tanstack config as
implemented [here](https://tanstack.com/config/latest/docs/eslint) in
the docs. Let me know if anything looks off, or feel free to push
changes!

Author: IainMcHugh

README.md

@@ -46,7 +46,7 @@ Available options:
 - `--template <type>`: Choose between `file-router`, `typescript`, or `javascript`
 - `--tailwind`: Enable Tailwind CSS
 - `--package-manager`: Specify your preferred package manager (`npm`, `yarn`, `pnpm`, `bun`, or `deno`)
-- `--toolchain`: Specify your toolchain solution for formatting/linting (`biome`)
+- `--toolchain`: Specify your toolchain solution for formatting/linting (`biome`, `eslint+prettier`)
 - `--no-git`: Do not initialize a git repository
 - `--add-ons`: Enable add-on selection or specify add-ons to install
 
@@ -102,6 +102,8 @@ Choose your preferred solution for formatting and linting either through the int
 
 Setting this flag to `biome` will configure it as your toolchain of choice, adding a `biome.json` to the root of the project. Consult the [biome documentation](https://biomejs.dev/guides/getting-started/) for further customization.
 
+Setting this flag to `eslint+prettier` will configure it as your toolchain of choice, adding an `eslint.config.js` and `prettier.config.js` to the root of the project, as well as a `.prettierignore` file. Consult the [eslint documentation](https://eslint.org/docs/latest/) and [prettier documentation](https://prettier.io/docs/) for further customization.
+
 ## Add-ons (experimental)
 
 You can enable add-on selection:

src/create-app.ts

@@ -216,6 +216,25 @@ async function createPackageJSON(
       },
     }
   }
+  if (options.toolchain === 'eslint+prettier') {
+    const eslintPrettierPackageJSON = JSON.parse(
+      await environment.readFile(
+        resolve(templateDir, 'package.eslintprettier.json'),
+        'utf-8',
+      ),
+    )
+    packageJSON = {
+      ...packageJSON,
+      scripts: {
+        ...packageJSON.scripts,
+        ...eslintPrettierPackageJSON.scripts,
+      },
+      devDependencies: {
+        ...packageJSON.devDependencies,
+        ...eslintPrettierPackageJSON.devDependencies,
+      },
+    }
+  }
   if (options.mode === FILE_ROUTER) {
     const frPackageJSON = JSON.parse(
       await environment.readFile(resolve(routerDir, 'package.fr.json'), 'utf8'),
@@ -400,6 +419,18 @@ export async function createApp(
     copyFiles(templateDirBase, ['./toolchain/biome.json'], true)
   }
 
+  if (options.toolchain === 'eslint+prettier') {
+    copyFiles(
+      templateDirBase,
+      [
+        './toolchain/eslint.config.js',
+        './toolchain/prettier.config.js',
+        './toolchain/.prettierignore',
+      ],
+      true,
+    )
+  }
+
   // Setup reportWebVitals
   if (!isAddOnEnabled('start') && options.framework === 'react') {
     if (options.typescript) {
@@ -431,7 +462,7 @@ export async function createApp(
     )
   }
 
-  // Setup the package.json file, optionally with typescript, tailwind and biome
+  // Setup the package.json file, optionally with typescript, tailwind and formatter/linter
   await createPackageJSON(
     environment,
     options.projectName,
@@ -696,6 +727,16 @@ export async function createApp(
     s?.stop(`Applied toolchain ${options.toolchain}...`)
   }
 
+  if (options.toolchain === 'eslint+prettier') {
+    s?.start(`Applying toolchain ${options.toolchain}...`)
+    await environment.execute(
+      options.packageManager,
+      ['run', 'check'],
+      targetDir,
+    )
+    s?.stop(`Applied toolchain ${options.toolchain}...`)
+  }
+
   if (options.git) {
     s?.start(`Initializing git repository...`)
     await environment.execute('git', ['init'], resolve(targetDir))

src/toolchain.ts

@@ -1,3 +1,7 @@
-export const SUPPORTED_TOOLCHAINS = ['none', 'biome'] as const
+export const SUPPORTED_TOOLCHAINS = [
+  'none',
+  'biome',
+  'eslint+prettier',
+] as const
 export type ToolChain = (typeof SUPPORTED_TOOLCHAINS)[number]
 export const DEFAULT_TOOLCHAIN: ToolChain = 'none'

templates/react/base/README.md.ejs

@@ -31,17 +31,20 @@ This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
 <% } else { %>
 This project uses CSS for styling.
 <% } %>
-<% if (toolchain && toolchain === 'biome') { %>
+<% if (toolchain && toolchain !== 'none') { %>
 ## Linting & Formatting
+<% if (toolchain === 'biome') { %>
 This project uses [Biome](https://biomejs.dev/) for linting and formatting. The following scripts are available:
-
+<% } %>
+<% if (toolchain === 'eslint+prettier') { %>
+This project uses [eslint](https://eslint.org/) and [prettier](https://prettier.io/) for linting and formatting. Eslint is configured using [tanstack/eslint-config](https://tanstack.com/config/latest/docs/eslint). The following scripts are available:
+<% } %>
 ```bash
 <%= getPackageManagerRunScript('lint') %>
 <%= getPackageManagerRunScript('format') %>
 <%= getPackageManagerRunScript('check') %>
 ```
 <% } %>
-
 <% for(const addon of addOns.filter(addon => addon.readme)) { %>
 <%- addon.readme %>
 <% } %>

templates/react/base/package.eslintprettier.json

@@ -0,0 +1,11 @@
+{
+  "scripts": {
+    "lint": "eslint",
+    "format": "prettier",
+    "check": "prettier --write . && eslint --fix"
+  },
+  "devDependencies": {
+    "@tanstack/eslint-config": "^0.1.0",
+    "prettier": "^3.5.3"
+  }
+}

templates/react/base/toolchain/.prettierignore

@@ -0,0 +1,3 @@
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

templates/react/base/toolchain/eslint.config.js

@@ -0,0 +1,5 @@
+//  @ts-check
+
+import { tanstackConfig } from "@tanstack/eslint-config";
+
+export default [...tanstackConfig];

templates/react/base/toolchain/prettier.config.js

@@ -0,0 +1,10 @@
+//  @ts-check
+
+/** @type {import('prettier').Config} */
+const config = {
+  semi: false,
+  singleQuote: true,
+  trailingComma: "all",
+};
+
+export default config;

templates/react/base/tsconfig.json.ejs

@@ -1,5 +1,6 @@
 {
-  "include": ["**/*.ts", "**/*.tsx"],
+  <% if (toolchain && toolchain === 'eslint+prettier') { %>"include": ["**/*.ts", "**/*.tsx", "eslint.config.js", "prettier.config.js", "vite.config.js"],
+  <% } else { %>"include": ["**/*.ts", "**/*.tsx"],<% } %>
   "compilerOptions": {
     "target": "ES2022",
     "jsx": "react-jsx",

templates/solid/base/README.md.ejs

@@ -195,6 +195,21 @@ Loaders simplify your data fetching logic dramatically. Check out more informati
 
 Files prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.
 
+<% if (toolchain && toolchain !== 'none') { %>
+## Linting & Formatting
+<% if (toolchain === 'biome') { %>
+This project uses [Biome](https://biomejs.dev/) for linting and formatting. The following scripts are available:
+<% } %>
+<% if (toolchain === 'eslint+prettier') { %>
+This project uses [eslint](https://eslint.org/) and [prettier](https://prettier.io/) for linting and formatting. Eslint is configured using [tanstack/eslint-config](https://tanstack.com/config/latest/docs/eslint). The following scripts are available:
+<% } %>
+```bash
+<%= getPackageManagerRunScript('lint') %>
+<%= getPackageManagerRunScript('format') %>
+<%= getPackageManagerRunScript('check') %>
+```
+<% } %>
+
 # Learn More
 
 You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).