Share
Visual Studio Code est l’un des plus récents enfants du bloc «IDE» et fait beaucoup de bruit. Il a fallu un peu de temps pour gagner du terrain, peut-être parce que c'est l'un des rares produits open source de Microsoft, mais il a pris d'assaut la communauté open source. Les développeurs qui ont jadis juré allégeance à Sublime Text 3 et à Atom se sont peu à peu convertis grâce à la puissance et à la simplicité de VS Code, sans oublier son incroyable bibliothèque d'extensions..
J'ai commencé ma propre vie de codage sur Sublime Text 3, puis je suis passé à Atom, puis à PHPStorm. Après l'expiration de mon abonnement avec JetBrains, j'ai décidé d'essayer VS Code. Cela continue de me faciliter la vie et, ce faisant, fait de moi un meilleur développeur..
Cette introduction vous mènera de zéro à héros, vous familiarisant avec VS Code, en vous concentrant spécifiquement sur mes extensions de développement front-end préférées, en vous assurant que tous les aspects de votre flux de travail sont couverts..
Je vais supposer quelques points pour cet article:
Tout d’abord, si vous n’avez pas déjà installé VS Code, rendez-vous sur le site Web de Visual Studio Code. VS Code étant multi-plateforme, nos configurations fonctionneront sous Windows, Mac et Linux..
VS Code est également disponible sous forme de package Homebrew Cask sur Mac: le brassage de fûts installe visual-studio-code
Une étape que je découvre souvent dans les didacticiels est la possibilité d’exécuter du code VS à partir du terminal. Il y a plusieurs façons de le faire. Si vous avez déjà une configuration .bash_profile, vous pouvez ajouter ceci:
export PATH = "$ PATH: / Applications / Code.app/Contents/Resources/app/bin de Visual Studio"
Ou, pour une approche plus multi-plateforme, cliquez sur le raccourci de la palette de commande: Maj + Commande + P et tapez le mot coquille - cela vous donnera une option appelée: Commande de code d'installation dans PATH - Appuyez sur Entrée et vous avez terminé. Maintenant, vous pouvez lancer des fichiers et des dossiers n’importe où depuis le terminal en tapant: chemin de code / vers / fichier / ou / répertoire
Lint votre code - c'est le meilleur moyen d'arrêter les erreurs avant qu'elles ne vous causent un stress excessif!
Si vous utilisez la dernière version de ECMA Script, ESLint est fait pour vous. Cette extension intègre directement le logiciel de reconnaissance de modèles ESLint dans VS Code et vous aide à éviter les erreurs courantes que les développeurs commettent avec la nouvelle syntaxe. Le package NPM ESLint doit être installé localement dans votre projet ou globalement..
Pour ceux qui aiment écrire du Sass plus programmatique, Sass Lint vous fournit un ensemble de configurations facile à utiliser pour écrire du Sass conforme aux normes..
JS Hint est un autre excellent linter JavaScript qui vous aide avec la logique, la syntaxe et plus, en fonction de votre configuration..
Si vous êtes un fan de TypeScript, l’extension TSLint est votre meilleur ami. Avec TypeScript étant un langage précompilé, vous avez un contrôle total sur ce que le compilateur indique pour vous, ainsi que des options de formatage automatique..
Ces extensions offrent toutes à Git des moyens conviviaux de gérer des configurations personnalisées / partagées entre les développeurs de votre équipe, notamment dans les domaines suivants: .eslintrc et .sass-lint.yml ou .jshintrc
J'ai volontairement laissé nos linters HTML ici. Alors que je vais utiliser une extension comme Beautify pour formater et tabuler mon HTML selon un .éditeur de configuration Je trouve que les linters HTML fonctionnent assez mal. Ils ne tiennent pas compte de la sémantique et ont tendance à vous aider avec des problèmes d'accessibilité. Comme la signification du HTML peut être relativement ambiguë, il est préférable d’utiliser un ensemble d’outils qui effectuent des tâches plus petites..
Pour étendre les fonctionnalités HTML dans VS Code, j'utilise les éléments suivants:
Cela pourrait apporter un peu d’amélioration, mais j’ai toujours aimé la fonctionnalité de balise de fermeture automatique de Sublime Text 3. L'extension mentionnée ci-dessus vous aidera avec ceci dans VS Code.
Ceci est une autre extension HTML utile qui permet aux utilisateurs de cliquer à l'intérieur d'un élément HTML et de le renommer, tout en renommant la balise de fermeture..
Je me suis éloigné de Grunt il y a quelque temps, mais comme par hasard, il ne semble pas exister d'extensions Grunt sur le marché, du moins pas avec suffisamment de traction pour avoir un impact significatif. Les extensions ci-dessous sont principalement axées sur Gulp et Webpack, car elles semblent mener la course dans le monde de la gestion des tâches..
Cette extension vous permet d'utiliser la palette de commandes dans VS Code pour injecter facilement des configurations utiles de Gulp dans votre fichier Gulpfile.js. un must si vous êtes toujours un peu fragile sur la mise en place de Gulp.
La configuration de Webpack peut être l’une des tâches les plus effrayantes à laquelle un développeur doit s’engager. L'extension Webpack pour VS Code élimine la peur en vous fournissant un minimum de webpack.config.js pour démarrer votre projet. Si vous êtes un progressiste et que vous n'aimez pas rester dans le noir pendant que votre terminal réfléchit à quelque chose, l'extension Webpack Progress est faite pour vous. Il fournit une belle barre de progression pour quand Webpack fait son travail.
L'une des extensions les plus puissantes pour le contrôle de version dans VS Code est:
Pour les nouveaux arrivants comme pour les utilisateurs avancés, Git Lens est une puissance. Il est facile de rendre Git et ses nombreuses subtilités plus gérables et visuels. J'ai tellement aimé l'utiliser que, si ce n'est d'utiliser le terminal pour ajouter, valider, créer des branches et pousser, j'ai complètement mis au rebut l'interface graphique de Git..
Presque chaque paramètre est personnalisable. Git Lens fournit des informations en temps réel sur les données Git pendant le codage. Vous voulez savoir qui a écrit cette fonction qui ne fonctionne pas? Vous voulez voir combien le code a changé au cours des derniers commits? Vous ne savez pas comment gérer un conflit de fusion dans un fichier que vous n'avez jamais écrit ou dans lequel vous avez peu de contexte? Git Lens gère tout cela pour vous.
Là où d’autres IDE prennent totalement en charge la plupart des langues, VS Code vous laisse le soin d’en décider. Si vous le souhaitez, vous pouvez ajouter un support linguistique pour la technologie de votre choix. HTML et CSS prêts à l'emploi, ainsi que JavaScript sont fournis, mais si vous avez besoin de Python, il vous suffit d'un clic une façon. Dans mon flux de travail, j'utilise Python de temps en temps, mais Node était très important pour moi..
Intellisense s'occupe essentiellement des achèvements. Vous pouvez, par exemple, cliquer sur Tab ou survoler un chemin de fichier pour que VS Code fasse le travail dur pour vous..
Si vous êtes un de ceux qui aiment utiliser les nouvelles technologies dans votre flux de travail et que vous êtes fous de la nouvelle édition de JavaScript, le linter Babel ES6 / ES7 est fait pour vous..
Ceci est une extension brillante qui s'auto-complète / suggère les chemins de fichier pendant la frappe. Si vous venez d'un fond PHPStorm, vous saurez le sentiment!
Une excellente extension lors de l'utilisation exiger() ou importer dans Node.js, cette extension remplit automatiquement les chemins de fichier vers les modules de noeud.
C'est une extension très utile pour compléter automatiquement les noms de classe CSS définis dans vos fichiers CSS liés. Si vous êtes un fan de Bootstrap, Foundation ou simplement un framework, cela vous fera gagner beaucoup de temps.!
Pour les fans de CSS précompilés, cette extension rend intellisense possible pour les imports, les mixins, les includes et les fonctions dans SCSS..
Si vous n'avez pas encore rencontré PostCSS, vous êtes absent. C’est un ensemble de plug-ins avancé et extrêmement avant-gardiste pour CSS qui le rend beaucoup plus puissant. J'utilise deux extensions PostCSS: Syntax et Sorting; l'un permet la prise en charge de la syntaxe pour les nouveaux modules CSS de niveau 4 tels que l'imbrication et l'autre me permet de trier les propriétés CSS par ordre alphabétique.
Bien que ce ne soit pas vraiment le seul Intellisense, il s’agit d’une excellente extension pour le développement de Vue.js. C'est une solution tout-en-un pour l'ajout de peluches, d'intellisense et de formatage au développement de Vue.js. Elle inclut déjà certaines des extensions que j'ai mentionnées ci-dessus..
C'est une solution complète pour développer des applications React Native. Par défaut, VSCode a une tonne de support intégré pour React.
Vous passez beaucoup de temps devant votre IDE, il est donc tout aussi important de s'assurer que les yeux sont lisibles et lisibles..
Commencez par obtenir des icônes de dossier / fichier pour pouvoir facilement distinguer les fichiers que vous utilisez..
Cobalt 2 n'est pas trop sombre, pas trop clair et offre un bon contraste pour un thème d'éditeur. Il a également une configuration de couleur correspondante pour les terminaux ZSH.
Si vous n'avez pas entendu parler de Dash, cela devrait être votre nouvelle meilleure amie. Dash est une application de documentation API pour Mac, mais cette extension se branche directement dans VS Code. En cliquant sur n'importe quelle méthode, Dash s'ouvre dans la page correspondante. Le même plugin supporte Zeal qui est une alternative Windows et Linux.
Comme je l'ai mentionné précédemment, l'extension Beautify est un excellent outil si vous êtes catégorique sur le formatage du code et la normalisation des éditeurs. Il vous permet également de définir un .jsbeautifyrc fichier que vous pouvez valider dans les dépôts Git pour la collaboration. Beautify peut également être utilisé en remplacement de .éditeur de configuration si vous ne le supportez pas. Beautify formats JS, CSS, Sass, JSON et HTML.
De plus en plus d’IDE prennent en charge EditorConfig, ce qui vous permet d’inclure un .éditeur de configuration dans votre projet de repos. Cela permet à vos collègues développeurs les IDE et les linters de lire un fichier pour normaliser la tabulation et l'espacement, ainsi que la fin de ligne d'un projet à l'autre..
Pour une solution plus robuste, essayez Prettier. Prettier suit le même paradigme de configuration que ESLint, en vous fournissant une .plus jolie fichier qui peut être affecté à des référentiels. Il lira aussi de la .éditeur de configuration fichier s'il existe. En fait, vous pouvez vous débarrasser de ESLint et de Sass Lint et utiliser Prettier comme solution unique. Il a ses propres extensions pour EsLint, StyleLint et plus.
Je suis récemment passé chez ZSH, qui a complètement transformé mon expérience de terminal. Bien que n'étant pas une extension directe de VS Code, il peut être intégré via le volet Terminal. J'ai dû faire pas mal de configuration pour que ça marche sur Mac, surtout avec les couleurs et les thèmes..
ZSH propose des fonctionnalités telles que la complétion par tabulation pour les répertoires, les fichiers, les branches Git et plus. Vous pouvez en savoir plus sur la configuration de ZSH sur le dépôt Github ou laissez-moi un message dans les commentaires ci-dessous si vous souhaitez en savoir plus..
Le code de Visual Studio est livré avec le débogage JavaScript directement. Vous pouvez aller plus loin en utilisant les extensions suivantes:
Cette extension permet une synchronisation directe entre le débogueur de code VS et les outils de développement Chrome, ce qui vous permet de définir des points d'arrêt et d'accéder directement au code..
Cela met fin à la configuration de mes extensions pour Visual Studio Code. Quels sont vos favoris personnels? Avant de partir, n'oubliez pas que coder doit être amusant; vous aurez peut-être besoin de mélodies pour vous aider. L'extension Spotify ajoute un petit lecteur multimédia intégré à l'interface de code du VS.
Accentsconagua