37signals house style

Ruby

RuboCop has built-in support for pulling config from a gem. We provide a rubocop-37signals gem for this purpose.

To introduce our house style to an app, add rubocop-37signals to your Gemfile:

gem "rubocop-37signals", github: "basecamp/house-style", require: false

And create a boilerplate .rubocop.yml that inherits from rubocop-37signals:

# 37signals house style
inherit_gem: { rubocop-37signals: rubocop.yml }

For non-Rails apps:

# 37signals house style
inherit_gem: { rubocop-37signals: rubocop-ruby.yml }

App-specific config may follow, overriding the house style.

JavaScript

We use ESLint for our JavaScript. You'll need eslint 9 or higher to use our shared config.

The configurations is based on @eslint/js's recommended config, with a few more stylistic rules added to reflect our preferences.

To use our ruleset as a baseline, add the @37signals/eslint-config package:

npm install --save-dev @37signals/eslint-config

Or with Yarn:

yarn add --dev @37signals/eslint-config

And extend it in your eslint.config.mjs file:

import houseStyle from "@37signals/eslint-config"

export default [
  houseStyle,
  {
    rules: {
      "no-unused-vars": [ "off" ]
      ...
    }
  }
]

SCSS

We use Stylelint for our SCSS.

Our config extends stylelint-config-recommended-scss and makes it a little more lax.

To see the rules, read the config itself.

To use our small ruleset as a baseline, add the @37signals/stylelint-config-scss package:

npm install --save-dev @37signals/stylelint-config-scss

# or
yarn add --dev @37signals/stylelint-config-scss

And extend it in your Stylelint config:

{
  "extends": "@37signals/stylelint-config-scss",

  "rules": {
    …
  }
}