RightCapital Frontend Style Guide

RightCapital's frontend style guide.

Introduction

This repo contains configs for common linting and styling tools widely used in RightCapital.

Following tools are covered:

• ESLint
• Prettier

ESLint

Prerequisite

• eslint(>=9)
• typescript(optional, for TypeScript support)

Usage

Install @rightcapital/eslint-config to your project.

pnpm add -D @rightcapital/eslint-config

In your eslint.config.mjs(or equivalent):

import eslintConfigRightcapital from '@rightcapital/eslint-config';

const { config } = eslintConfigRightcapital.utils;

export default config(
  ...eslintConfigRightcapital.configs.recommended,

  // add more configs for specific files or packages if needed
  {
    files: ['scripts/**/*.{js,cjs,mjs}'],
    extends: [
      ...eslintConfigRightcapital.configs.node,
      ...eslintConfigRightcapital.configs.script,
    ],
  },
);

Exported configs and utils

configs

• recommended: the all-in-one config, contains multiple rules configs for different files.

Note

The following configs are designed to be used with extends option. They do have a preset files option.

• js: JavaScript specific config.
• ts: TypeScript specific config.
• react: React specific config.
• node: Node.js specific config.
• script: Script oriented config, with less strict rules.

utils

• config: reexported util from typescript-eslint for easier compositing ESLint config. (docs: https://typescript-eslint.io/packages/typescript-eslint#config)
• globals: reexported util from globals, useful for configuring languageOptions.globals.

---

[Deprecated] Usage for Legacy ESLint versions(<9)

There are following config packages for legacy ESLint versions(<9):

• @rightcapital/eslint-config-javascript: for JavaScript files
• @rightcapital/eslint-config-typescript: for TypeScript files
• @rightcapital/eslint-config-typescript-react: for TypeScript + React files
• @rightcapital/eslint-plugin

They can be used independently or combined together according to your project's needs.

Install the config package(s) you need:

# e.g. for a project only using JavaScript
pnpm add -D @rightcapital/eslint-config-javascript

In your .eslintrc.cjs(or equivalent):

1. using overrides to group different types of files, and extends the corresponding config.
2. Add proper env and other configs if needed.

/** @type {import("eslint").Linter.Config} */
module.exports = {
  // use overrides to group different types of files
  // see https://eslint.org/docs/latest/use/configure/configuration-files#configuration-based-on-glob-patterns
  overrides: [
    {
      // typical TypeScript React code, running in browser
      files: ['src/**/*.{ts,tsx}'],
      excludedFiles: ['src/**/*.test.{ts,tsx}'], // exclude test files
      extends: ['@rightcapital/typescript-react'],
      env: { browser: true },
    },
  ],
};

[!NOTE]
Applying same config to all files in the project could be error-prone. Not recommended.

Complete Showcase

For example, we have a project with the following structure:

.
├── .eslintrc.cjs
├── jest.config.cjs
├── prettier.config.cjs
├── scripts      <---------------- Various scripts running in Node.js
│   ├── brew-coffee.ts
│   ├── make-latte.mjs
│   └── print-project-stats.tsx
└── src
    ├── App.test.ts  <------------ Jest test file
    └── App.tsx      <------------ TypeScript React component

The .eslintrc.cjs could look like this:

/** @type {import("eslint").Linter.Config} */
module.exports = {
  // usually `true` for project root config
  // see https://eslint.org/docs/latest/use/configure/configuration-files#cascading-and-hierarchy
  root: true,

  // use overrides to group different types of files
  // see https://eslint.org/docs/latest/use/configure/configuration-files#configuration-based-on-glob-patterns
  overrides: [
    {
      // typical TypeScript React code, running in browser
      files: ['src/**/*.{ts,tsx}'],
      excludedFiles: ['src/**/*.test.{ts,tsx}'], // exclude test files
      extends: ['@rightcapital/typescript-react'],
      env: { browser: true },
    },
    {
      // test files
      files: ['src/**/*.test.{ts,tsx}'],
      extends: ['@rightcapital/typescript-react'],
      env: { jest: true, node: true },
    },
    {
      // JavaScript config and scripts
      files: ['./*.{js,cjs,mjs,jsx}', 'scripts/**/*.{js,cjs,mjs,jsx}'],
      excludedFiles: ['src/**'],
      extends: ['@rightcapital/javascript'],
      env: { node: true },
    },
    {
      // TypeScript config and scripts
      files: ['./*.{ts,cts,mts,tsx}', 'scripts/**/*.{ts,cts,mts,tsx}'],
      excludedFiles: ['src/**'],
      env: { node: true },
    },
  ],
};

Prettier

Prerequisite

• prettier

Usage

Install config package to your project:

pnpm add -D @rightcapital/prettier-config

In your project's prettier.config.cjs:

module.exports = require('@rightcapital/prettier-config');

License

MIT License © 2023-Present