[RUBY] Préparer l'environnement de format pour "Rails" (VScode)

Comment avez-vous écrit cet article?

Lors du développement avec Rails, je développais avec VScode, Le format n'a pas fonctionné comme je m'y attendais avec Rubocop seul et j'ai eu du mal. Dans l'environnement Rails, au moins un fichier .rb et un format de fichier .erb sont requis. De plus, il est pratique de pouvoir étendre le support du formateur à d'autres langages (JavaScript, yaml, etc.).

Je ne connais pas les autres éditeurs, mais je pense que construire avec VScode a un sens.

J'ai fait une erreur parce que je suis un débutant, mais j'espère que vous pourrez le signaler.

Objectif de cet article

--Préparer un environnement de codage Rails stable (environnement au format Ruby, erb)

• Peut être utilisé avec le formateur d'outils d'analyse Rubocop --Introduction du formateur qui peut être étendu à d'autres langues et fonctionnement stable

Environnement de vérification

Rails v6.0.3.3 Ruby v2.6.6 Rubocop v0.89.1

・ Fonction étendue Ruby v0.27.0 Prettier v5.6.0 Prettier+ v4.2.2 Beautify v1.5.0

・ Installation prettier/plugin-ruby v0.20.0

1. Réglage du code VS (réglage json)

Avant le formatage, j'ai mis les paramètres suivants dans l'éditeur. L'écran des paramètres de l'éditeur peut être affiché avec Commande +,. Ouvrez le fichier settings.json et insérez les paramètres suivants. settings.json est une icône qui s'affiche en tant que «Paramètres (JSON)» lorsqu'elle est associée à l'icône en haut à droite de l'écran des paramètres. Si vous cliquez sur l'icône et entrez les paramètres suivants

• Réglage pour supprimer les blancs de fin et insérer une nouvelle ligne dans la dernière ligne
• Format automatique

Est reflété.

settings.json

{
  "files.trimFinalNewlines": true, #Couper les nouvelles lignes après la dernière ligne lors de l'enregistrement du fichier
  "files.insertFinalNewline": true, #Ajoutez la dernière ligne à la fin lors de l'enregistrement du fichier
  "files.trimTrailingWhitespace": true, #Couper les flans de fin
  "editor.formatOnSave": true, #Format automatique lors de l'enregistrement d'un fichier
}

1. Environnement au format Ruby

Comme procédure, tout d'abord, en supposant que rubocop est installé avec gem, Avec l'extension VScode

• Prettier
• Prettier+
  À installer. * N'oubliez pas d'installer les deux.

Ensuite, installez le plus joli plug-in dans le projet de développement de rails.

Les formateurs Prettier et Prettier + ne prennent pas en charge Ruby par défaut, mais sont pris en charge par les plug-ins.

Immédiatement, je vais essayer d'installer et d'exécuter le plug-in comme décrit sur le site officiel. Site officiel: plugin-ruby

Mon environnement est Rails6, donc je l'ai installé avec du fil.

yarn add --dev prettier @prettier/plugin-ruby`

L'exécution simultanée dans l'environnement Rails peut être exécutée avec la commande suivante.

./node_modules/.bin/prettier --write '**/*.rb'

Ceci termine le formatage du fichier Ruby existant. Après l'enregistrement, veuillez redémarrer tous les logiciels associés tels que l'éditeur et Docker.

Après le redémarrage, ouvrez un fichier rb et vérifiez que Prettier et Prettier + sont cochés en bas à droite de l'éditeur.

Ensuite, mettez des caractères vides ou des sauts de ligne dans le fichier, enregistrez-le et vérifiez si le format est exécuté. Si vous pouvez bien le faire, le formatage Ruby est terminé.

2. Format Erb

Installez l'extension embellir. Pourquoi y a-t-il un plus joli? Je pense qu'il y a une opinion, En fait, c'est bien, mais si vous définissez comme ci-dessous, certaines mises en page seront supprimées et erb sera difficile à comprendre. Cela se produit parce que erb est reconnu par html.

Exemple d'exemple plus joli

settings.json

"files.associations": {
   "*.html.erb": "html"
}

Exemple d'affichage dans Prettier (les hautes lumières disparaissent et sont difficiles à comprendre)

Installez beautify avec l'extension et entrez les paramètres dans settings.json comme suit.

  "beautify.language": {
    "html": ["htm", "html", "erb"]
  },

Maintenant, le format html est adapté à erb, et les points forts de erb sont affichés afin que vous puissiez travailler de manière facile à comprendre.

3. Format JavaScript

Pour formater le JavaScript, reflétez simplement les paramètres Prettier dans json.

settings.json

"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},

Notes complémentaires

J'ai présenté un exemple d'environnement au format Rails dans VScode. Les détails de divers paramètres ont été omis, veuillez donc vous référer au site officiel pour les paramètres détaillés. Si les paramètres ci-dessus ne fonctionnent pas, d'autres extensions peuvent vous gêner. Veuillez désactiver l'extension et vérifier le fonctionnement.

finalement

Je ne pense pas que l'environnement que j'ai construit soit le meilleur moyen de le construire, En tant qu'exemple de création d'un environnement Rails, j'espère que l'environnement de format construit sera utile à d'autres personnes autant que possible.