Skip to content

Instantly share code, notes, and snippets.

@dailson-igo

dailson-igo/gist:17ab594ebd40078219a2e72096609bd2

Last active September 2, 2025 18:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dailson-igo/17ab594ebd40078219a2e72096609bd2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dailson-igo/17ab594ebd40078219a2e72096609bd2 to your computer and use it in GitHub Desktop.
Download ZIP
Complementos e Configurações para Usar Ruby on Rails com o VScode
Raw
gistfile1.md

Configurando o VScode para Desenvolver com Ruby on Rails

TODO: Separar talvez em 3 partes: 1) entre configuração mínima; 2) complementos que ajudam ; e 3) debug

Instalar o Ruby on Rails com o RBEnv

https://github.com/rbenv/rbenv

Pacotes Necessários para Debian e Derivados

$ sudo apt-get install git-core zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev software-properties-common libffi-dev nodejs yarn libpq-dev

Pacotes Necessários para OpenSUSE

sudo zypper install git-core gcc automake gdbm-devel libyaml-devel ncurses-devel readline-devel zlib-devel libopenssl-devel readline-devel gcc-c++ sqlite3 sqlite3-devel nodejs && sudo zypper install -t pattern devel_basis

Exibindo o SHELL do Usuário Corrente

$ echo $SHELL
/bin/zsh

Instalando RBEnv para o Shell ZSH

$ curl -sL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

$ cd
$ git clone https://github.com/rbenv/rbenv.git ~/.rbenv
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.zshrc
$ echo 'eval "$(rbenv init -)"' >> ~/.zshrc
$ exec $SHELL

$ git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
$ echo 'export PATH="$HOME/.rbenv/plugins/ruby-build/bin:$PATH"' >> ~/.zshrc
$ exec $SHELL

$ echo "Listar versões do Ruby"
$ rbenv install -l

Instalando RBEnv para o Shell BASH

$ curl -sL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

$ cd
$ git clone https://github.com/rbenv/rbenv.git ~/.rbenv
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
$ echo 'eval "$(rbenv init -)"' >> ~/.bashrc
$ exec $SHELL


$ git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
$ echo 'export PATH="$HOME/.rbenv/plugins/ruby-build/bin:$PATH"' >> ~/.bashrc
$ exec $SHELL

$ echo "Listar versões do Ruby"
$ rbenv install -l

Caso a Versão mais Atual Não Apareça, Execute o Comando Abaixo

$ git -C ~/.rbenv/plugins/ruby-build pull

$ echo "Listar Versões do Ruby"
$ rbenv install -l

Instalar o Ruby 3.2.2

Demora um pouco para baixar e instalar

$ rbenv install 3.2.2
To follow progress, use 'tail -f /tmp/ruby-build.20230718085426.11131.log' or pass --verbose
Downloading ruby-3.2.2.tar.gz...
-> https://cache.ruby-lang.org/pub/ruby/3.2/ruby-3.2.2.tar.gz
Installing ruby-3.2.2...
Installed ruby-3.2.2 to /home/igo/.rbenv/versions/3.2.2


NOTE: to activate this Ruby version as the new default, run: rbenv global 3.2.2

$ rbenv global 3.2.2
$ ruby -v
> rbenv global 3.2.2
ruby 3.2.2 (2023-03-30 revision e51014f9c0) [x86_64-linux]

$ which ruby
/home/<USUARIO>/.rbenv/shims/ruby

$ which gem
/home/<USUARIO>/.rbenv/shims/gem

$ which bundler
/home/<USUARIO>/.rbenv/shims/bundler

$ echo "Listar gems instalados localmente"
$ gem list rails --local

$ echo "Listar versões do rails disponíveis para instalação"
$ gem search '^rails$' --all

Instalar o Gerenciador de Dependências Bundler

