Setup linter for Ruby on Rails and React using VS Code Devcontainers.
Tags: javascript, rails, react, docker
Published: 2022-03-01 15:59:48

## 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/](https://git-scm.com/)).
- Docker ([https://www.docker.com/get-started](https://www.docker.com/get-started)).
- docker-compose ([https://docs.docker.com/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.

```json
{
  "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:

```docker
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:
    
    
![Run Devcontainer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55rrv28596a6yauc8no2.png)
    
- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mwb3dn0ujlsefju3rr66.png)

*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

```bash
# Clone git repo
git clone git@github.com: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.

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

### Step 3: Open DevContainer

### Step 4: Quickstart

```bash
# Run into the Docker container.
rubocop
```

We can see the offenses, like this one:

```bash
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

```bash
rubocop --auto-correct-all
```

We can see the offenses in the code:


![Offenses](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y18h2xysch55kflpof7z.png)

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

### Step 1: Open DevContainer

### Step 2: Install ESlint

```bash
# 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

```bash
# 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:

```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
    

![Prettier](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fcadzs70ccbgb78hcm2q.png)
    

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

```bash
# 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:

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

Now we can see the offenses!


![Offenses](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/64ln8n0n2llbvy6nbdec.png)

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

Thanks for reading!