5 extensions et thèmes pour VS Code qui peuvent changer la vie d'un développeur front-end

L'auteur de l'article, dont nous publions la traduction aujourd'hui, souhaite parler de plusieurs extensions et sujets pour l'éditeur populaire VS Code qui peuvent améliorer la vie du développeur.



SCSS IntelliSense


→ Page SCSS IntelliSense

La création de variables dans SCSS est simple et amusante. Comment s'en souvenir? Ici, des difficultés surviennent généralement.

Si vous êtes comme moi, vous avez le fichier _variables.scss , qui contient des centaines d'icônes en dollars et de noms de variables qui vous sont venus à l'esprit à trois heures du matin. L'extension SCSS IntelliSense fournit des conseils pour les noms de variables lorsque vous travaillez sur du code de projet. Et vous n'avez plus besoin de vous souvenir de ces noms en détail. Pas besoin de fouiller dans un fichier avec des noms de variables pour les rappeler.

Voici à quoi ressemble l'extension SCSS IntelliSense.


Extension IntelliSense SCSS en action

Renommer automatiquement la balise


→ Page de changement de nom automatique

Quel que soit le framework frontal que vous utilisez, l'écriture HTML (ou JSX) peut être une tâche fastidieuse. Surtout dans une situation où il y a quelque chose comme 50 lignes de code entre les balises d'ouverture et de fermeture. Vous devrez peut-être changer la balise H2 en H3 au cours de votre travail. Il peut être nécessaire de remplacer le div par un span . Dans tous les cas, si vous résolvez de tels problèmes sans utiliser d'outils auxiliaires, ceux-ci, dans des fragments de code à grande échelle, se résument à une recherche difficile de fermeture de balises.

Pourquoi ne pas appeler une voiture pour vous aider à modifier automatiquement les tags? Pour ce faire, utilisez simplement l'extension de changement de nom automatique. Il, lors de la modification de la balise d'ouverture, change et se ferme automatiquement. La même chose, exactement le contraire, se produit si la balise de fermeture est modifiée.

Voici comment fonctionne la balise Renommer automatiquement.


Utilisation de l'extension de balise Renommer automatiquement

Action en double


→ Page d' action en double

La possibilité de créer des fichiers et des dossiers en double à l'aide du menu contextuel est si utile qu'elle devrait être intégrée dans VS Code. Mais cet éditeur, et sans une telle opportunité, est merveilleux, donc il peut pardonner un tel défaut.

En fait, pour équiper VS Code de la fonctionnalité décrite ci-dessus, il suffit d'installer l'extension Duplicate Action. Lorsqu'il est activé, le développeur dispose de la commande de menu contextuel Duplicate file or directory .


Modifications de l'extension d'action en double et du menu contextuel du fichier

Codestream


→ Page CodeStream

Si vous décrivez brièvement CodeStream, alors nous pouvons dire que cette extension est comparable au système pour commenter le code du futur.

De nombreux programmeurs n'aiment pas quitter leur IDE. Mais pour expliquer quelque chose à des collègues et poser des questions vous-même, vous devez sortir de l'environnement familier et utiliser Trello, Slack, Asana, Bitbucket, Microsoft Teams. CodeStream prend en charge de nombreux outils et un IDE, ce qui vous permet de travailler avec des problèmes et des questions sans quitter l'environnement familier de l'éditeur de code. Beaucoup, faisant du travail, ont tendance à entrer dans ce qu'on appelle «l'état de flux». Quitter l'éditeur fait généralement sortir la personne de cet état. Grâce à CodeStream, les questions concernant le code peuvent être résolues sans quitter votre environnement familier.


Discussion sur le code dans CodeStream

Oiseau de nuit


→ Page Night Owl

Night Owl est l'un des meilleurs thèmes jamais créés pour l'IDE. Depuis trois ans maintenant, je l'utilise quotidiennement. Ci-dessous, une capture d'écran de mon véritable écran de travail. Le titre de ce sujet indique qu'il est destiné à ceux qui sont assis devant l'ordinateur la nuit. Certes, il est bien adapté au travail de nuit, empêchant vos yeux de surmenage, et les tons bleus doux qui y sont utilisés aident à résoudre calmement des problèmes complexes.


Thème Night Owl

Bonus: Synthwave '84 Theme


→ Page Synthwave '84

Ce thème vient de l'univers cyberpunk. Il se marie bien avec une cape en cuir, une Lamborghini Countach et un générateur de fumée. Si tout cela est proche de vous, allumez votre musique Vaporwave préférée et écrivez votre beau code jusqu'à ce que votre conscience ait rejoint la base de données Neuromancer.

Afin d'obtenir l'effet d'un texte lumineux, après avoir installé ce sujet, vous devez le bricoler un peu. Mais vous êtes sûr d'être d'accord pour dire que cette beauté vaut la peine de faire un effort dans sa réalisation.


Thème Synthwave '84

Chers lecteurs! Connaissez-vous des extensions et des thèmes intéressants pour VS Code?

Source: https://habr.com/ru/post/fr482468/


All Articles