$ gem install bundler
Fetching bundler-2.4.17.gem
Successfully installed bundler-2.4.17
Parsing documentation for bundler-2.4.17
Installing ri documentation for bundler-2.4.17
Done installing documentation for bundler after 0 seconds
1 gem installed

A new release of RubyGems is available: 3.4.10 → 3.4.17!
Run `gem update --system 3.4.17` to update your installation.

$ echo "Como ele informou que temnos uma nova versão do RubyGems, iremos atualizar"
$ gem update --system 3.4.17
Updating rubygems-update
Fetching rubygems-update-3.4.17.gem
...

Instalar o Framework Rails

$ echo "Listar versões do rails disponíveis para instalação"
$ gem search '^rails$' --all

$ echo "Installa a última versão do rails"
$ gem install rails
$ rails -v
Rails 7.0.6

$ rbenv which rails
/home/igo/.rbenv/versions/3.2.2/bin/rails

$ bundle exec rails -v
Rails 7.0.6

$ echo "Para instalar uma versão específica: gem install rails -v 6.1.7.4"

Desinstalar o Framework Rails

$ gem uninstall rails
$ gem uninstall railties

Ciando um Projeto de Teste com Ruby on Rails

TODO: incluir

Instalar Temas, Ícones e Complementos

Temas, em ordem de Preferência

Para alternat entre os temas, use as teclas de atalho Ctrl + K seguida de Ctrl + T

  • OPÇÃO 1: Moonlight
    • Clicar em "Definir tema de cor", escolha o Moonlight II ou outra variação preferida
  • OPÇÃO 2: Omni Dracula VSCode Theme
    • Clicar em "Definir tema de cor"
  • OPÇÃO 3: Atom One Dark Theme
    • Clicar em "Definir tema de cor"
  • OPÇÃO 4: Dracula Official
    • Clicar em "Definir tema de cor"

Ícone, em ordem de Preferência

  • OPÇÃO 1 - Material Icon Theme
    • Clicar em "Definir tema do ícone"
  • OPÇÃO 2 - vscode-icons
    • Clicar em "Definir tema do ícone"

Fontes Preferidas (Typeface)

  • Minha ordem de preferência: Hack, 'JetBrains Mono', 'MesloLGS NF','Droid Sans Mono', 'monospace', monospace
  • As fontes Hack JetBrains Mono e MesloLGS NF podem precisar ser instaladas manualmente
  • Caso tenha uma outra fonte de preferência, coloque no início da lista
  • File > Preference > Settings: (Ctrl+,) > Editor de Texto > Fonte
// Controls the font family. Gosto mais da fonte Hack
"editor.fontFamily": "Hack, 'JetBrains Mono', 'MesloLGS NF', 'Droid Sans Mono', monospace",
// Controls the font size. Para o Avell, ficou melhor 16
"editor.fontSize": 16,
"editor.tabSize": 2

Fontes para o Terminal

  • Por padrão é utilizada a mesma fonte, mas alterei o tamanho da fonte do terminal para maior legibilidade
  • File > Preference > Settings: (Ctrl+,) >Procute pelo texto "terminal fonte"
  • No meu caso ajustei de 14 para 16

Analisador de Palavras

  • Para palavras e inglês: Code Spell Checker
  • Para palavras e português do Brasil: Brazilian Portuguese - Code Spell Checker

Analisador de Código Ruby LSP da Shopify

  • Após instalar, aparecerá um ícone com chave aberta e fechada { }, que exibirá algumas opções quando clicado
  • CTRL + , (Settings...) > Text Editor > Formatting > Habilitar Format On Save
  • Abra o arquivo JSON na peça de quebra-cabeça e adicione
"[ruby]": {
    "editor.defaultFormatter": "Shopify.ruby-lsp"
},
  • No diretório raiz do projeto, crie o arquibo .ruby-version e adicione a versão usada. No meu caso, 3.2.2
$ cat .ruby-version
3.2.2

Escolha um Diretório para Criar Seus Projetos Ruby

  • No meu caso, salvo os projetos em Ruby no diretório "~/vscode/ruby"

