[RAILS] Choses qui rendent le développement pratique ~ VSCode, Hirb

en premier

Dans cet article, je présenterai divers outils qui facilitent le développement original ~

1. Fonction pratique de vscode
2. Tableau de la sortie de la console

1. Fonction pratique de vscode

zenkaku Des erreurs se produisent souvent lorsque le code contient des caractères pleine largeur.

Pour éviter cela, installez l'outil d'extension "** Zenkaku **" qui rend tous les coins gris. vscode Vous pouvez obtenir l'outil d'extension à partir de l'icône avec quatre carrés sur la gauche.

Ensuite, la pleine largeur sera grisée comme indiqué ci-dessous, et vous pourrez éliminer l'erreur de pleine largeur!

japanese language pack ~ Recommandé pour ceux qui ne sont pas bons en anglais et qui veulent écrire en japonais! Si vous installez la fonction d'extension Japanese language pack ~ et redémarrez vscode, le menu, etc. doit être en japonais.

indent-rainbow Surtout lors du développement html / css, il sera plus facile de voir si la structure hiérarchique est représentée par l'indentation de 4 espaces demi-largeur (touche de tabulation). L'extension qui rend ce retrait de couleur arc-en-ciel est "** indent-rainbow **". Installons-le!

auto close tag Il est facile d'oublier de fermer une balise ou de se tromper si la balise croise une autre balise! La balise de fermeture automatique est un plug-in qui génère automatiquement une balise de fin lorsque vous avez fini de saisir la balise de début lorsque vous écrivez la balise en HTML ou XML. Rédigez-vous du HTML ou du XML, en particulier lorsque vous avez beaucoup de balises imbriquées, ou oubliez-vous la balise de fin et obtenez une erreur? Si vous insérez cette balise de fermeture automatique, la balise sera fermée automatiquement lorsque vous écrivez la balise de début sans écrire la balise de fin à chaque fois. C'est un excellent plug-in car il rend l'écriture HTML beaucoup plus efficace!

auto rename tag ** Améliorez encore l'efficacité de la correction! ** ** La balise de renommage automatique est un plug-in qui modifie automatiquement la balise de fin appariée lorsque la balise de début est modifiée. C'est un plug-in comme un parent d'Auto Close Tag! .. Je pense qu'il est courant de modifier les éléments HTML / XML, mais si vous réécrivez la balise de début, ce plug-in réécrira automatiquement la balise de fin, donc je pense que l'efficacité de la modification sera grandement améliorée. Lorsqu'il est utilisé en conjonction avec la balise de fermeture automatique, votre environnement VS Code sera certainement confortable!

Beautify Il arrive souvent que vous développiez et que vous oubliez de changer un paragraphe ou que le code devienne saccadé, mais c'est souvent ennuyeux de le réparer ... Pour de telles personnes! Beautify est une extension qui formate parfaitement le code Javascript, CSS, SASS et HTML!

Le code de cliquetis peut également être nettoyé en un seul coup en ouvrant la palette de commandes avec Commande + Maj + P et en sélectionnant une commande avec embellir.

endwise C'est une extension qui insère automatiquement une fin! Vous n'avez plus à vous soucier d'oublier la fin!

vscode-icons L'introduction de vscode-icons rend les icônes de fichiers plus faciles à voir!

HTML CSS Support Lors de l'écriture HTML, le nom de la classe créé côté CSS apparaîtra comme candidat. Je fais souvent des erreurs d'écriture et le style n'est pas correct, mais c'est parfait.

live share Il ne fait aucun doute que l'efficacité du développement conjoint augmentera! Live Share vous permet de modifier et de déboguer en temps réel avec d'autres utilisateurs, quel que soit le langage de programmation que vous utilisez ou le type d'application que vous créez. Vous pouvez partager instantanément et en toute sécurité votre projet actuel, démarrer des sessions de débogage collaboratives, partager des instances de terminal, transférer des applications Web d'hôte local, passer des appels vocaux et plus encore!

Si vous souhaitez connaître l'introduction détaillée, reportez-vous à ce qui suit ↓ https://qiita.com/Shota_Fukuda/items/1358b8eb5e3e8354d1c7

2. Tableau de la sortie de la console

Lors du développement, je souhaite souvent vérifier le contenu (enregistrements) de la base de données. Vous pouvez le vérifier à l'aide de la console, mais dans l'état initial, tous les enregistrements sont côte à côte et c'est très difficile à voir. Cependant, si vous utilisez une gemme appelée Hitb, vous pouvez générer une sortie au format tabulaire.

Avant de présenter Hirb

Après avoir présenté Hirb

Tout d'abord, écrivez les deux lignes suivantes dans le fichier gem.

Gemfile

gem 'hirb'
gem 'hirb-unicode'

Puis au terminal

$ bundle install

Hirb est disponible à ce stade, mais vous devez à chaque fois entrer Hirb.enable dans la console. Puisqu'il est gênant, configurez pour utiliser Hirb par défaut. Créez un fichier .irbrc '' `` dans le répertoire racine (même hiérarchie que app et db).

Écrivez ce qui suit dans le fichier .irbrc.

.irbrc

if defined? Rails::Console
  if defined? Hirb
    Hirb.enable
  end
end

Maintenant, la sortie de la console est toujours tabulaire!