Ruby on Rails — Le top 5 des extensions VS Code

Aude Faucheux
4 min readJul 26, 2020

English version of this article: https://medium.com/@aude53/ruby-on-rails-basics-with-vs-code-top-5-extensions-45530d489502

Cet article s’adresse aux programmeurs qui débutent avec Ruby on Rails et a pour objectif de faire découvrir des extensions qui vont booster votre efficacité lorsque vous écrivez votre code.

Photo by Chris Ried on Unsplash

Voici la liste des extensions que j’ai trouvé tellement utiles que je me devais de les partager ! Il est possible que vous ayez besoin de redémarrer VS Code après avoir installé certaines de ces extensions pour les activer.

1. Ruby

Il est très désagréable d’écrire son code sur les fichier .erb ou html.erb car les couleurs qui normalement aident à repérer les fautes de syntaxe paraissent aléatoires. Le problème vient du language de défaut “Ruby”, indiqué en bas à droite de l’écran.

L’extension “Ruby” va remettre de l’ordre dans les couleurs. Une fois l’extension installée, cliquez sur “Ruby” en bas à droite de l’écran et sélectionnez “erb”. Si vous redémarrez VS Code, les fichiers .erb et .html.erb utiliseront le language “erb” automatiquement et les couleurs seront correctes.

Lien de l’extension “Ruby”:

2. Endwise

Endwise est une super extension pour Ruby. Elle ajoute automatiquement “end” lorsque vous écrivez une méthode ou une condition. Fini les fautes de frappes “emd” au lieu de “end” !

Lien de l’extension endwise:
https://marketplace.visualstudio.com/items?itemName=kaiwood.endwise

3. VS Code Icons

Cette extension n’est pas spécifique à Rails. Une fois installée, les dossiers de la bar d’exploration de VS Code aurons des icônes qui correspondent parfaitement à leur fonction, ce qui permet d’identifier plus facilement le dossier que vous voulez ouvrir. Aussi, je trouve que ça rend la barre plus jolie !

Lien de l’extension vscode icons:

4. ERB-VSCode-Snippets

Note: cette extension ne marche que si vous avez ajouté le language “erb” (voir partie 1 de cet article)

ERB-VSCode-Snippets permet d’écrire rapidement des balises/tags pour les fichiers .erb ou .html.erb grace à des mots clés. Par exemple, “pe” est un raccourci pour “<%= %>”. C’est plus rapide n’est ce pas ?

Mes raccourcis préférés sont les suivants:

Lien de l’extension ERB-VSCode-Snippets:
https://marketplace.visualstudio.com/items?itemName=ZneuRay.erb-vscode-snippets

5. Emmet

Peut être mon préféré de ce top 5, Emmet est un plaisir quand vous utilisez les balises/tags html. Plus besoin de taper les signes “<” et “>” à longueur de journée.

Par exemple, quand vous tapez “h1”, cela insérera “<h1></h1>”

Pour activer Emmet, il faut aller dans les paramètres:

Cherchez “include languages” et cliquez sur “edit in settings.json”

Ajoutez "emmet.includeLanguages": {"erb": "html"} et sauvegardez.

Ceci n’est qu’un aperçu d’Emmet. Il y a beaucoup d’autre raccourcis très utiles comme vous pouvez le voir dans le lien ci dessous:

Conclusion

J’espère que vous avez trouvé cet article utile. C’est la première fois que je traduis un de mes articles anglais en français. Si cela vous a plu, dites le moi en commentaires et je traduirai le reste de mes articles.

--

--

Aude Faucheux

JavaScript Mid-Level Developer, I write blogs to learn and share what I learn.