This repository is the home of Vercel's style guide, which includes configs for popular linting and styling tools.

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

• Prettier
• ESLint
• TypeScript

Please read our contributing guide before creating a pull request.

Note: Prettier is a peer-dependency of this package, and should be installed at the root of your project.

See: https://prettier.io/docs/en/install.html

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

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

Note: ESLint is a peer-dependency of this package, and should be installed at the root of your project.

See: https://eslint.org/docs/user-guide/getting-started#installation-and-usage

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 (requires additional configuration)

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

For example, use the shared ESLint config(s) in a Next.js project, set the following in .eslintrc.js.

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

Some of the rules enabled in the TypeScript config require additional type information, you'll need to provide the path to your tsconfig.json.

For more information, see: https://typescript-eslint.io/docs/linting/type-linting

const { resolve } = require('path');

const project = resolve(__dirname, 'tsconfig.json');

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

ESLint 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')],
    },
  ],
};

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' } },
  ],
};

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

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