S
Solo Kit
DocumentationComponentsPricingChangelogRoadmapFAQContact
LoginGet Started
DocumentationComponentsPricing
LoginGet Started
Welcome to Solo Kit DocumentationIntroductionTech StackRoadmapFAQGetting Started
Getting Started

Editor Setup

Editor Setup

Configure your editor for the optimal Solo Kit development experience. This guide covers VS Code, WebStorm, and Cursor with recommended extensions, settings, and workflows.

📝 VS Code (Recommended)

VS Code provides excellent TypeScript support and has the largest ecosystem of extensions for React development.

Essential Extensions

Install these extensions for the best Solo Kit experience:

Core Development

ms-vscode.vscode-typescript-next
ms-vscode.vscode-eslint
esbenp.prettier-vscode
bradlc.vscode-tailwindcss
ms-vscode.vscode-json

TypeScript Importer

pmneo.tsimporter

Auto Import - ES6, TS, JSX, TSX

steoates.autoimport

React & Next.js

ms-vscode.vscode-typescript-next
dsznajder.es7-react-js-snippets
ms-vscode.vscode-react-native

Database & SQL

mtxr.sqltools
mtxr.sqltools-driver-pg

Git & Version Control

eamodio.gitlens
mhutchie.git-graph

Productivity

ms-vscode.vscode-thunder-client
ms-vscode.vscode-todo-highlight
gruntfuggly.todo-tree

VS Code Settings

Create or update .vscode/settings.json in your project root:

{
  "typescript.preferences.preferTypeOnlyAutoImports": true,
  "typescript.suggest.autoImports": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
  "eslint.workingDirectories": [
    "apps/web",
    "apps/mobile",
    "packages/ui",
    "packages/utils",
    "packages/database"
  ],
  "tailwindCSS.includeLanguages": {
    "typescript": "javascript",
    "typescriptreact": "javascript"
  },
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ],
  "emmet.includeLanguages": {
    "typescript": "html",
    "typescriptreact": "html"
  },
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "typescript.preferences.includePackageJsonAutoImports": "off",
  "search.exclude": {
    "**/node_modules": true,
    "**/.next": true,
    "**/.expo": true,
    "**/dist": true,
    "**/build": true
  },
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/.next/**": true,
    "**/.expo/**": true
  }
}

VS Code Extensions Configuration

Create .vscode/extensions.json to recommend extensions to team members:

{
  "recommendations": [
    "ms-vscode.vscode-typescript-next",
    "ms-vscode.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss",
    "dsznajder.es7-react-js-snippets",
    "ms-vscode.vscode-react-native",
    "mtxr.sqltools",
    "mtxr.sqltools-driver-pg",
    "eamodio.gitlens",
    "ms-vscode.vscode-thunder-client"
  ]
}

Custom Snippets

Create custom snippets for Solo Kit patterns in .vscode/snippets.json:

{
  "React Function Component": {
    "prefix": "rfc",
    "body": [
      "interface ${1:Component}Props {",
      "  ${2:// props}",
      "}",
      "",
      "export function ${1:Component}({ ${3:...props} }: ${1:Component}Props) {",
      "  return (",
      "    <div>",
      "      ${4:// component content}",
      "    </div>",
      "  );",
      "}"
    ],
    "description": "Create a React function component with TypeScript"
  },
  "Server Action": {
    "prefix": "serveraction",
    "body": [
      "'use server';",
      "",
      "import { actionClient } from '@/lib/actions/safe-action';",
      "import { ${1:schema} } from './${2:validation}';",
      "",
      "export const ${3:action} = actionClient",
      "  .schema(${1:schema})",
      "  .action(async ({ parsedInput }) => {",
      "    ${4:// action implementation}",
      "  });"
    ],
    "description": "Create a server action with safe-action"
  },
  "Database Schema": {
    "prefix": "dbschema",
    "body": [
      "import { pgTable, uuid, text, timestamp } from 'drizzle-orm/pg-core';",
      "",
      "export const ${1:tableName} = pgTable('${2:table_name}', {",
      "  id: uuid('id').primaryKey().defaultRandom(),",
      "  ${3:name}: text('${4:name}').notNull(),",
      "  createdAt: timestamp('created_at').defaultNow().notNull(),",
      "  updatedAt: timestamp('updated_at').defaultNow().notNull(),",
      "});"
    ],
    "description": "Create a Drizzle database schema"
  }
}

Debugging Configuration

Create .vscode/launch.json for debugging:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "pnpm dev",
      "cwd": "${workspaceFolder}/apps/web",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/apps/web"
    }
  ]
}

Workspace Settings

Create .vscode/tasks.json for common tasks:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "dev",
      "type": "shell",
      "command": "pnpm dev",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      },
      "problemMatcher": []
    },
    {
      "label": "lint",
      "type": "shell",
      "command": "pnpm lint",
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      }
    },
    {
      "label": "type-check",
      "type": "shell",
      "command": "pnpm type-check",
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      }
    }
  ]
}

🧠 WebStorm/IntelliJ IDEA

WebStorm provides excellent TypeScript support with advanced refactoring and debugging capabilities.

Essential Plugins

Install these plugins for optimal Solo Kit development:

  • Tailwind CSS - Intelligent Tailwind CSS support
  • Prisma - Database schema support
  • GitToolBox - Enhanced Git integration
  • Rainbow Brackets - Bracket pair colorization
  • String Manipulation - Advanced string operations

WebStorm Configuration

Code Style Settings

  1. Go to Preferences → Editor → Code Style → TypeScript
  2. Set Tab size: 2
  3. Set Indent: 2
  4. Enable Use tab character: false

Import Organization

  1. Go to Preferences → Editor → Code Style → TypeScript → Imports
  2. Configure import sorting: 
    react
next/*
@packages/*
@/*
./
../

ESLint Integration

  1. Go to Preferences → Languages & Frameworks → JavaScript → Code Quality Tools → ESLint
  2. Enable Automatic ESLint configuration
  3. Set Run eslint --fix on save

Prettier Integration

  1. Go to Preferences → Languages & Frameworks → JavaScript → Prettier
  2. Enable On code reformat
  3. Enable On save

TypeScript Configuration

  1. Go to Preferences → Languages & Frameworks → TypeScript
  2. Set TypeScript version to project version
  3. Enable TypeScript Service

WebStorm Live Templates

Create custom live templates for Solo Kit patterns:

  1. Go to Preferences → Editor → Live Templates
  2. Create new template group "Solo Kit"
  3. Add these templates:

React Component (abbreviation: rfc)

interface $COMPONENT$Props {
  $PROPS$
}

export function $COMPONENT$({ $DESTRUCTURED$ }: $COMPONENT$Props) {
  return (
    <div>
      $CONTENT$
    </div>
  );
}

Server Action (abbreviation: sa)

'use server';

import { actionClient } from '@/lib/actions/safe-action';
import { $SCHEMA$ } from './$FILE$';

export const $NAME$ = actionClient
  .schema($SCHEMA$)
  .action(async ({ parsedInput }) => {
    $IMPLEMENTATION$
  });

🎯 Cursor

Cursor is an AI-powered code editor built on VS Code with enhanced AI capabilities for code generation and refactoring.

Cursor-Specific Setup

Cursor inherits all VS Code configurations, but has additional AI features:

AI Model Configuration

  1. Open Cursor Settings (Cmd/Ctrl + ,)
  2. Go to Cursor section
  3. Configure your preferred AI model:
    • GPT-4 for complex reasoning
    • Claude-3.5-Sonnet for code generation
    • GPT-3.5-Turbo for fast responses

Cursor Rules File

Create .cursorrules in your project root to provide context to the AI:

# Solo Kit Development Rules

You are helping develop a React SaaS starter kit called Solo Kit.

## Tech Stack
- Frontend: Next.js 15 with App Router, React 18, TypeScript
- Database: PostgreSQL with Drizzle ORM
- Auth: BetterAuth with session-based authentication
- UI: shadcn/ui with Tailwind CSS
- Mobile: Expo React Native
- Monorepo: pnpm workspaces with Turborepo

## Code Style
- Use TypeScript for all new files
- Prefer server components over client components
- Use server actions for mutations
- Follow the established file naming conventions
- Use absolute imports (@/ for apps/web, @packages/* for packages)

## Patterns
- Database schemas in packages/database/src/schema/
- UI components in packages/ui/src/components/
- Server actions in apps/web/lib/actions/
- Use Zod for validation
- Use React Hook Form for forms
- Use React Query for client state

## File Organization
- Components: PascalCase (UserProfile.tsx)
- Utilities: camelCase (formatDate.ts)
- Routes: kebab-case (user-profile/page.tsx)
- Constants: SCREAMING_SNAKE_CASE (API_ENDPOINTS)

Please follow these conventions and patterns when suggesting code changes.

AI-Powered Development

Use Cursor's AI features effectively:

Code Generation

  • Cmd+K - Generate code inline
  • Cmd+L - Chat with AI about code
  • Cmd+I - Compose with AI

Refactoring

  • Select code and use Cmd+K to refactor
  • Ask AI to optimize, improve, or explain code
  • Use AI to generate tests for existing functions

🔧 Common Editor Configurations

Path Mapping

Ensure your editor recognizes import aliases by configuring tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./apps/web/*"],
      "@packages/ui": ["./packages/ui/src"],
      "@packages/utils": ["./packages/utils/src"],
      "@packages/database": ["./packages/database/src"]
    }
  }
}

ESLint Configuration

Your editor should automatically detect .eslintrc.js:

module.exports = {
  root: true,
  extends: ['@packages/eslint-config/base'],
  parserOptions: {
    project: './tsconfig.json',
  },
};

Prettier Configuration

Create .prettierrc in your project root:

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 80,
  "plugins": ["prettier-plugin-tailwindcss"]
}

🚀 Editor Workflows

Development Workflow

  1. Start development server: Use editor terminal or task
  2. Enable auto-save: Save on focus change
  3. Use format on save: Automatic code formatting
  4. Enable auto imports: Automatic import management
  5. Use type checking: Real-time TypeScript errors

Debugging Workflow

  1. Set breakpoints in server actions or API routes
  2. Use network tab to inspect API calls
  3. Use React DevTools for component debugging
  4. Use database tools to inspect database state
  5. Use console logs for quick debugging

Refactoring Workflow

  1. Use symbol renaming for safe refactoring
  2. Use find and replace with regex for bulk changes
  3. Use move file/folder for restructuring
  4. Use extract component for breaking down large components
  5. Use organize imports for clean imports

🎯 Productivity Tips

Keyboard Shortcuts

VS Code Essential Shortcuts:

  • Cmd/Ctrl + P - Quick open file
  • Cmd/Ctrl + Shift + P - Command palette
  • Cmd/Ctrl + D - Select next occurrence
  • Alt + Up/Down - Move line up/down
  • Cmd/Ctrl + / - Toggle comment
  • Cmd/Ctrl + Shift + F - Global search
  • F2 - Rename symbol
  • Cmd/Ctrl + Click - Go to definition

Code Navigation

  • Go to symbol: Cmd/Ctrl + T
  • Go to file: Cmd/Ctrl + P
  • Go to definition: F12 or Cmd/Ctrl + Click
  • Go to references: Shift + F12
  • Go back: Cmd/Ctrl + -
  • Go forward: Cmd/Ctrl + Shift + -

Multi-cursor Editing

  • Add cursor: Alt + Click
  • Select all occurrences: Cmd/Ctrl + Shift + L
  • Select next occurrence: Cmd/Ctrl + D
  • Skip occurrence: Cmd/Ctrl + K, Cmd/Ctrl + D

🔍 Troubleshooting

TypeScript Issues

If TypeScript IntelliSense isn't working:

  1. Restart TypeScript server: Cmd/Ctrl + Shift + P → "TypeScript: Restart TS Server"
  2. Check workspace version: Ensure using workspace TypeScript version
  3. Clear cache: Delete .next folder and restart
  4. Check paths: Verify tsconfig.json paths are correct

ESLint/Prettier Conflicts

If ESLint and Prettier conflict:

  1. Check configuration: Ensure Prettier runs after ESLint
  2. Update rules: Use eslint-config-prettier to disable conflicting rules
  3. Check extension order: Ensure correct extension priority

Performance Issues

If your editor is slow:

  1. Exclude large folders: Add .next, node_modules, etc. to exclude patterns
  2. Disable unused extensions: Disable extensions you don't use
  3. Increase memory: Increase editor memory allocation
  4. Use TypeScript project references: For large monorepos

🎯 Next Steps

With your editor properly configured:

  1. Development Guide - Learn the development workflow
  2. Common Commands - Master the command line tools
  3. Database Guide - Understand the database layer
  4. API Development - Build robust APIs

A well-configured editor significantly improves your development experience. Take time to customize these settings to match your preferences and workflow.

On this page

Editor Setup📝 VS Code (Recommended)Essential ExtensionsCore DevelopmentReact & Next.jsDatabase & SQLGit & Version ControlProductivityVS Code SettingsVS Code Extensions ConfigurationCustom SnippetsDebugging ConfigurationWorkspace Settings🧠 WebStorm/IntelliJ IDEAEssential PluginsWebStorm ConfigurationCode Style SettingsImport OrganizationESLint IntegrationPrettier IntegrationTypeScript ConfigurationWebStorm Live Templates🎯 CursorCursor-Specific SetupAI Model ConfigurationCursor Rules FileAI-Powered DevelopmentCode GenerationRefactoring🔧 Common Editor ConfigurationsPath MappingESLint ConfigurationPrettier Configuration🚀 Editor WorkflowsDevelopment WorkflowDebugging WorkflowRefactoring Workflow🎯 Productivity TipsKeyboard ShortcutsCode NavigationMulti-cursor Editing🔍 TroubleshootingTypeScript IssuesESLint/Prettier ConflictsPerformance Issues🎯 Next Steps