Instruction file imported from zombieyang/sd-ppp (
.cursor/rules/vite.mdc). Copyright stays with the author.
description: This rule provides comprehensive best practices, coding standards, and guidelines for developing applications using Vite, covering aspects from code organization and performance to security and testing. globs: **/*.{js,jsx,ts,tsx,vue,svelte}
-
Introduction:
- This document outlines best practices for developing applications using Vite, a fast and opinionated build tool that aims to provide a better development experience.
-
Prerequisites:
- Ensure Node.js and npm/yarn/pnpm are installed.
- Familiarity with JavaScript/TypeScript, HTML, and CSS.
-
Code Organization and Structure:
-
Directory Structure:
- Adopt a modular structure based on features or components.
src/ ├── components/ │ ├── Button/ │ │ ├── Button.tsx │ │ ├── Button.module.css │ │ └── Button.test.tsx │ ├── Input/ │ │ └── ... ├── pages/ │ ├── Home.tsx │ ├── About.tsx │ └── ... ├── services/ │ ├── api.ts │ └── ... ├── utils/ │ ├── helpers.ts │ └── ... ├── App.tsx ├── main.tsx └── vite-env.d.ts
-
File Naming Conventions:
- Use descriptive and consistent names.
- Component files:
ComponentName.tsxorcomponent-name.tsx. - Style files:
ComponentName.module.cssorcomponent-name.module.css. - Test files:
ComponentName.test.tsxorcomponent-name.test.tsx.
-
Module Organization:
- Group related files into modules or folders.
- Use
index.ts(barrel files) to simplify imports. typescript // src/components/Button/index.ts export { default as Button } from './Button';
-
Component Architecture:
- Favor small, reusable components.
- Utilize functional components and hooks in React (or equivalent in Vue/Svelte).
- Separate concerns: presentational vs. container components.
-
Code Splitting Strategies:
- Use dynamic imports (
import()) for lazy loading. - Split routes using
React.lazyor Vue's dynamic component feature. - Configure Vite's
rollupOptions.output.manualChunksfor fine-grained control.
- Use dynamic imports (
-
-
Common Patterns and Anti-patterns:
- Design Patterns:
- Higher-Order Components (HOCs): Carefully consider alternatives like render props or hooks for better composability.
- Render Props: Useful for sharing logic between components, but can lead to deeply nested structures.
- Hooks: Promote code reuse and simplify component logic.
- Recommended Approaches:
- Use environment variables for configuration.
- Implement a consistent API client for data fetching.
- Centralize state management using libraries like Redux, Zustand, or Vuex.
- Anti-patterns:
- Avoid deeply nested component trees without proper optimization.
- Don't mutate state directly; use setState or Vue's reactivity system.
- Overusing global styles; prefer CSS modules or styled components.
- State Management:
- Choose a state management solution based on application complexity.
- Use Redux for complex state management with predictable state transitions and time travel debugging.
- Consider Zustand or Jotai for simpler state management with a smaller bundle size.
- For Vue, Vuex or Pinia are popular choices.
- Error Handling:
- Implement global error boundaries to catch unhandled exceptions.
- Use try-catch blocks for local error handling.
- Log errors to a central error tracking service (e.g., Sentry, Rollbar).
- Design Patterns:
-
Performance Considerations:
- Optimization Techniques:
- Use production-ready code minification and bundling.
- Optimize images and other assets using tools like
imageminor Vite plugins.
- Memory Management:
- Avoid memory leaks by properly cleaning up event listeners and subscriptions.
- Use
useEffectwith a cleanup function in React (oronUnmountedin Vue).
- Rendering Optimization:
- Use memoization techniques (
React.memo,useMemo,shouldComponentUpdate) to prevent unnecessary re-renders. - Virtualize large lists using libraries like
react-windoworreact-virtualized.
- Use memoization techniques (
- Bundle Size Optimization:
- Analyze bundle size using
rollup-plugin-visualizeror similar tools. - Remove unused code using tree shaking.
- Use code splitting to load only necessary code.
- Analyze bundle size using
- Lazy Loading:
- Lazy load components and images that are not immediately visible.
- Use
IntersectionObserverto trigger loading when elements enter the viewport.
- Optimization Techniques:
-
Security Best Practices:
- Common Vulnerabilities:
- Cross-Site Scripting (XSS): Sanitize user input to prevent XSS attacks.
- Cross-Site Request Forgery (CSRF): Use CSRF tokens to protect against CSRF attacks.
- Injection Attacks: Validate and sanitize input to prevent SQL injection and other injection attacks.
- Input Validation:
- Validate all user input on both the client and server side.
- Use a library like
yuporjoifor schema validation.
- Authentication and Authorization:
- Use a secure authentication and authorization mechanism (e.g., OAuth 2.0, JWT).
- Store passwords securely using bcrypt or Argon2.
- Data Protection:
- Encrypt sensitive data at rest and in transit.
- Use HTTPS for all communication.
- Secure API Communication:
- Implement proper CORS configuration to prevent unauthorized access to your API.
- Rate limit API requests to prevent abuse.
- Common Vulnerabilities:
-
Testing Approaches:
- Unit Testing:
- Write unit tests for individual components and functions.
- Use testing libraries like Jest, Mocha, or Vitest.
- Mock dependencies to isolate units under test.
- Integration Testing:
- Test the interaction between different parts of your application.
- Use testing libraries like React Testing Library or Vue Test Utils.
- End-to-End Testing:
- Test the entire application from the user's perspective.
- Use tools like Cypress or Playwright.
- Test Organization:
- Organize tests into folders based on features or components.
- Use descriptive test names.
- Mocking and Stubbing:
- Use mocks and stubs to isolate units under test.
- Avoid over-mocking; test the actual implementation whenever possible.
- Unit Testing:
-
Common Pitfalls and Gotchas:
- Frequent Mistakes:
- Improperly handling asynchronous operations.
- Neglecting accessibility considerations.
- Using outdated dependencies.
- Edge Cases:
- Handling different screen sizes and devices.
- Supporting internationalization and localization.
- Dealing with slow network connections.
- Version-Specific Issues:
- Be aware of breaking changes in Vite and its plugins.
- Pin dependencies to specific versions to avoid unexpected issues.
- Compatibility Concerns:
- Test your application in different browsers and devices.
- Use polyfills to support older browsers.
- Debugging Strategies:
- Use browser developer tools to inspect the DOM, network requests, and console output.
- Use debugging tools like
debuggerorconsole.log.
- Frequent Mistakes:
-
Tooling and Environment:
- Recommended Tools:
- VS Code with extensions like ESLint, Prettier, and TypeScript.
- Chrome DevTools or Firefox Developer Tools.
- npm/yarn/pnpm for package management.
- Build Configuration:
- Configure Vite using
vite.config.tsorvite.config.js. - Customize build options like
outDir,assetsDir, androllupOptions.
- Configure Vite using
- Linting and Formatting:
- Use ESLint with recommended rulesets (e.g.,
eslint:recommended,plugin:react/recommended). - Use Prettier for code formatting.
- Configure ESLint and Prettier to work together.
- Use ESLint with recommended rulesets (e.g.,
- Deployment Best Practices:
- Deploy to a CDN for optimal performance.
- Use environment variables for configuration.
- Set up proper caching headers.
- CI/CD Integration:
- Integrate with a CI/CD pipeline for automated testing and deployment.
- Use tools like GitHub Actions, GitLab CI, or CircleCI.
- Recommended Tools:
-
TypeScript Best Practices (when using TypeScript):
-
Strict Type-Checking:
- Enable strict type-checking options in
tsconfig.json(e.g.,strict: true,noImplicitAny: true,strictNullChecks: true).
- Enable strict type-checking options in
-
Typing Props and State:
- Use interfaces or types to define the shape of props and state. typescript interface ButtonProps { label: string; onClick: () => void; }
const Button: React.FC = ({ label, onClick }) => { return {label}; };
-
-
ESLint Configuration (Example): javascript module.exports = { env: { browser: true, es2021: true, node: true, }, extends: [ 'eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended', 'prettier', ], parser: '@typescript-eslint/parser', parserOptions: { ecmaFeatures: { jsx: true, }, ecmaVersion: 12, sourceType: 'module', }, plugins: ['react', '@typescript-eslint', 'prettier'], rules: { 'prettier/prettier': 'error', 'react/react-in-jsx-scope': 'off', '@typescript-eslint/explicit-function-return-type': 'off', '@typescript-eslint/no-explicit-any': 'warn', }, };
-
Conclusion:
- Following these best practices will help you build efficient, maintainable, and secure applications with Vite. Continuously review and update your practices as the library and ecosystem evolve.
