Setup linter for Ruby on Rails and React using VS Code Devcontainers.

This guide will show how to setup ESlint, Prettier and Airbnb on ReactJS, and Rubocop on Rails.

For this example Jiffy is the name of our project

Requirements

• Git (https://git-scm.com/).
• Docker (https://www.docker.com/get-started).
• docker-compose (https://docs.docker.com/compose/).
• A rails project.
• Visual Studio Code

Before installing the ESlints, we need to setup DevContainer on VSC:

Step 1: Create .devcontainer folder

Step 2: Create devcontainer.json and Dockerfile inside .devcontainer

• devcontainer.json has the ESlint config as the port and Dockerfile path.

{
  "name": "Ruby Development",
  "dockerFile": "Dockerfile",
  "appPort": 9001,
  "extensions": [
    "rebornix.Ruby",
    "castwide.solargraph",
    "kaiwood.endwise",
    "misogi.ruby-rubocop",
    "groksrc.ruby",
    "hoovercj.ruby-linter",
    "miguel-savignano.ruby-symbols",
    "wingrunr21.vscode-ruby"
  ],
  "settings": {
    "[ruby]": {
      "editor.insertSpaces": true,
      "editor.tabSize": 2
    },
    "solargraph.commandPath": "/usr/local/bundle/bin/solargraph",
    "solargraph.bundlerPath": "/usr/local/bin/bundle",
    "ruby.rubocop.executePath": "/usr/local/bundle/bin/",
    "ruby.rubocop.onSave": true,
    "ruby.rubocop.configFilePath": "/workspaces/jiffy/.rubocop.yml",
  },
  "postCreateCommand": "bundle install"
 }

• Dockerfile file has the commands to install libraries, gems and programs we need:

FROM ruby:2.7

ARG USERNAME=vscode

RUN apt-get update -yqq && \
    apt-get install curl && \
    curl -sL https://deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -y \
    nodejs

RUN gem install rubocop:'~> 1.7' rubocop-rails:'~>2.9' solargraph:'~>0.40'

Step 3: Run DevContainer

• Opening the VSC command line we have some options to run it:

• VSC open the devcontainer and gives us the rebuild image option (when it's needed)

Then we can work with Docker Image command line:

Note:

name: Defines the name for the development environment.
dockerFile: Points to the location of the Dockerfile that will be used to launch the container. This is the same file that was listed above in the Dockerfile examples.
appPort: Sets the port number that the container will run on. VS Code uses this port to connect and communicate with the container when it is launched.
extensions: Defines a list of extensions to be installed into the container. These can be individual extensions or extension packs. These are installed into the development environment on top of what has already been installed on the user’s local system.
settings: Defines the settings for the extensions and the code editor. Similarly, these settings are applied to the development environment in addition to what the user has defined in their local setup.
postCreateCommand: Specifies a command or set of commands that are run after the container is up and running.

Setup Ruby, Rails and Rspec with Rubocop gem:

Step 1: Clone Repo

# Clone git repo
git clone [e-mail]:brayvasq/jiffy.git

# Move to the repo directory
cd jiffy/

Step 2: Add Rubocop gem

We add the stable version into the :development and :test environment.

# Gemfile
group :development, :test do
  # Static code analyzer
  gem 'rubocop', '~> 1.9', require: false
end

Step 3: Open DevContainer

Step 4: Quickstart

# Run into the Docker container.
rubocop

We can see the offenses, like this one:

Rakefile:4:18: C: [Correctable] Style/StringLiterals: Prefer single-quoted strings when you don't need string interpolation or special symbols.
require_relative "config/application"

Note: If you can run the auto-correctable task of rubocop

rubocop --auto-correct-all

We can see the offenses in the code:

Set up React JS with ESLint, Prettier, and Airbnb:

Step 1: Open DevContainer

Step 2: Install ESlint

# Run into the Docker container.
npm install eslint --save-dev

Note: To install ESlint on a specific project, we run —save-dev command

Step 3: Initialize

# Run into the Docker container.
npx eslint --init

We see a few questions:

- How would you like to use ESLint? To check syntax, find problems, and enforce code style
- What type of modules does your project use? JavaScript modules (import/export)
- Which framework does your project use? React
- Does your project use TypeScript? No
- Where does your code run? Browser
- How would you like to define a style for your project? Use a popular style guide
- Which style guide do you want to follow? Airbnb (https://github.com/airbnb/javascript)
- What format do you want your config file to be in? JSON

* In this step eslint will check if you have any missing dependencies
    - Would you like to install them now with npm? Yes

We can see as a result the .eslintrc.json file in the root of the directory.

Step 4: Override Airbnb rule by adding to rules in .eslintrc.json:

// .eslintrc.json
"rules": {
"react/jsx-filename-extension": [1, {
"extensions": [".js", ".jsx"]}
]}

Step 5: Install Prettier (optional)

1. In Visual Studio Code go to View -> Extensions.
2. Search for prettier code formatter
3. Click Install

Now go back to the terminal and install the following packages:

# Run into the Docker container.
npm install eslint --save-dev
npm i prettier eslint-config-prettier eslint-plugin-prettier -D

Now update “extends” in your .eslintrc file as follows:

"extends": [ "airbnb", "plugin:prettier/recommended" ]

Now we can see the offenses!

Final

Any questions or comments are welcome, I'll share more content in following posts.

Thanks for reading!