Accélérez votre développement avec ces raccourcis clavier
Attraper la souris pour ouvrir un fichier, naviguer dans les menus ou lancer une recherche brise votre concentration à chaque fois. Ces petites interruptions s’accumulent. La bonne nouvelle : une poignée de raccourcis clavier bien choisis pour les développeurs peut éliminer la plupart d’entre elles sans nécessiter la mémorisation d’une centaine de combinaisons de touches.
Cet article se concentre sur les raccourcis à fort impact regroupés par flux de travail—couvrant VS Code et les DevTools du navigateur. Tous les raccourcis sont listés comme Windows/Linux | macOS. Notez que les raccourcis peuvent varier selon la version de l’éditeur, le système d’exploitation et la configuration utilisateur, donc vérifiez par rapport à votre propre configuration si quelque chose ne se comporte pas comme prévu.
Points clés à retenir
- Un petit ensemble de raccourcis clavier ciblés peut réduire considérablement la dépendance à la souris et vous maintenir dans le flux de travail.
- La navigation, l’édition, la recherche et le débogage ont chacun quelques raccourcis à fort impact qui méritent d’être appris en premier.
- L’édition multi-curseur et le renommage de symboles (
F2) font partie des fonctionnalités les plus efficaces dans VS Code. - Les raccourcis peuvent différer selon les éditeurs, les versions de système d’exploitation et les raccourcis clavier personnalisés—vérifiez toujours par rapport à votre propre configuration.
Navigation : parcourir le code sans toucher la souris
Ces raccourcis VS Code gèrent les tâches de navigation les plus courantes :
| Action | Windows/Linux | macOS |
|---|---|---|
| Ouverture rapide de fichier par nom | Ctrl+P | Cmd+P |
| Aller à la définition | F12 | F12 |
| Retourner à l’emplacement précédent | Alt+← | Ctrl+- |
| Aller au symbole dans le fichier | Ctrl+Shift+O | Cmd+Shift+O |
| Ouvrir la palette de commandes | Ctrl+Shift+P | Cmd+Shift+P |
Ctrl+P / Cmd+P seul remplace la plupart de la navigation dans la barre latérale. Tapez un nom de fichier partiel et ouvrez-le instantanément. Associez-le à F12 pour accéder à une définition, puis Alt+← / Ctrl+- pour revenir—sans souris.
Édition : écrire et restructurer le code plus rapidement
Ces raccourcis de productivité de codage gèrent la manipulation de texte répétitive qui vous ralentit :
- Basculer le commentaire de ligne :
Ctrl+//Cmd+/— fonctionne sur la ligne actuelle ou une sélection. - Déplacer la ligne vers le haut/bas :
Alt+↑/Option+↑etAlt+↓/Option+↓— réorganisez la logique sans couper-coller. - Dupliquer la ligne :
Shift+Alt+↓/Shift+Option+↓— copie la ligne actuelle directement en dessous. - Supprimer la ligne :
Ctrl+Shift+K/Cmd+Shift+K. - Multi-curseur :
Alt+Clic/Option+Clic— placez des curseurs supplémentaires, puis tapez pour éditer toutes les positions en même temps.
L’édition multi-curseur est particulièrement utile lors du renommage de variables répétées ou de l’ajout du même texte à plusieurs lignes simultanément.
Recherche et refactorisation : modifier le code dans plusieurs fichiers
| Action | Windows/Linux | macOS |
|---|---|---|
| Rechercher dans le fichier | Ctrl+F | Cmd+F |
| Rechercher dans tout le projet | Ctrl+Shift+F | Cmd+Shift+F |
| Remplacer dans le fichier | Ctrl+H | Option+Cmd+F |
| Renommer le symbole (toutes les références) | F2 | F2 |
| Sélectionner toutes les occurrences du mot | Ctrl+Shift+L | Cmd+Shift+L |
F2 est la façon la plus propre de renommer une variable ou une fonction. Il met à jour automatiquement chaque référence dans la portée—plus sûr et plus rapide qu’un rechercher-remplacer manuel.
Discover how at OpenReplay.com.
Débogage : les raccourcis clavier DevTools qui comptent
Que vous déboguiez dans VS Code ou dans les DevTools du navigateur, ces raccourcis couvrent le flux de travail principal :
- Basculer le point d’arrêt :
F9(VS Code). - Démarrer / continuer :
F5. - Passer par-dessus :
F10. - Entrer dans :
F11. - Sortir de :
Shift+F11.
Dans Chrome DevTools, ouvrez le panneau avec F12 ou Ctrl+Shift+I / Cmd+Option+I. Une fois à l’intérieur, Ctrl+P / Cmd+P ouvre un sélecteur de fichiers—la même mémoire musculaire que VS Code. Vous pouvez explorer la liste complète dans la documentation des raccourcis DevTools.
Une remarque sur les raccourcis qui ne se transfèrent pas toujours
Plusieurs raccourcis listés dans les guides populaires sont spécifiques à l’éditeur ou entrent en conflit avec les liaisons au niveau du système d’exploitation. Par exemple, Ctrl+D dans VS Code sélectionne l’occurrence suivante du mot surligné—il ne duplique pas la ligne, ce qui est une idée fausse courante provenant d’autres éditeurs. Vérifiez toujours vos raccourcis clavier via Préférences → Raccourcis clavier (Ctrl+K Ctrl+S / Cmd+K Cmd+S) ou la référence officielle des raccourcis clavier VS Code avant de supposer les valeurs par défaut.
Conclusion
Choisissez cinq raccourcis de cette liste qui correspondent à vos actions les plus répétées. Utilisez-les exclusivement pendant une semaine. Une fois qu’ils deviennent automatiques, ajoutez-en cinq de plus. Optimiser votre flux de travail de développeur grâce aux raccourcis ne consiste pas à tout mémoriser—il s’agit d’éliminer les points de friction spécifiques qui interrompent le plus souvent votre réflexion.
FAQ
Appuyez sur Ctrl+P sous Windows/Linux ou Cmd+P sous macOS pour ouvrir la boîte de dialogue Ouverture rapide. Commencez à taper n'importe quelle partie du nom de fichier et sélectionnez-le dans les résultats. C'est plus rapide que de naviguer dans la barre latérale et fonctionne bien même dans les grands projets avec de nombreux fichiers.
Maintenez Alt sous Windows/Linux ou Option sous macOS et cliquez à chaque position où vous voulez un curseur. Vous pouvez ensuite taper, supprimer ou coller à toutes les positions de curseur simultanément. Ceci est particulièrement utile pour éditer des motifs répétés comme des noms de variables ou des lignes de code similaires.
F2 déclenche un renommage de symbole. Contrairement à un rechercher-remplacer basé sur le texte, il comprend le contexte du code et ne renomme que les références réelles à ce symbole dans sa portée. Cela évite les modifications accidentelles de texte non lié qui correspond à la même chaîne.
Pas toujours. Les raccourcis peuvent différer considérablement entre les éditeurs. Par exemple, Ctrl+D sélectionne l'occurrence suivante dans VS Code mais peut dupliquer une ligne dans d'autres éditeurs. Vérifiez toujours les paramètres de raccourcis clavier de votre éditeur pour confirmer ce que fait chaque raccourci avant de vous y fier.
Understand every bug
Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
