RightCapital Frontend Style Guide

GitHub Workflow Status (with event)

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 { defineConfig } = eslintConfigRightcapital.utils;

export default defineConfig(
  ...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

defineConfig: reexported util from typescript-eslint for easier compositing ESLint config. (docs: https://typescript-eslint.io/packages/typescript-eslint#config), with automatic plugin inference (when the plugin is known to @rightcapital/eslint-config).

const { defineConfig } = eslintConfigRightcapital.utils;

export default defineConfig({
  plugins: {
    /**
     * You can omit this since it's already known to `@rightcapital/eslint-config`.
     * And `defineConfig` will automatically infer the plugin from `@rightcapital/eslint-config`.
     */
    // unicorn: eslintPluginUnicorn,
  },
  rules: {
    'unicorn/no-hex-escape': 'error',
  },
});

globals: reexported util from globals, useful for configuring languageOptions.globals.

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

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):

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

`js .eslintrc.cjs /* @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

<details>
<summary>
For example, we have a project with the following structure:
</summary>

. ├── .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:

```js
/** @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');

Package detail

@rightcapital/prettier-config

readme

RightCapital Frontend Style Guide

Introduction

ESLint

Prerequisite

Usage

Exported configs and utils

Prettier

Prerequisite

Usage

License