Crie um Projeto em Ruby on Rails para Testar Algumas Configurações

  • No meu caso, dentro do diretório "~/vscode/ruby"
$ rails new projeto-debug-teste1
$ cd projeto-debug-teste1

Adicionar o Analisador e Formatador de Código no Padrão da Shopify

  • Adicione a gem da shopify do ambiente de desenvolvimento do arquivo Gemfile
    • Abra o arquivo Gemfile
    • Procure por "group :development do"
    • Adicione a gem:
      • gem "rubocop-shopify", require: false
  • No terminal, na pasta do projeto
$ bundle install
$ echo "ou digite apenas 'bundle', que acionará automaticamente o 'bundle install'"
  • Crie o arquivo na pasta raiz do projeto com o conteúdo a seguir
$ vim .rubocop.yml
inherit_gem:
  rubocop-shopify: rubocop.yml

AllCops:
  NewCops: enable
  Exclude:
	- bin/**/*
	- db/schema.rb
	- db/migrate/**/*
	- node_modules/**/*
	- tmp/**/*
	- vendor/**/*

  • Altere o formatter para o RuboCop

    • CTRL + , (Settings...) > Extensions > Ruby LSP > Formatter > rubocop

  • Selecione o Gerenciador de Versões do Ruby para o Ruby LSP

    • Selecione o Ruby LSP na barra de status, na parte inferior esquerda, no ícone { }
    • No meu do Ruby LSP, escolhha Change version manager
    • Selecione seu gerenciados de versões do Ruby, no meu naso, uso o rbenv
    • Deverá ser adicionado ao arquivo de conigurações settigs.json algo como
    "rubyLsp.rubyVersionManager": "rbenv",

  • Para acessar as opções disponíveis para o Ruby LSP

    • CTRL + , (Settings...) > Extensions > Ruby LSP > Clique no link de "Enable Feature > Edit in setting.json"

  • Altere a inspeção de palavras para não acusar como erro

    • CTRL + , (Settings...) > Procure por "cSpell.diagnosticLevel" > Altere a configuração para Hint

Exibir a Linha de Margem Direita do VSCode

  • O padrão da shopifý são 120 caracteres por linha
  • CTRL + , (Settings...) > Procure por rulers > Clique em Edit in settings.json
"editor.rulers": [
	{
    	"column": 120,
    	"color": "#5a5a5a80"
	},
]

ERB Formatter/Beautify

  • Depois de instalar a extensão no VSCode, adicione ao projeto a gem "htmlbeautifier" no ambiente de desenvolvimento e execute o bundle
    • Abra o arquivo Gemfile
    • Procure por "group :development do"
    • Adicione a gem:
      • gem "htmlbeautifier"
  • No terminal, na pasta do projeto
$ bundle install
$ echo "ou digite apenas 'bundle', que acionará automaticamente o 'bundle install'"
  • Manage > Settings ... > Clique no ícone da peça de quebra cabeça no lado superior direito com a descrição "Open Settings (JSON)", e adicione
"[erb]": {
  "editor.defaultFormatter": "aliariff.vscode-erb-beautify",
  "editor.formatOnSave": true
},
"files.associations": {
  "*.html.erb": "erb"
},
"emmet.includeLanguages": {
"erb": "html"
}
  • Abra um arquivo da pasta view com html.erb e verifique se está auto-completando, por exemplo colocando:
p + [TAB ou Enter] = <p></p>
div + [TAB ou Enter] = <div></div>
.nomedaclasse + [TAB ou Enter] = <div class="nomedaclasse"></div>

Destacar Identação com indent-rainbow

  • Após instalar o indent-rainbow, altere o arquivo settings.json para incluir as customizções
    // Using the light mode
    "indentRainbow.indicatorStyle": "light",
    // we use a simple 1 pixel wide line
    "indentRainbow.lightIndicatorStyleLineWidth": 8,
    // The indent color if the number of spaces is not a multiple of "tabSize".
    "indentRainbow.errorColor": "rgba(128,32,32,0.6)",
    // The indent color when there is a mix between spaces and tabs.
    // To be disabled this coloring set this to an empty string.
    "indentRainbow.tabmixColor": "rgba(128,32,96,0.6)",
    // the same colors as above but more visible
    "indentRainbow.colors": [
        "rgba(255,255,0,0.3)",
        "rgba(255,127,255,0.3)",
        "rgba(52,198,131,0.3)",
        "rgba(102,102,255,0.3)",
        "rgba(79,236,236,0.3)"
    ],

Destacar texto TODO e FIXME com TODO Highlight

  • Instale a extensão TODO Highlight
  • Vamos adicionar a inspeção de arquivos rb com a configuração "**/*.rb" no grupo "todohighlight.include"
  • Vamos adicionar a exclusão da pasta ``"/public/assets/" adicionando a configuração no grupo "todohighlight.exclude"
  • Manage > Settings ... > Clique no ícone da peça de quebra cabeça no lado superior direito com a descrição "Open Settings (JSON)", e adicione
"todohighlight.include": [
        "**/*.js",
        "**/*.jsx",
        "**/*.ts",
        "**/*.tsx",
        "**/*.html",
        "**/*.php",
        "**/*.css",
        "**/*.scss",
        "**/*.rb",
    ],
    "todohighlight.exclude": [
        "**/node_modules/**",
        "**/bower_components/**",
        "**/dist/**",
        "**/build/**",
        "**/.vscode/**",
        "**/.github/**",
        "**/_output/**",
        "**/*.min.*",
        "**/*.map",
        "**/.next/**",
        "**/public/assets/**"
    ],

O Arquivo settings.json Após Realizar as Configurações Anteriores

No final, após todas as configurações realizadas, o arquivo settings.json terá uma configuração igual ou parecida com o inserido abaixo

{
    "workbench.iconTheme": "material-icon-theme",
    "workbench.colorTheme": "Moonlight II",
    // Controls the font family. Gosto mais da fonte Hack
    "editor.fontFamily": "Hack, 'JetBrains Mono', 'MesloLGS NF', 'Droid Sans Mono', monospace",
    // Controls the font size. Para o Avell, ficou melhor 16
    "editor.fontSize": 16,
    "editor.tabSize": 2,
    "terminal.integrated.fontSize": 16,
    "editor.formatOnSave": true,
    "[ruby]": {
        "editor.defaultFormatter": "Shopify.ruby-lsp"
    },
    "rubyLsp.formatter": "rubocop",
    "rubyLsp.rubyVersionManager": "rbenv",
    "cSpell.diagnosticLevel": "Hint",
    "editor.rulers": [
        {
            "column": 120,
            "color": "#5a5a5a80"
        },
    ],
    "[erb]": {
        "editor.defaultFormatter": "aliariff.vscode-erb-beautify",
        "editor.formatOnSave": true
    },
    "files.associations": {
        "*.html.erb": "erb"
    },
    "emmet.includeLanguages": {
        "erb": "html"
    },
    // Using the light mode
    "indentRainbow.indicatorStyle": "light",
    // we use a simple 1 pixel wide line    "terminal.integrated.fontSize": 16
    "indentRainbow.lightIndicatorStyleLineWidth": 8,
    // The indent color if the number of spaces is not a multiple of "tabSize".
    "indentRainbow.errorColor": "rgba(128,32,32,0.6)",
    // The indent color when there is a mix between spaces and tabs.
    // To be disabled this coloring set this to an empty string.
    "indentRainbow.tabmixColor": "rgba(128,32,96,0.6)",
    // the same colors as above but more visible
    "indentRainbow.colors": [
        "rgba(255,255,0,0.3)",
        "rgba(255,127,255,0.3)",
        "rgba(52,198,131,0.3)",
        "rgba(102,102,255,0.3)",
        "rgba(79,236,236,0.3)"
    ],
    "RainbowBrackets.depreciation-notice": false,
    "todohighlight.include": [
        "**/*.js",
        "**/*.jsx",
        "**/*.ts",
        "**/*.tsx",
        "**/*.html",
        "**/*.php",
        "**/*.css",
        "**/*.scss",
        "**/*.rb",
    ],
    "todohighlight.exclude": [
        "**/public/assets/**",
        "**/node_modules/**",
        "**/bower_components/**",
        "**/dist/**",
        "**/build/**",
        "**/.vscode/**",
        "**/.github/**",
        "**/_output/**",
        "**/*.min.*",
        "**/*.map",
        "**/.next/**"
    ],
}

Debug no Rails 7 com o VSCode

https://www.youtube.com/watch?v=e_RKkgiimXE

Debug Tipo 1 - Integrado com o VSCode: Rápido e Fácil

  • Verifique se a gem de depuração está inserida no ambiente de desenvolvimento e teste
    • gem "debug", "~> 1.7", platforms: %i[mri mingw x64_mingw]
  • Instalar a extenção VSCode rdbg Ruby Debugger
    • Clicar em Executar e Depurar (Ctrl + Shif + D) ao lado direito do VSCode
    • Abaixo do botão "Executar e Depurar", clique no link "crie um arquivo launch.json"
    • Escolha Ruby (rdbg)
    • Mantenha o arquivo conforme a seguir Mantenha o arquivo conforme a seguir
{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "rdbg",
      "name": "Debug Rails Integrated with VSCode",
      "rdbgPath": "bundle exec rdbg", 	// Use the debgug.gem in the Gemfile
      "request": "launch",
      "command": "bin/rails", 		// Brakpoint do not work with rails
      // Abaixo, command com encerramento automático do serviço preso ou não finalizado anteriormente, antes de iniciar novamente o rails na porta 3000
      // "command": "$([ ! -z $(lsof -i :3000 -t) ] && kill -TERM $(lsof -i :3000 -t) && [ ! -z $(lsof -i :3000 -t) ] && kill -9 $(lsof -i :3000 -t)) bin/rails", // Brakpoint do not work with rails
      "script": "s", 			// lauch rails server with debugger
      "args": [],
      "askParameters": false, 		// Do not ask startup parameter any more
    }
  ]
  • Clique ao lado esquerdo do número da linha onde aparecerá uma bolinha vermelha para indicar que a linha será inspecionada para depuração/debug
  • Verifique ao lado da seta de debug se foi selecionada a configuração "Debug Rails Integrated with VSCode"
  • Clique em Iniciar a Depuração (F5) no VSCode para debugar a linha marcada

Dica para evitar problemas com servidor rails "preso" ou não encerrado corretamente

  • Algumas vezes durante o debug o servidor rails fica preso por motivos diversos. Para não precisar toda vez ir no terminal do Linux e verificar se existe algum serviço escutando na porta 3000 e finalizar com kill manualmente, altere a linha "command:" "bin/rails"
  • DE
"command": "bin/rails", 		// Brakpoint do not work with rails
  • PARA
"command": "$([ ! -z $(lsof -i :3000 -t) ] && kill -TERM $(lsof -i :3000 -t) && [ ! -z $(lsof -i :3000 -t) ] && kill -9 $(lsof -i :3000 -t)) bin/rails", // Brakpoint do not work with rails
  • Observe que antes de iniciar um novo bin/rails server, adicionamos uma verificação para saber se a porta 3000 está sendo usada com lsof -i :3000 -t, depois tentamos encerrar o serviço da forma mais amigável com kill -TERM $(lsof -i :3000 -t), e caso o encerramento amigável não funcione, força o encerramento do serviço que está escutando na porta 3000 com o comando kill -9 $(lsof -i :3000 -t)
  • Isso evita receber a mensagem de que o serviço do rails já está iniciado, por estar "preso" ou não ter sido encerrado corretamente, impedindo uma nova execução do serviço de debug pelo VSCode

Debug Tipo 2 - Iniciando o rdbg Pelo Terminal

  • Caso não exista, adicione (não exclua o que já existe) ao arquivo .vscode/launch.json a configuração para conectar o Debug do VSCode com o rdbg iniciado pelo terminal
    {
      "type": "rdbg",
      "name": "Debug Rails with rdbg from Terminal",
      "request": "attach"
    }
  • Clique ao lado esquerdo do número da linha onde aparecerá uma bolinha vermelha para indicar que a linha será inspecionada para depuração/debug
  • No terminal, digite bundle exec rdbg -n --open=vscode -c -- ./bin/rails s
  • Verifique ao lado da seta de debug se foi selecionada a configuração "Debug Rails with rdbg from Terminal"
  • Clique em Iniciar a Depuração (F5) no VSCode para debugar a linha marcada
  • Aparecerá o texto "DEBUGGER: Connected" informando a conexão do VSCode com o DEBUGGER

Debug Tipo 3 - Iniciando o rdbg Junto com o bin/dev pelo Terminal

  • Mesma configuração inicial do "Debug Tipo 2". Caso não exista, adicione (não exclua o que já existe) ao arquivo .vscode/launch.json a configuração para conectar o Debug do VSCode com o rdbg iniciado pelo terminal
    {
      "type": "rdbg",
      "name": "Debug Rails with rdbg from Terminal",
      "request": "attach"
    }
  • Edite o arquivo ./Procfile.dev
  • Altere DE "web: unset PORT && bin/rails server" PARA "web: unset PORT && bundle exec rdbg -n --open=vscode -c -- bin/rails server"
  • Execute no terminal ./bin/dev
    • Agora o ./bin/dev executará o comando "unset PORT && bundle exec rdbg -n --open=vscode -c -- bin/rails server" configurado no Procfile.dev
  • Clique ao lado esquerdo do número da linha onde aparecerá uma bolinha vermelha para indicar que a linha será inspecionada para depuração/debug
  • Verifique ao lado da seta de debug se foi selecionada a configuração "Debug Rails with rdbg from Terminal"
  • Clique em Iniciar a Depuração (F5) no VSCode para debugar a linha marcada
  • Aparecerá o texto "DEBUGGER: Connected" informando a conexão do VSCode com o DEBUGGER

Como Meu arquivo laucnh.json Deveria Estar Depois de Configurar o Debug pelo VSCode e pelo Terminal

Sua configuração deverá ficar igual ou parecida com o JSON abaixo

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "rdbg",
      "name": "Debug Rails Integrated with VSCode",
      "rdbgPath": "bundle exec rdbg", // Use the debgug.gem in the Gemfile
      "request": "launch",
      "command": "bin/rails", // Brakpoint do not work with rails
      "script": "s", // lauch rails server with debugger
      "args": [],
      "askParameters": false, // Do not ask startup parameter any more
    },
    {
      "type": "rdbg",
      "name": "Debug Rails with rdbg from Terminal",
      "request": "attach"
    }
  ]
}

Debug Tipo 4 - Usando o Debug Visualizer

[JA] Introduction of new features for VS Code debugging / Naoto Ono @ono-max https://www.youtube.com/watch?v=kuXD9p--Te0&t=409s

  • Adicionar a gem ao grupo development
gem "debugvisualizer", "~> 0.1.8"
  • Clique ao lado esquerdo do número da linha onde aparecerá uma bolinha vermelha para indicar que a linha será inspecionada para depuração/debug
  • Clique em Iniciar a Depuração (F5) no VSCode para debugar a linha marcada
  • Após parar no ponto de interrupção, abra a paleta de comandos (Ctrl + Shift + P)
  • Inicie uma nova janela de debug: Debug Visualizer: new view
  • Digite o nome de algima variável ou objeto para inspecionar pelo Debug Visualizer

Debug Tipo 5 - Sem o VSCode e Usando binding.break

https://bootrails.com/blog/rails-debug-with-ruby-debug/

Verifique se você se encontra na raiz do projeto-debug-teste1 e execute ocomando abaixo

$ rails generate scaffold Computer name:string price:integer

Inicie o VSCode

$ code .

Abra o arquivo de configurações de rotas "config/routes.rb" e configure conforme abaixo:

# inside config/routes.rb
Rails.application.routes.draw do
  resources :computers
  root to: "computers#index"
end

Crie e banco e execute a migração

$ rails db:create
$ rails db:migrate

Modifique o controlador app/controllers/computers_controller.rb do modelo Computer criado com o scaffold conforme abaixo

class ComputersController < ApplicationController
  before_action :set_computer, only: %i[ show edit update destroy ]

  # GET /computers
  def index
    minha_idade = 42
    binding.break   
    @computers = Computer.all
    binding.break
  end
  
  # mantenha os demais códigos existentes ...
end

Inicie o servidor do rails

$ rails server
  • No navegador, acesse o endereço http://localhost:3000, ou atualize a página se já estiver aberta
  • O terminal mudará permitindo interagir em modo dedebug com o rdbg a partir do primeiro ponto de parada indicado pela instrução binding.break informado no controlador app/controllers/computers_controller.rb
$ rails server
=> Booting Puma
=> Rails 7.0.6 application starting in development 
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 5.6.6 (ruby 3.2.2-p53) ("Birdie's Version")
*  Min threads: 5
*  Max threads: 5
*  Environment: development
*          PID: 68555
* Listening on http://127.0.0.1:3000
* Listening on http://[::1]:3000
Use Ctrl-C to stop

Started GET "/" for 127.0.0.1 at 2023-07-25 21:45:51 -0300
  ActiveRecord::SchemaMigration Pluck (0.1ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC

Processing by ComputersController#index as HTML

[2, 11] in ~/vscode/ruby/projeto-debug/app/controllers/computers_controller.rb
     2|   before_action :set_computer, only: %i[ show edit update destroy ]
     3| 
     4|   # GET /computers or /computers.json
     5|   def index
     6|     minha_idade = 123
=>   7|     binding.break
     8|     @computers = Computer.all
     9|     binding.break
    10|   end
    11| 

=>#0	ComputersController#index at ~/vscode/ruby/projeto-debug/app/controllers/computers_controller.rb:7

  #1	ActionController::BasicImplicitRender#send_action(method="index", args=[]) at ~/.rbenv/versions/3.2.2/lib/ruby/gems/3.2.0/gems/actionpack-7.0.6/lib/action_controller/metal/basic_implicit_render.rb:6
  # and 75 frames (use `bt' command for all frames)

(rdbg)
  • Foram adicionadas algumas linhas no código acima apenas para facilitar a leitura
  • É possível acessar e alterar qualquer variável a partir do console rdbg
  • Para seguir para pŕoximo "binding.break" ou continua a execução normalmente a partir do console de debug rdbg, digite a letra "c", de continue, e depois Enter
  • Para comhecer as demais opções, digite "h" de help e depois Enter

Usando Launch Configs

TODO: Detalhar e concluir esta parte

  • Instale a extenção "Launch Configs"

  • Use o texto debugger antes do trecho que deseja debugar, por exemplo

  def validar_dados # 1º
    # raise Exception, "ERRO!!! validar_dados"
    debugger
    puts "==============================> 1- VALIDATION #{valor_estimado}"
    puts "==============================> 1- VALIDATION #{valor_estimado.class}"
    puts "==============================> 1- VALIDATION #{valor_homologado}"
  end

Verificar Atalhos do VSCode

  • Manage > Keyboard Shortcuts > Procurar por "format document"
  • O meu está configurado como "Ctrl + Shift + i"

Alguns Atalhos do Importantes do VSCode

Atalho Função
Ctrl + P (Quick Open) Pesquisa pelo nome dos arquivos
CTRL+SHIFT+P, F1 Paleta de comandos
Ctrl + Shift + X Extension Marketplace
Ctrl + Shift + F (Global Find) Pesquisa em todos os arquivos
CTRL + D (Multi-Select Cursor) Move o cursor para a próxima ocorrência
CTRL + , (Settings...) Configurações
Atalho Função
F3 / Shift+F3 Find next/previous
Alt+Enter Select all occurences of Find match
Ctrl+H Replace
F3 / Shift+F3 Find next/previous
Atalho Função
Ctrl + X (Cut line empty selection) Remove a linha
Windows: SHIFT+ALT+F, Linux: CTRL+SHIFT+I
Ctrl+Space, Ctrl+Shift+Space (Trigger suggestion and Trigger parameter hints) Exibe sugestões
Shift+F12 (Show References) Exibe referências
CTRL + SHIFT + L Seleciona todas as ocorrências da palavra sob o cursor e substitui todas de uma única vez
CTRL + U Desfaz a última operação de seleção com o cursor
CTRL + L Seleciona a linha corrente e passa para a próxima
CTRL + G Go to, vai para a linha após informar o número dela
CTRL + K + W Fecha todas as abas abertas
Windows: SHIFT + ALT + A, Linux: CTRL+SHIFT+A Comentário em bloco
Windows/Linux: CTRL + / Comenta ou descomenta a linha atual
CTRL + SHIFT + [ Oculta o código do bloco, geralmente iniciado com uma chave "{"
CTRL + SHIFT + ] Exibe o código do bloco, geralmente iniciado com uma chave "{"
ALT + UP/DOWN (Copy Line) Move a linha atual ou linhas selecionadas para cima ou para baixo
CTRL + ` (crase) ou Ctrl + Shift + ` (crase) Abre o terminal integrado ao VSCode
CTRL+\ Divide a tela para abrir duas abas lado-a-lado
SHIFT+ALT+UP/DOWN Duplica a seleção
CTRL+B Exibe ou oculta a barra lateral esquerda
Atalho Função
Ctrl+Shift+N New window/instance
Ctrl+Shift+W Close window/instance
Ctrl+, User Settings
Ctrl+K Ctrl+S Keyboard Shortcuts
Atalho Função
Ctrl+C Copy line (empty selection)
Alt+ ↑ / ↓ Move line up/down
Shift+Alt + ↓ / ↑ Copy line up/down
Atalho Função
Ctrl+Shift+O Go to Symbol…
F8 Go to next error or warning
Shift+F8 Go to previous error or warning
Ctrl+Shift+Tab Navigate editor group history
Atalho Função
Alt+C / R / W Toggle case-sensitive / regex / whole word
Alt+F12 Peek Definition
Shift+F12 Show References
F2 Rename Symbol
Ctrl+W Close editor
Ctrl+1 / 2 / 3 Focus into 1st, 2nd or 3rd editor group
Ctrl+K F Close folder
Ctrl+K Ctrl+←/→ Focus into previous/next editor group
Ctrl+K ← / → Move active editor group
Ctrl+Shift+PgUp / PgDn Move editor left/right.

Não Utilizar por Conflitos ou Pendências de uma Configuração Melhor

  • VSCode Ruby (Obsoleto, substituído pelo Ruby LSP da Shopify): Syntax highlighing, snippet, and language configuration support for Ruby
  • Tabnine AI Autocomplete: JavaScript, Python, Java, Typescript & all other languages - AI Code completion plugin. Tabnine makes developers more productive by auto-completing their code.
    • Será solicitado autenticar com seu e-mail ou conta para usar a Tabnine
    • Clique na barra de status onde aparece Tabnine, escolha "Continue with Starter", caso não tenha uma licença
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment