TheLazy.Dev
Portfolio GitHub

Blog

javascript |rails |react |docker

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

josecastroa

Jose Castro

Posted on March 1, 2022

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

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"
 }
Enter fullscreen mode Exit fullscreen mode
  • 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'
Enter fullscreen mode Exit fullscreen mode

Step 3: Run DevContainer

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

Run Devcontainer

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

Then we can work with Docker Image command line:

Docker 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.
Enter fullscreen mode Exit fullscreen mode

Setup Ruby, Rails and Rspec with Rubocop gem:

Step 1: Clone Repo 

# Clone git repo
git clone git@github.com:brayvasq/jiffy.git

# Move to the repo directory
cd jiffy/
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Step 3: Open DevContainer

Step 4: Quickstart 

# Run into the Docker container.
rubocop
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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

rubocop --auto-correct-all
Enter fullscreen mode Exit fullscreen mode

We can see the offenses in the code:

Offenses

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
Enter fullscreen mode Exit fullscreen mode

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

Step 3: Initialize 

# Run into the Docker container.
npx eslint --init
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"]}
]}
Enter fullscreen mode Exit fullscreen mode

Step 5: Install Prettier (optional)

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

Prettier

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
Enter fullscreen mode Exit fullscreen mode

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

"extends": [ "airbnb", "plugin:prettier/recommended" ]
Enter fullscreen mode Exit fullscreen mode

Now we can see the offenses!

Offenses

Final

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

Thanks for reading!

💖 💪 🙅 🚩
josecastroa
Jose Castro

Posted on March 1, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

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

March 1, 2022