Linting and automatic checks ✅

All Renuo projects contain (and your project must contain as well) the following linters. Every linter consists of a gem (usually) and a command to add to our bin/fastcheck script.

Check out the bin/fastcheck fastcheck for the final version of it.

Renuocop 👮

✨ Installed by the Renuo Rails template (replaces rubocop-rails-omakase).

Renuocop is based on Standard Ruby and is a set of rules that we use to lint our Ruby code.

You can execute it and correct the issues you’ll find.

bundle exec rubocop -A will fix most all of them automatically.

Brakeman

✨ Ships with Rails 8.1 by default.

Add it to the bin/fastcheck script.

bundle exec brakeman -q -z --no-summary --no-pager

Mdl

An optional check for markdown files. You can include it or not. Discuss within your team.

group :development, :test do
  gem 'mdl', require: false
end

SCSS lint

Note: Your Semaphore configuration might have to be adjusted if you decide to use npm.

To lint the SASS/SCSS files in our project you can use the stylelint npm package.

npm install stylelint stylelint-config-standard-scss

Add to the project the linter configuration file and check the bin/fastcheck template to see the command to execute the SCSS linting.

Linting against caniuse

You might want to check whether the JS/CSS you produce is working in your target browsers. This can be done using the browserslist package and linter plugins.

CSS (stylelint-no-unsupported-browser-features)

This plugin can either be configured directly (shown here) or use a global browserslist config (less flexible).

npm add -D browserslist stylelint stylelint-config-standard stylelint-no-unsupported-browser-features

// stylelint.config.mjs
export default {
  extends: ["stylelint-config-standard"],
  "plugins": [
    "stylelint-no-unsupported-browser-features"
  ],
  "rules": {
    "plugin/no-unsupported-browser-features": [
      true,
      {
        "browsers": [
          "chrome >= 112"
        ],
        "ignore": [
          "rem"
        ],
        "ignorePartialSupport": true
      }
    ]
  }
};

Assume the following CSS:

/* app/assets/stylesheets/application.css */
.layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
}

.panel {
  display: grid;
  grid-template-rows: subgrid;
  gap: 6px;
}

This would lead to the following linting error

$ node_modules/stylelint/bin/stylelint.mjs "**/*.css" -c /Users/josua/p/tmp/eslint/stylelint.config.mjs

app/assets/stylesheets/application.css
  20:3  ✖  Unexpected browser feature "css-subgrid" is not supported by Chrome 112-116  plugin/no-unsupported-browser-features

✖ 1 problem (1 error, 0 warnings)

JS (eslint-plugin-compat)

This plugin can only be configured using a global browserslist as it seems.

npm add -D eslint @eslint/js eslint-plugin-compat

// eslint.config.mjs
import js from "@eslint/js";
import compat from "eslint-plugin-compat";

export default [
  {
    files: ["**/*.js"],
    ...js.configs.recommended,
  },
  compat.configs["flat/recommended"],
];

Erb lint

group :development, :test do
  gem 'erb_lint', require: false
end

ESLint

npm install eslint
npx eslint --init (Use a popular style guide -> Airbnb)

then extend the bin/fastcheck script with:

yarn eslint app/javascript

The templates folder contains a template for the eslint configuration.

All Good!

Now your bin/fastcheck is not that fast anymore 😄