27 outils VS Code géniaux pour les développeurs JavaScript modernes

Visual Studio Code (également connu sous le nom de VS Code et VSCode) est un éditeur de code multiplateforme rentable mais puissant conçu comme une application de bureau. Selon l'auteur du document, dont nous publions la traduction aujourd'hui, VS Code prend en charge de nombreux outils de développement - tels que TypeScript et le débogueur Chrome. Ceci, ainsi que le fait qu'un nombre incroyable d'extensions open source y ont été écrites, fait de VS Code un éditeur très populaire et apprécié de beaucoup.



Si vous souhaitez ajouter quelque chose de nouveau à votre arsenal de programmeur JavaScript - l'auteur du document espère que vous trouverez ici quelque chose qui vous sera utile. Les vingt-sept outils examinés ici ne sont pas tous destinés uniquement au développement JS. Mais tous peuvent être appliqués avec succès par ceux qui écrivent en JavaScript.

1. Extraits de projet

L' extension Project Snippets , ma préférée de tous les temps, est basée sur l'outil User Snippets intégré à VS Code.

Si vous n'êtes pas familier avec cette fonctionnalité VS Code standard, sachez qu'elle permet à l'utilisateur de concevoir ses propres fragments de code sous la forme de soi-disant extraits. Cela se fait afin de les réutiliser dans leurs projets. Que signifie la réutilisation?

Prenons un exemple. Supposons que vous constatiez que vous devez souvent écrire le même code passe-partout. Par exemple - ceci:

import { useReducer } from 'react' const initialState = {   // } const reducer = (state, action) => {   switch (action.type) {     default:       return state   } } const useSomeHook = () => {   const [state, dispatch] = useReducer(reducer, initialState)   return {     ...state,   } } export default useSomeHook 

Un code similaire peut être émis sous la forme d'un extrait. Par conséquent, au lieu de saisir tout cela à partir du clavier (ou de copier quelque part), il vous suffit de saisir le soi-disant préfixe, après quoi un code correspondant à ce préfixe apparaîtra dans l'éditeur.

Si vous, dans VS Code, accédez à File > Preferences > User Snippets , vous pouvez éventuellement créer un nouveau New Global Snippets File global en sélectionnant la commande New Global Snippets File .

Par exemple, afin de créer un nouveau fichier d'extrait pour les projets React qui utilisent TypeScript, vous pouvez sélectionner la commande New Global Snippets File et définir le nom de fichier comme typescriptreact.json . Le fichier .json nouvellement créé sera ouvert dans l'éditeur, dans lequel il sera possible de décrire des extraits.

Créez un extrait basé sur un fragment du code ci-dessus. Pour ce faire, le fichier typescriptreact.json doit être converti comme suit:

 {  "const initialState = {}; const reducer = (state, action)": {    "prefix": "rsr",    "body": [      "const initialState = {",      " //$1",      "}",      "",      "const reducer = (state, action) => {",      " switch (action.type) {",      "  default:",      "   return state",      " }",      "}"    ]  } } 

Maintenant que le fichier a une telle description de l'extrait, vous pouvez créer un nouveau fichier TypeScript avec l'extension .tsx et y entrer le préfixe rsr . Cela entraînera une fenêtre contextuelle avec une description de l'extrait. Appuyez sur Tab terminer la procédure d'insertion d'un extrait de code dans un fichier. Il sera représenté par le code suivant:

 const initialState = {  // } const reducer = (state, action) => {  switch (action.type) {    default:      return state  } } 

Certains inconvénients de l'utilisation d'extraits globaux sont qu'ils sont disponibles pour tous les projets que vous développez (cependant, dans certains cas, pour les extraits à usage général, cela, au contraire, est pratique). Mais certains projets peuvent être configurés d'une manière spéciale. Par conséquent, si ce qui est utilisé dans de tels projets n'est pas nécessaire dans tous les projets, le fichier d'extrait global n'est peut-être pas la meilleure solution au problème de traitement de fragments de code réutilisable.

Supposons qu'un projet utilise une structure de dossiers spéciale. Pour simplifier le travail sur ce projet, quelque chose de similaire au code suivant peut être préparé dans le fichier typescriptreact.json :

 {  "import Link from components/common/Link": {    "prefix": "gcl",    "body": "import Link from 'components/common/Link'"  },  "border test": {    "prefix": "b1",    "body": "border: '1px solid red',"  },  "border test2": {    "prefix": "b2",    "body": "border: '1px solid green',"  },  "border test3": {    "prefix": "b3",    "body": "border: '1px solid magenta',"  } } 

Faites attention au premier extrait. Il peut très bien convenir à un projet avec une structure de dossiers et de fichiers spécifique. Mais que se passe-t-il si nous travaillons sur un autre projet dans lequel le composant Link est situé le long d'un chemin comme les components/Link ?

Jetez un oeil maintenant à d'autres extraits. Ils utilisent des guillemets simples. Leur utilisation conduit à l'apparition de structures comme la border: '1px solid red' dans le code.

De telles constructions peuvent être parfaitement utilisées en JavaScript. Mais que se passe-t-il si nous utilisons la bibliothèque de composants stylisés comme outil pour styliser un projet? Dans ce cas, une telle syntaxe ne nous conviendra pas. En effet, les composants stylisés utilisent des constructions CSS régulières!

En fait, ici, l'extension Project Snippets vient à notre aide.

Cette extension vous permet de créer des extraits qui fonctionnent au niveau du projet ou de l'espace de travail. Ces extraits ne sont pas en conflit avec les extraits créés pour d'autres projets et n'interfèrent pas avec leur utilisation. C'est très pratique.

2. De meilleurs commentaires

Si vous aimez écrire des commentaires dans votre code, vous êtes probablement confronté au fait qu'il n'est parfois pas facile de trouver un commentaire écrit il y a longtemps. La raison en est peut-être que le code peut se développer un peu.

En utilisant l'extension Better Comments , vous pouvez mettre en surbrillance les commentaires de différentes couleurs.


Utilisation de l'extension Better Comments

Maintenant, entre autres, si vous travaillez sur du code en équipe, il vous sera plus facile d'attirer l'attention des autres développeurs sur des commentaires importants en commençant par ! ou ? .

3. Coloriseur de paire de supports

Lorsque j'ai vu des captures d'écran pour la première fois avec les résultats de l'extension Bracket Pair Colorizer , il est devenu clair pour moi que cette extension devait simplement apparaître dans ma boîte à outils.

La programmation est ma passion, et mettre en évidence les crochets est quelque chose qui m'aide certainement à profiter plus pleinement de cette activité.


Utilisation de l'extension Bracket Pair Colorizer

4. Thème matériel

Le thème Material, introduit par l'extension Material Theme , est un phénomène grandiose qui est maintenant disponible pour les fans de VS Code. Son utilisation vous permet d'apporter le code sous la forme suivante.


Créer du code en utilisant le thème Material

Cela doit être l'un des meilleurs sujets existants.

5. @ typescript-eslint / parser

Si vous écrivez en TypeScript, vous devriez probablement envisager de basculer vos configurations TSLint vers typescript-eslint. Le fait est que, selon certains rapports , le support TSLint de Palantir sera interrompu après un certain temps. Au lieu de TSLint, typescript-eslint y sera utilisé.

Les projets passent progressivement à l'utilisation du package @ typescript-eslint / parser et des packages associés. Cela se fait dans le but de se préparer aux futurs changements dans l'écosystème de développement TS. Si vous aimez Prettier , vous pouvez utiliser cet outil, en utilisant la majorité des règles ESLint.

6. Stylelint

Stylelint est l'outil qui est toujours utilisé dans mes projets. Cela est vrai pour plusieurs raisons:

• Cela aide à éviter les erreurs.
• Il favorise les conventions de style lors de l'écriture CSS.
• Cela fonctionne bien avec Prettier.
• Il prend en charge CSS / SCSS / Sass / Less.
• Il prend en charge les plugins créés par la communauté des développeurs.

7. Markdownlint + docsify

Je ne sais pas comment les autres développeurs prennent des notes pendant les sessions de brainstorming, mais j'aime prendre des notes au format Markdown . Il s'agit d'un format simple et pratique. Il existe de nombreux outils disponibles pour vous aider à rédiger des textes Markdown. Parmi ces outils, on peut noter markdownlint .

Il s'agit de l'extension VS Code, qui est un linter qui permet de vérifier les styles dans les fichiers .md . Il prend également en charge la mise en forme du texte à l'aide de Prettier.

De plus, j'utilise généralement docsify dans tous mes projets. Cet outil prend en charge le format Markdown et d'autres fonctionnalités utiles.

8. TODO Highlight

J'ai l'habitude d'écrire des notes directement dans le code sur ce qui doit être fait dans le projet. En conséquence, je suis intéressé par des extensions comme TODO Highlight . Cette extension vous aide à travailler avec des notes TODO.

9. Coût d'importation

L'extension Import Cost appartient à la catégorie des outils dont l'utilité se fait sentir lors de leur première utilisation. Cependant, après avoir utilisé un outil similaire pendant un certain temps, il peut s'avérer qu'il ne sera plus nécessaire. Le fait est qu'au fil du temps, le développeur sait déjà exactement quelles informations donneront un tel outil. Cependant, je recommande toujours d'utiliser cette extension pendant un certain temps. Il se pourrait bien que cela vous profite.

10. Mettez en surbrillance la balise correspondante

Parfois, la recherche de la partie de fermeture d'une certaine balise peut devenir une tâche difficile. Dans de tels cas, l'extension Highlight Matching Tag peut être utile.


Utilisation de l'extension de balise de correspondance de surbrillance

11. vscode-spotify

Parfois, je m'ennuie du fait que dans le processus de travail dans VS Code, je dois constamment basculer vers le lecteur de musique pour changer de piste, puis revenir à mon entreprise.

L' extension vscode-spotify , qui vous permet de contrôler le lecteur Spotify directement depuis VS Code, m'aide à résoudre ce problème.

Grâce à cette extension, vous pouvez voir des informations sur le morceau en cours de lecture dans la barre d'état de l'éditeur. Vous pouvez utiliser des raccourcis clavier pour changer d'enregistrement; Spotify peut également être contrôlé à partir de VS Code à l'aide de boutons.

12. GraphQL pour VSCode

La technologie GraphQL gagne en popularité, des exemples de son application peuvent être vus dans presque tous les coins du développement JavaScript. Par conséquent, beaucoup sont plus susceptibles de trouver l' extension GraphQL pour VSCode utile.

Cette extension prend en charge la coloration syntaxique GraphQL, le linting, l'achèvement du code.

J'utilise beaucoup Gatsby, donc je dois lire le code GraphQL tous les jours. L'extension GraphQL pour VSCode m'aide avec cela.

13. Indent-Rainbow

L'extension Indent-Rainbow est similaire à l'extension Highlight Matching Tag décrite ci-dessus. Si parfois il n'est pas facile pour vous de comprendre l'indentation, cette extension vous aidera à résoudre le problème en améliorant la lisibilité du code. Voici un exemple de son utilisation.


Utilisation de l'extension Indent-Rainbow

14. Couleur en surbrillance

Color Highlight est l'une de ces extensions qui me sont posées: "Où l'avez-vous trouvée?". Cette extension aide à travailler avec la couleur. Cela ressemble à ci-dessous.


Utilisation de l'extension de surbrillance des couleurs

15. Sélecteur de couleurs

Color Picker est une extension pour VS Code qui offre à l'utilisateur une interface graphique pour vous aider à choisir les couleurs à utiliser en CSS.

16. Client REST

Lorsque j'ai eu l'occasion d'essayer l'extension client REST pour la première fois, cela ne m'a pas semblé particulièrement utile. Il ne pouvait pas être comparé à quelque chose comme Postman .

Mais progressivement, il s'est avéré que cette expansion a un impact positif énorme sur mon travail. Surtout quand j'avais besoin de tester certaines API.

Lorsque vous travaillez avec, il suffit, par exemple, de créer un nouveau fichier dans lequel il n'y aura qu'une seule ligne:

 https://google.com 

Pour exécuter la requête HTTP GET à cette adresse, sélectionnez-la, allez dans la barre de commandes ( CTRL + SHIFT + P ) et sélectionnez la commande Rest Client: Send Request . Après cela, un nouvel onglet sera ouvert, dans lequel très bientôt des informations sur la demande et la réponse apparaîtront. C'est très utile.


Utilisation de l'extension client REST

Cette extension vous permet également de configurer des paramètres ou des données pour les requêtes POST. Cela se fait avec seulement quelques lignes de code:

 POST https://test.someapi.com/v1/account/user/login/ Content-Type: application/json { "email": "someemail@gmail.com", "password": 1 } 

Une telle construction conduira à une requête POST avec les paramètres { "email": "someemail@gmail.com", "password": 1 } .

Et ceci, en fait, n'est qu'une description extrêmement concise des possibilités de cette extension.

17. Paramètres de synchronisation

Je n'aimais vraiment pas, lors de la mise en place d'un nouveau lieu de travail, faire des listes des extensions que j'utilisais, puis les enregistrer dans quelque chose comme Evernote , puis tout restaurer manuellement.

J'ai pu automatiser ce processus en utilisant l'extension Settings Sync .

Pour l'utiliser, il vous suffit d'avoir un compte gist / GitHub . S'il est nécessaire d'enregistrer les paramètres (cela inclut les liaisons de clavier, les extraits et les extensions, et bien plus encore) - utilisez simplement la combinaison de touches SHIFT + ALT + U Cela chargera tous ces paramètres dans le compte gist. Cependant, ils ne seront disponibles que pour le titulaire du compte. Pour télécharger les paramètres, par exemple, lorsque vous passez à un nouvel ordinateur, installez simplement cette extension, entrez les informations du compte essentiel et utilisez la combinaison de touches SHIFT + ALT + D

18. Todo Tree

L'extension Todo Tree vous aide à trouver des commentaires TODO dans le code de votre projet. Il prépare ces commentaires au format de l'arborescence affichée à gauche de l'écran.


Utilisation de l'extension Todo Tree

19. Toggle Quotes

Toggle Quotes est une extension intéressante qui vous permet de modifier l'apparence des citations utilisées dans le code. Cela s'avère très utile, par exemple, dans les cas où vous devez remplacer les guillemets réguliers par des backticks (backticks). Cela peut être nécessaire lors de l'interpolation de chaînes, et cela peut être particulièrement utile lorsque des chaînes de style Prettier utilisent des guillemets simples réguliers.


Utilisation de l'extension Toggle Quotes

20. Mieux aligner

L'extension Better Align vous permet d'aligner le code sans le mettre en évidence au préalable.

Pour utiliser cette extension, vous devez placer le curseur dans le code à aligner, ouvrir la barre de commandes (à l'aide de CTRL + SHIFT + P ou du raccourci clavier que vous avez attribué pour effectuer cette tâche) et appeler la commande Align .

21. Balise de fermeture automatique

L'extension Auto Close Tag m'aide depuis le jour où j'ai commencé à travailler chez VS Code. Il vous permet d'entrer quelque chose comme <div> , puis l'icône / , puis ferme automatiquement la balise.

Cette fonction simple et pratique n'est pas dans les fonctionnalités standard de VS Code, donc je trouve cette extension très utile.

22. Trier les lignes

Je n'aime pas les tableaux dont les éléments ne sont pas classés par ordre alphabétique. L'extension Sort Lines m'aide à résoudre rapidement ce problème. Si vous n'aimez pas non plus ces tableaux, cela peut vous être utile.

23. VSCode Google Translate

Je suis peut-être la seule personne à trouver utile l'extension VSCode Google Translate . Mais cela m'aide, car je dois participer à des projets sur lesquels des gens qui parlent différentes langues travaillent avec moi. Cette extension peut être utile pour ceux qui, pour traduire quelque chose, ne veulent pas réduire VS Code.

24. Plus joli

Prettier est une extension pour VS Code qui peut automatiquement formater du code écrit en JavaScript, TypeScript et d'autres langages.

25. Thème d'icône matérielle

J'aime les icônes du package Material Icon Theme plus que les autres. Leur utilisation est beaucoup plus facile à distinguer entre les types de fichiers. Cela est particulièrement vrai dans les cas où un thème sombre est utilisé dans VS Code.

26. IntelliSense pour les noms de classe CSS en HTML

L'extension de nom long IntelliSense pour les noms de classe CSS en HTML vous permet d'équiper VS Code de la possibilité de compléter automatiquement les noms de classe CSS dans l' attribut HTML de classe . Son travail est basé sur des définitions de classe trouvées dans votre espace de travail.

27. Path Intellisense

L'extension Path Intellisense permet de compléter automatiquement la saisie des noms de fichiers.

Résumé

Nous espérons que parmi les extensions pour VS Code que vous venez de lire, il y a quelque chose qui vous est utile.

Chers lecteurs! Quelles extensions pour VS Code ajouteriez-vous à celles décrites dans cet article?