Comment configurer VSCode pour améliorer votre productivité

Les éditeurs de code ont évolué au fil des ans. Il y a quelques années, il n'y avait pas de Visual Studio Code (VS Code). Vous utilisiez probablement Sublime Text, Atom, Bracket, etc. Mais avec la sortie de VS Code, il est devenu l'éditeur de code préféré de la plupart des développeurs.

Pourquoi VS Code?

Les développeurs l'adorent car

  • C'est personnalisable
  • Débogage facile
  • Emmet
  • Extensions
  • Intégration Git
  • Terminal intégré
  • Intellisense
  • Theming et plus encore…

Maintenant que vous avez vu les avantages de l'utilisation de VS Code, cet article couvre la configuration de VS Code et les extensions nécessaires lors de l'utilisation de VS Code pour une productivité maximale.

Terminal

Vous pouvez configurer votre terminal pour utiliser iTerm2 et ZSh et configurer votre terminal VS Code pour l'utiliser.

Après avoir configuré Zsh, lancez le terminal intégré VS Code Terminal > New Terminal et exécutez la commande

source ~/.zshrc

ou

. ~/.zshrc

pour exécuter le contenu du fichier de configuration .zshrc dans le shell.

Police de caractère

FiraCode a l'air cool en raison du support des ligatures. Téléchargez et installez FiraCode, puis ajoutez-le à votre settings.jsonfichier.

"editor.fontFamily": "Fira Code","editor.fontLigatures": true,

Lancement depuis la ligne de commande

Lancer VS Code à partir du terminal semble cool. Pour ce faire, appuyez sur CMD + SHIFT + P, tapez la commande shell et sélectionnez la commande Installer le code dans le chemin . Ensuite, accédez à n'importe quel projet à partir du terminal et tapez code .dans le répertoire pour lancer le projet à l'aide de VS Code.

Configuration

Les configurations VS Code non spécifiques à un espace de travail sont hébergées dans le fichier settings.json. Vous pouvez configurer VS Code en fonction de vos préférences.

Pour lancer settings.json, appuyez sur

CMD + ,

Copiez et collez le code ci-dessous dans le fichier settings.json:

{ "editor.multiCursorModifier": "ctrlCmd", "editor.formatOnPaste": true, "editor.wordWrap": "bounded", "editor.trimAutoWhitespace": true, "editor.fontFamily": "Fira Code", "editor.fontLigatures": true, "editor.fontSize": 14, "editor.formatOnSave": true, "files.autoSave": "onFocusChange", "emmet.syntaxProfiles": { "javascript": "jsx" }, "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact" ], "javascript.validate.enable": true, "git.enableSmartCommit": true, "files.trimTrailingWhitespace": true, "editor.tabSize": 2, "gitlens.historyExplorer.enabled": true, "diffEditor.ignoreTrimWhitespace": false, "workbench.sideBar.location": "right", "explorer.confirmDelete": false, "javascript.updateImportsOnFileMove.enabled": "always",}

Extensions

Vous trouverez ci-dessous des extensions utiles qui peuvent améliorer votre expérience de développeur lorsque vous travaillez sur une base de code.

Pour accéder à ces extensions,

  • Aller aux View -> Extensions
  • Rechercher des extensions sur le marché
  • Cliquez sur Installer

1. Importation automatique

Avec cette extension, vous n'avez pas besoin d'importer manuellement des fichiers. Si vous travaillez sur un projet basé sur des composants, entrez simplement le nom du composant et il sera automatiquement importé.

2. Ajoutez des commentaires jsdoc

Cela ajoute un bloc de commentaires au code. Pour l'utiliser, mettez en surbrillance la première ligne de la fonction, appuyez sur CMD + SHIFT + Pet sélectionnez Ajouter des commentaires de doc.

3. ESDoc MDN

Dans certains scénarios, nous avons tendance à oublier comment fonctionne une chose particulière. C'est là que cette extension devient utile. Vous n'avez pas besoin de lancer votre navigateur Web pour connaître la syntaxe. Tout ce dont vous avez besoin est de taper

//mdn [object].[method];

4. CSS Peek

Comme son nom l'indique, cela vous aide à jeter un œil sur les règles appliquées par un style défini dans une base de code et sa spécificité. Il est pratique lorsque vous travaillez sur des bases de code héritées.

5. GitLens

GitLens améliore ce que vous pouvez réaliser avec Git. Cela vous aide à faire beaucoup plus, comme explorer de manière transparente les référentiels Git, consulter les révisions de code, la paternité et bien plus encore.

6. ESLint

Cela intègre ESLint dans VS Code pour lint vos codes. Le projet sur lequel vous travaillez doit avoir ESLint installé localement ou globalement pour profiter des fonctionnalités offertes par cette extension.

Pour installer ESLint localement, exécutez

npm install eslint

ou globalement en utilisant

npm install -g eslint

Vous devrez également créer .eslintrcun fichier de configuration. Si vous avez installé ESLint localement, exécutez

./node_modules/.bin/eslint --init

ou

eslint --init

pour une installation globale.

7. Débogueur pour Chrome

Cela vous permet de déboguer votre code JavaScript directement depuis le navigateur Google Chrome

8. Google Fonts

Adding Google fonts just got easier with this extension. You no longer need to search for fonts in the browser. To access a list of fonts, pressCMD + SHIFT + P and search for Google fonts to proceed.

9. TODO Highlight

With a lot to work on which needs to be prioritized, sometimes you may tend to forget tasks yet to be completed. TODO highlight makes these easily seen by highlighting them.

10. Docker

You can create Dockerfiles on the fly with this extension. It also provides syntax highlighting, intellisense and much more.

Press CMD + SHIFT + P and search for Add Docker files to workspace.

11. Code Spellchecker

This comes in handy to identify typographical errors within the codebase.

12. Import Cost

Import Cost shows the impact of imported packages within the code. It helps measure performance bottlenecks.

13. HTMLHint

This extension validates your HTML helping you to write standards-compliant code.

14. Peacock

This extension gives you the ability to change the colour of your workspace. It is ideal when you have multiple VS Code instances and you want to quickly identify a particular instance.

After installing Peacock, click on the settings icon > settings, select workspace settings tab, click on {} and paste the code below.

{ "workbench.colorCustomizations": { "activityBar.background": "#e90b8d", "activityBar.foreground": "#fff", "activityBar.inactiveForeground": "#b5b5b5", }, "peacock.affectedElements": [ "activityBar", ]}

You can also add titleBar and statusBar to the affectedElements and add color customizations for them within the colorCustomizations section.

To use one of the default colors, press CMD + SHIFT + P, type peacock and select your preferred theme. This overrides the color settings within the settings.json file defined for that workspace.

15. Prettier

Do you always press the spacebar or tab key when coding? Here comes Prettier to the rescue. It formats lines of code and makes it readable.

Check out the awesome things you can do with Visual Studio Code here.

Feel free to drop what works for you in the comment section and share this article.

Also, check out my blog for more articles.