Catégories
Astuces et Design

Extensions et thèmes · Matthias Ott – Concepteur d'expérience utilisateur

Et puis, l'affichage de mon MacBook Pro s'est cassé. Après cinq ans, il était donc temps de se procurer une nouvelle machine, après tout. Chaque fois que cela s'était produit dans le passé, j'en ai profité pour repartir de zéro et faire une nouvelle installation de tous les logiciels que j'utilise et dont j'ai besoin. Par conséquent, j'ai passé les deux derniers jours à configurer mon nouveau Mac. Dans le cadre de cela, j'ai également configuré mon environnement de développement et mon éditeur de choix actuel, Visual Studio Code. L'un des points forts de VS Code est l'écosystème d'extensions qui s'est considérablement développé et de nombreuses extensions peuvent vraiment faire avancer notre expérience de codage. Mais quelles sont les extensions à installer? J'avais déjà essayé et installé un certain nombre d'extensions auparavant, mais j'ai également demandé sur Twitter pour obtenir l'avis des autres et peut-être en savoir plus sur quelques extensions dont je n'avais pas entendu parler auparavant. Voici donc la liste des extensions que j'ai fini par installer, par ordre alphabétique. Si vous avez plus à ajouter, n'hésitez pas à m'écrire un message ou un e-mail.

Extensions

Balise de fermeture automatique

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Cette extension ajoute automatiquement des balises de fermeture HTML ou XML afin que vous n'ayez pas à le faire manuellement.

De meilleurs commentaires

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

De meilleurs commentaires vous aideront à rédiger, enfin, de meilleurs commentaires en mettant en évidence différents types de commentaires, comme des alertes, des questions ou des TODO, de différentes couleurs.

Bracket Pair Colorizer 2

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

Cette extension colorise les supports correspondants dans la même couleur.
Si utile une fois que vous vous êtes habitué aux nombreuses couleurs supplémentaires de votre code.

Tiret

https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-dash

Dash est une application qui vous permet de lire la documentation de l'API et des extraits de code, également hors ligne. Cette intégration pour Visual Studio Code est un moyen facile d'accéder à la documentation à partir de VS Code.

EditorConfig pour VS Code

https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

Fournir un .editorconfig fichier est devenu un standard pour beaucoup, en particulier lorsque l'on travaille ensemble en équipe. Il vous permet de définir les paramètres de l'éditeur pour un projet afin que, par exemple, une nouvelle ligne soit insérée automatiquement à la fin des fichiers ou que tout le monde indente son code avec des espaces, ou des tabulations, ou des espaces, ou des tabulations…

METTRE À JOUR: Cette extension n'est évidemment plus nécessaire car VS Code est désormais compatible avec .editorconfig fichiers intégrés.

ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Les linters de code analysent votre code et détectent les problèmes et les erreurs. Cette extension intègre le linter JavaScript ESLint dans VS Code.

Histoire de Git

https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

Si vous utilisez Git pour le contrôle de version, cette extension vous permet d'explorer l'historique de votre projet dans VS Code. Affichez et recherchez le journal Git, affichez les versions précédentes d'un fichier ou comparez les branches, les validations et les fichiers entre les validations.

GitLens – Git suralimenté

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

L'extension essentielle pour Git. Vous pouvez voir quand et par qui chaque ligne de code a été modifiée – en ligne dans votre éditeur. GitLens vous permet également d'explorer l'historique de votre base de code et de comparer les branches, les validations, les balises et bien plus encore.

Coût d'importation

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

Si vous travaillez avec des modules JavaScript, il arrive rapidement que vous importiez trop de code. En utilisant Webpack, cette extension affichera la taille du package importé juste derrière l'instruction d'importation.

Partage en direct

https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare

Visual Studio Live Share vous permet de modifier et de déboguer en collaboration avec d'autres en temps réel. Vous pouvez partager votre projet en cours, puis au besoin, partager des sessions de débogage, des instances de terminal, des applications Web hôte local, des appels vocaux, etc.

npm Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

npm Intelligente complète automatiquement les modules npm dans les instructions d'importation. Aussi simple qu'efficace.

Path Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Cette extension complète automatiquement les noms de fichiers.

Lignes permutées

https://marketplace.visualstudio.com/items?itemName=earshinov.permute-lines&ssr=false#review-details

Permute Lines vous permet d'inverser ou de mélanger des lignes de code ou de filtrer des lignes uniques.

PHP Intelephense

https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client

Intelephense fournit des fonctionnalités de langage PHP telles que la complétion de code, la documentation, le formatage, etc.

Prettier – Formateur de code

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Prettier est un formateur de code pour JavaScript, TypeScript, JSON, CSS, SCSS, HTML, Vue, Markdown, YAML et bien d'autres styles de code.

Gestionnaire de projet

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

Project Manager vous aide à accéder facilement à vos projets, quel que soit leur emplacement. Vous pouvez ajouter manuellement des projets ou laisser l'extension détecter automatiquement les référentiels Git, Mercurial ou SVN, les dossiers VSCode ou tout autre dossier. Merci à Max Böck pour la suggestion!

SVG

https://marketplace.visualstudio.com/items?itemName=jock.svg

SVG ajoute une prise en charge complète du langage SVG à VS Code, y compris la saisie semi-automatique, un aperçu en direct, la référence MDN et un sélecteur de couleurs.

Télécommande – SSH

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh

L'extension Remote – SSH vous permet d'utiliser n'importe quelle machine distante avec un serveur SSH comme environnement de développement. Grâce à Timo Salm pour la suggestion!

Explorateur de tâches

https://marketplace.visualstudio.com/items?itemName=spmeesseman.vscode-taskexplorer

Répertorie toutes les tâches prises en charge (pensez npm, Gulp, Ruby, etc.) pour un projet dans une arborescence. Les tâches peuvent être affichées, modifiées, démarrées et arrêtées directement à partir de VS Code.

Twig Language 2

https://marketplace.visualstudio.com/items?itemName=mblode.twig-language-2

Ajoute la prise en charge du langage de modélisation Twig. Utile si vous utilisez Craft CMS, par exemple.

VS DocBlockr

https://marketplace.visualstudio.com/items?itemName=jeremyljackson.vs-docblock

Un DocBlock est un type spécial de commentaire qui inclut des détails sur une méthode ou une fonction, comme les paramètres de fonction ou le type de données renvoyées. VS DocBlockr facilite l'écriture de ces commentaires: Appuyez sur entrée ou tabulation après /** produira une nouvelle ligne et fermera automatiquement le commentaire. Cela seul, il est beaucoup plus facile d'écrire des blocs de commentaires plus longs. Mais si la ligne directement après contient une définition de fonction, le nom et les paramètres de la fonction sont automatiquement ajoutés au commentaire également.

Wrap Console Log Simple

https://marketplace.visualstudio.com/items?itemName=WooodHead.vscode-wrap-console-log-simple

Placez votre curseur sur un mot et utilisez un raccourci pour créer une instruction console.log avec ce mot exact.

Installation d'extensions via la CLI

Peu de temps après avoir partagé cet article, Stefan Judis a partagé un conseil très utile avec moi: vous pouvez installer des extensions VS Code via la ligne de commande (CLI) et les mettre toutes dans un script et dans vos fichiers dot, par exemple.

Voici un exemple de script avec les extensions de la liste ci-dessus: https://gist.github.com/matthiasott/1695ca6f1fe9ccfc18ff6748fb2767c1

Thèmes

Donc, c'est tout pour les extensions. Mais il manque un sujet important: les thèmes. Le thème influence considérablement la façon dont vous vous sentez à l'aise dans votre éditeur de code. Il convient donc de le mentionner, même si, au final, c'est avant tout une question de préférence personnelle.

Pendant un bon moment, j'utilisais le thème Dark City Lights. J'aime les couleurs équilibrées du thème et le fait qu'il met beaucoup l'accent sur les fonctions et les noms de variables. Il est également livré avec un pack d'icônes qui s'intègre parfaitement à l'aspect général du thème.

Il y a quelques jours, j'ai décidé de passer au thème Night Owl de Sarah Drasner. Sarah a fait un travail remarquable en créant un thème coloré sans être distrayant. Le Night Owl est également accessible aux personnes daltoniennes et dans des conditions de faible luminosité. J'aime que l'arrière-plan de la fenêtre de l'éditeur soit un peu plus sombre que le bleu par défaut du thème, j'ai donc ajusté la couleur dans les préférences. Jusqu'à présent, j'aime beaucoup le thème.

Vs Code Night Owl

Donc, cela termine ce post sur ma configuration actuelle de VS Code. J'espère que vous avez trouvé cette liste utile et, comme mentionné précédemment, si vous avez quelque chose à ajouter comme des extensions meilleures ou plus, j'aimerais avoir de vos nouvelles.

~

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *