Tag: VS Code

In the first part of this guide, we covered setting up a Rails 8 app with essential configurations. In this follow-up, we’ll go over optimizing command-line usage, setting up VS Code for development, running migrations, styling the app, and enabling Action Text.

1. Optimizing Command-Line Usage with Aliases

One of the best ways to speed up development is to create shortcuts for frequently used commands. You can do this by adding aliases to your shell configuration.

Steps to Add an Alias:

1. Open your shell configuration file:
   vim ~/.zshrc
2. Search for the alias section:
   <esc> / alias <enter>
3. Add your alias:
   alias gs="git status"
4. Save and exit:
   <esc> :wq
5. Reload your configuration:
   source ~/.zshrc
6. Use your new alias:
   gs

This method saves time by allowing you to run frequently used commands more quickly.

2. Using Terminal Efficiently in VS Code

By default, VS Code uses `Ctrl + “ to toggle the terminal, which may not be intuitive. You can change this shortcut:

1. Open VS Code.
2. Go to Settings → Keyboard Shortcuts.
3. Search for Toggle Terminal.
4. Click Edit and change it to Ctrl + Opt + T for easier access.

3. Setting Up RuboCop in VS Code

RuboCop ensures your Ruby code follows best practices. Here’s how to set it up:

Checking RuboCop from the Terminal:

rubocop .

VS Code Setup:

1. Open Command Palette (Cmd + Shift + P) and search for “Lint by RuboCop”.
2. Go to Extensions Tab and install “VS Code RuboCop”.
3. In VS Code Settings, search for “Rubocop” and check Ruby -> Rubocop -> Execute Path.
4. Find the RuboCop installation path: whereis rubocop Example output: ~/.local/share/mise/installs/ruby/3.4.1/bin/rubocop/
5. Update the Execute Path in VS Code to: ~/.local/share/mise/installs/ruby/3.4.1/bin/
6. If RuboCop still returns an empty output, check .rubocop.yml in your project: ~/rails/design_studio/.rubocop.yml
7. If the issue persists, ensure the gem is installed: gem install rubocop
8. Restart VS Code from the Rails project root: code .

For more details, check the official documentation: RuboCop Usage

4. Running Migrations and Starting the Server

Running Migrations:

rails db:migrate -t

You can check the file: db/schema.rb You can see the active storage tables for attachments and other info.

Starting the Rails Server:

bin/dev

Access your application at: http://localhost:3000/

Check the product routes:

• http://localhost:3000/products
• http://localhost:3000/products.json

5. Adding Basic Styles

To quickly improve the appearance of your site, add this to application.html.erb:

<%= stylesheet_link_tag "https://cdn.simplecss.org/simple.css" %>

Alternatively, use Tailwind CSS for a more modern approach.

An example of convention over configurations in view file in Rails:

<div id="products">
  <%= render brand.products %>
</div>

Rails will look into the views/products/ folder and fetch right partial file that match.

6. Debugging with Rails Console

If an error occurs, you can inspect variables and data in the Rails console:

rails console

7. Installing Action Text for Rich Text Editing

Action Text is not installed by default but can be added easily:

rails action_text:install

This command:

• Installs JavaScript dependencies
• Creates necessary stylesheets
• Generates database migrations for rich text

Running Migrations:

rails db:migrate -t

If you encounter an error about missing gems:

Could not find gem 'image_processing (~> 1.2)'

Run:

bundle install
rails db:migrate -t

Updating the Product Model:

Add this to app/models/product.rb:

has_rich_text :description

Updating the Form View:

In app/views/products/_form.html.erb, replace the description input with:

<%= form.rich_text_area :description %>

Now, visiting the new product page should display a rich text editor.

8. Solving Image Processing Errors

If you see an error like:

LoadError: Could not open library 'vips.42'

Install libvips to resolve it:

brew install vips

Conclusion

In this second part, we covered:

• Optimizing terminal usage with aliases.
• Configuring VS Code for efficient development.
• Running migrations and starting the Rails server.
• Enhancing the UI with styles.
• Debugging using Rails console.
• Installing and configuring Action Text for rich text support.

Stay tuned for more Rails 8 improvements!

Part 3: https://railsdrop.com/2025/03/25/setup-rails-8-app-git-setup-gitignore-part-3/

To be continued… 🚀