Introduction
La génération de code avec Cursor AI a révolutionné la manière dont les développeurs travaillent. En intégrant l’intelligence artificielle directement dans l’environnement de développement, Cursor AI permet une productivité accrue et une meilleure qualité de code. Cependant, pour tirer pleinement parti de cet outil, il est crucial de maîtriser certaines techniques et configurations.
Dans cet article, nous allons explorer trois techniques essentielles pour optimiser l’utilisation de Cursor AI : la configuration .cursorrules, l’utilisation du dossier prompts, et l’importance du contexte avec @. Nous verrons également comment ces techniques peuvent être appliquées pour améliorer la productivité et la qualité du code généré.
1. La puissance d’avoir une bonne configuration .cursorrules
La configuration .cursorrules est un fichier essentiel qui guide Cursor AI dans la génération de code. En définissant des règles précises, vous pouvez améliorer significativement la qualité et la cohérence du code généré.
Exemple de configuration .cursorrules pour une application NextJS
Voici un exemple de configuration .cursorrules 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 ( {result.map((user) => ( {user.name}
))} ); } ``` - 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 {props.prop1}; } ``` Cette configuration détaille les conventions de codage, les noms de variables, les types de données, et les optimisations de performances. En précisant ces règles, vous aidez Cursor AI à générer du code cohérent et de haute qualité.
2. La puissance du dossier prompts
Le dossier prompts permet de créer des fichiers markdown contenant des règles spécifiques pour des tâches de codage particulières. Cela permet de guider Cursor AI dans la génération de code pour des cas d’utilisation spécifiques.
Exemple de prompt pour useMutation
Voici un exemple de fichier prompt pour la génération de 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 En fournissant des prompts détaillés, vous aidez Cursor AI à comprendre les spécificités de votre projet et à générer du code adapté à vos besoins.
3. La puissance du contexte avec @
L’utilisation du symbole @ permet d’enrichir le contexte fourni à Cursor AI. Cela permet d’inclure des fichiers, des dossiers, des recherches web, ou des accès à des dépôts GitHub, ce qui améliore la précision des suggestions de code.
Exemples d’utilisation du symbole @
- @files : Référencer des fichiers spécifiques
- @docs : Inclure de la documentation
- @git : Analyser l’historique des modifications
- @rules : Appliquer des règles précises
En utilisant ces annotations, vous fournissez à Cursor AI un contexte riche et détaillé, ce qui améliore la qualité des suggestions de code.
Conclusion
En maîtrisant ces techniques, vous pouvez transformer votre workflow de développement et améliorer considérablement votre productivité. Cursor AI, avec ses fonctionnalités avancées et son intégration profonde avec l’IA, est un outil puissant pour les développeurs cherchant à optimiser leur code et leur processus de développement.
Pour en savoir plus sur nos services de développement web et mobile sur mesure à Nice, n’hésitez pas à nous contacter.
0 commentaires