Volcomix/vite-react-ts

Vite React TypeScript with linters, typing and styling predefined settings

Vite React TypeScript

Vite starter template with opinionated predefined settings.

Features

• Vite with React and TypeScript
• Prettier, ESLint and Stylelint
• Pre-commit hook with Husky and lint-staged
• Static typing for CSS modules with typescript-plugin-css-modules
• Import aliases for an opinionated folder structure (can be customized in vite.config.ts). Highly inspired by Robin Wieruch's post

Getting started

Use this repository as a GitHub template or use degit to scaffold your project locally:

npx degit volcomix/vite-react-ts my-project
cd my-project

pnpm install
pnpm dev

VSCode integration

You need to use the workspace version of TypeScript in order to get CSS modules static typing working. See the TypeScript plugin repository for advanced usage.

This starter template works well with the following extensions:

• Prettier - Code formatter
• ESLint
• Stylelint

Fix all, organize imports and format on save work seamlessly when configured in user or workspace settings:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true
  }
}