RightCapital's frontend style guide.
This repo contains configs for common linting and styling tools widely used in RightCapital.
Following tools are covered:
This repo provides the following ESLint config packages:
@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.
Note
make sure eslint
is installed in your project.
And install typescript
to your project if you want to use the config supporting TypeScript(@rightcapital/eslint-config-typescript*
).
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.
/** @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.
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 },
},
],
};
Note: Prettier is a peer dependency of the config package. You need to install it in the root of your project.
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');
MIT License © 2023-Present