@vercel/style-guide

The Vercel Style Guide

This repository is the home of our style guide, along with configs for popular linting and styling tools.

The following configs are available, and are designed to be used together.

• Prettier
• ESLint
• TypeScript

Contributing

Please read our contributing guide before creating a pull request.

Prettier

To use the shared Prettier config, set the following in package.json.

{
  "prettier": "@vercel/style-guide/prettier"
}

ESLint

To use the shared ESLint config, set the following in .eslintrc.js.

This ESLint config is designed to be composable. The base configs, @vercel/style-guide/eslint/node or @vercel/style-guide/eslint/browser, set up a project for JavaScript and should always be first in extends.

The following optional configs are available:

• @vercel/style-guide/eslint/jest
• @vercel/style-guide/eslint/next (requires @vercel/style-guide/eslint/react)
• @vercel/style-guide/eslint/react
• @vercel/style-guide/eslint/typescript (needs parserOptions.project)

You'll need to use require.resolve to provide ESLint with absolute paths, due to an issue around ESLint config resolution (see eslint/eslint#9188).

module.exports = {
  extends: [
    require.resolve('@vercel/style-guide/eslint/browser'),
    require.resolve('@vercel/style-guide/eslint/react'),
    require.resolve('@vercel/style-guide/eslint/next'),
  ],
};

ESLint-TypeScript configuration

As some TypeScript rules require additional type information, you'll need to provide the path to your tsconfig.

module.exports = {
  extends: [
    require.resolve('@vercel/style-guide/eslint/node'),
    require.resolve('@vercel/style-guide/eslint/typescript'),
  ],
  parserOptions: {
    project: './tsconfig.json',
  },
};

Scoped configuration with overrides

Configs can be scoped to include/exclude specific paths. This ensures that rules don't "leak" to places where those rules don't apply.

In this example, Jest rules are only being applied to files matching Jest's default test match pattern.

module.exports = {
  extends: [require.resolve('@vercel/style-guide/eslint/node')],
  overrides: [
    {
      files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
      extends: [require.resolve('@vercel/style-guide/eslint/jest')],
    },
  ],
};

A note on file extensions

By default, all TypeScript rules are scoped to files ending with .ts and .tsx.

However, when using overrides, file extensions must be included or ESLint will only include .js files.

module.exports = {
  overrides: [
    { files: [`directory/**/*.[jt]s?(x)`], rules: { 'my-rule': 'off' } },
  ],
};

TypeScript

To use the shared TypeScript config, set the following in tsconfig.json.

{
  "extends": "@vercel/style-guide/typescript"
}