Retour • 26/10/2024
Cursor me rend plus productif : voici mes méthodes
Écris par Melvyn Malherbe le 26/10/2024
L'AI a toujours le même problème, c'est le contexte et avoir des informations à jour. Pourtant avec mes techniques, j'ai réussi en partie à résoudre ce problème.
Dans cet article je vais te partager 3 techniques :
- La puissance d'avoir une bonne configuration
.cursorrules
- La puissance du dossier
prompts
- La puissance du contexte avec
@
1. La puissance d'avoir une bonne configuration .cursorrules
Tu peux créer un fichier dans tes projets qui s'appelle .cursorrules
et y mettre toutes les règles que tu veux utiliser pour ton projet.
Ce prompt sera constamment utilisé par l'AI pour les générations de code, il va donc falloir réussir à être très précis tout en n'en rajoutant pas trop.
Voici le mien pour une application NextJS :
Develop TypeScript, Node.js, and Next.js applications following provided conventions and guidelines.
**Code Style and Structure**
- Write concise, technical TypeScript code using functional and declarative programming patterns.
- Avoid classes; prefer iteration and modularization over code duplication.
- Use descriptive variable names with auxiliary verbs (e.g., `isLoading`, `hasError`).
- Structure files into: exported component, subcomponents, helpers, static content, and types.
**Naming Conventions**
- Use lowercase with dashes for directories (e.g., `components/auth-wizard`).
- Favor named exports for components.
**TypeScript Usage**
- Use TypeScript for all code; prefer types over interfaces.
- Avoid enums; use maps instead.
- Use functional components with TypeScript types.
**Syntax and Formatting**
- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
- Write declarative JSX.
**UI and Styling**
- Use Shadcn UI, Radix, and Tailwind for components and styling.
- Implement responsive design with Tailwind CSS using a mobile-first approach.
**Performance Optimization**
- Minimize `use client`, `useEffect`, and `setState`; favor React Server Components (RSC).
- Wrap client components in `Suspense` with fallback.
- Use dynamic loading for non-critical components.
- Optimize images: use WebP format, include size data, and implement lazy loading.
**Database Querying & Data Model Creation**
- Use Prisma SDK to query the database.
- For data models, read the `.prisma` files.
**Key Conventions**
- Use 'nuqs' for URL search parameter state management.
- Optimize Web Vitals (LCP, CLS, FID).
- Limit 'use client': Favor server components and Next.js SSR for data fetching or state management.
- Use 'use client' only for Web API access in small components.
**PostgresQL**
- Use valid PostgresQL syntax with guillemets for table and column names.
**React 19**
- Utilize React 19 with Server Components. Implement Prisma queries and backend logic inside `page` or `layout` files like this:
\`\`\`tsx
// Use "async" for server components
export default async function Page() {
// Use "await" for async operations
const result = await prisma.user.findMany();
return (
<div>
{result.map((user) => (
<p>{user.name}</p>
))}
</div>
);
}
\`\`\`
- Avoid using React hooks within server components.
**Creating a component**
- You always use `export function` without "default" or named export.
- You always use an object "props" as the first argument of your component, and add type directly in the object.
Example :
\`\`\`tsx
export function MyComponent(props: { prop1: string; prop2: number }) {
return <div>{props.prop1}</div>;
}
\`\`\`
Dans ce fichier, j'ai précisé toutes les choses qu'il faut. Les générations de code se sont bien améliorées.
Il faut vraiment tout lui préciser :
- quel style de code utiliser (
type
vsinterface
) - quel style de nommage utiliser
- quelle librairie tu utilises (next-safe-action ou next-zod-route)
- etc...
Ensuite, quand tu vois que l'AI génère mal du code : modifie ta configuration !
Attention à ne pas trop rajouter d'info. Plus le contexte d'une AI est rempli,
moins elle écoute. Il faut réussir à mettre les informations essentielles sur ton
style. La prochaine méthode va permettre de gérer les edge cases
.
2. La puissance du dossier prompts
Maintenant ce que tu vas faire dans chaque projet c'est créer un dossier prompts
qui va contenir des fichiers markdown.
Par exemple l'AI a beaucoup de mal à créer des useMutation
qui respectent mon style.
J'ai donc créé un fichier prompts/use-mutation.md
qui va contenir toutes les règles que je veux utiliser pour le useMutation
:
## Usage with server-action
`Server-action` is method that finish with "action" suffix.
You can use it like this :
\`\`\`tsx
import { resolveActionResult } from '~/lib/actions/actions.utils';
const mutationWithName = useMutation({
mutationFn: async ({ someParams }: { someParams: string }) => {
// You always need to call the action INSIDE the resolveActionResult WITHOUT await
return resolveActionResult(someAction({ someParams }));
},
// Error is equal to "serverError" of someAction
onError: (error) => {
toast.error(error.message);
},
// Data is equal to "data" of someAction, data is required
onSuccess: (data) => {
toast.success('Invoice marked as paid');
// Optionally refresh data or update state
},
});
\`\`\`
## API
// Copy paste all documentation from use-mutation.ts
Ici je lui ai montré comment j'utilise le useMutation
et comme je l'utilise 90% du temps avec des server-action
, je lui ai aussi expliqué comment je l'utilise.
De cette manière, quand je veux faire un prompt pour générer des use-mutation
je vais toujours taguer mon fichier.
C'est très puissant. Tu peux créer des prompts complexes. Je pense clairement que l'équipe de Cursor va travailler pour rendre ce genre de méthode plus puissante.
Pour l'instant les limitations c'est le fait de ne pas pouvoir ajouter des fichiers dans les fichiers prompt
qui seront utilisés par l'AI.
3. La puissance du contexte avec @
La dernière étape c'est vraiment d'utiliser le @
à profusion. Chaque fois que tu lui demandes quelque chose avec le composer ou CMD+K
il faut que tu te demandes :
- Quel autre fichier pourrait lui être utile ?
Il faut vraiment se demander ce qui serait intéressant pour lui. Plus tu lui donnes des exemples, plus il réussit.
C'est très puissant et je t'invite à le faire tout le temps. Toujours taguer un maximum d'informations pour que l'AI puisse réussir à avoir les bons résultats.
Conclusion
Voici comment je fais pour avoir de bons résultats avec Cursor.
Je mets toutes mes méthodes et techniques dans ma formation NextAI que tu peux tester gratuitement ici.
On se retrouve là-bas.