{"id":13431240,"url":"https://github.com/vercel/style-guide","last_synced_at":"2025-04-26T02:22:16.474Z","repository":{"id":37430366,"uuid":"475337849","full_name":"vercel/style-guide","owner":"vercel","description":"Vercel's engineering style guide","archived":false,"fork":false,"pushed_at":"2024-10-26T18:53:34.000Z","size":345,"stargazers_count":1263,"open_issues_count":21,"forks_count":36,"subscribers_count":34,"default_branch":"canary","last_synced_at":"2024-10-29T15:17:11.252Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vercel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-29T07:54:30.000Z","updated_at":"2024-10-27T15:22:49.000Z","dependencies_parsed_at":"2023-09-26T00:54:39.717Z","dependency_job_id":"e3e80cc7-d3d6-42d5-887e-fd29cb6f9568","html_url":"https://github.com/vercel/style-guide","commit_stats":{"total_commits":115,"total_committers":11,"mean_commits":"10.454545454545455","dds":0.6434782608695653,"last_synced_commit":"1377fa3bedafe60954d20f80a455e3a0597bb354"},"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vercel%2Fstyle-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vercel%2Fstyle-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vercel%2Fstyle-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vercel%2Fstyle-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vercel","download_url":"https://codeload.github.com/vercel/style-guide/tar.gz/refs/heads/canary","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250921961,"owners_count":21508242,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T02:01:01.585Z","updated_at":"2025-04-26T02:22:16.439Z","avatar_url":"https://github.com/vercel.png","language":"JavaScript","readme":"\u003e [!CAUTION]\n\u003e This repository has been archived and sunset. The existing configurations will remain public for reference.\n\n# Vercel Style Guide\n\n## Introduction\n\nThis repository is the home of Vercel's style guide, which includes configs for\npopular linting and styling tools.\n\nThe following configs are available, and are designed to be used together.\n\n- [Prettier](#prettier)\n- [ESLint](#eslint)\n- [TypeScript](#typescript)\n\n## Contributing\n\nPlease read our [contributing](https://github.com/vercel/style-guide/blob/main/CONTRIBUTING.md)\nguide before creating a pull request.\n\n## Installation\n\nAll of our configs are contained in one package, `@vercel/style-guide`. To install:\n\n```sh\n# If you use npm\nnpm i --save-dev @vercel/style-guide\n\n# If you use pnpm\npnpm i --save-dev @vercel/style-guide\n\n# If you use Yarn\nyarn add --dev @vercel/style-guide\n```\n\nSome of our ESLint configs require peer dependencies. We'll note those\nalongside the available configs in the [ESLint](#eslint) section.\n\n## Prettier\n\n\u003e Note: Prettier is a peer-dependency of this package, and should be installed\n\u003e at the root of your project.\n\u003e\n\u003e See: https://prettier.io/docs/en/install.html\n\nTo use the shared Prettier config, set the following in `package.json`.\n\n```json\n{\n  \"prettier\": \"@vercel/style-guide/prettier\"\n}\n```\n\n## ESLint\n\n\u003e Note: ESLint is a peer-dependency of this package, and should be installed\n\u003e at the root of your project.\n\u003e\n\u003e See: https://eslint.org/docs/user-guide/getting-started#installation-and-usage\n\nThis ESLint config is designed to be composable.\n\nThe following base configs are available. You can use one or both of these\nconfigs, but they should always be first in `extends`:\n\n- `@vercel/style-guide/eslint/browser`\n- `@vercel/style-guide/eslint/node`\n\nNote that you can scope configs, so that configs only target specific files.\nFor more information, see: [Scoped configuration with `overrides`](#scoped-configuration-with-overrides).\n\nThe following additional configs are available:\n\n- `@vercel/style-guide/eslint/jest`\n- `@vercel/style-guide/eslint/jest-react` (includes rules for `@testing-library/react`)\n- `@vercel/style-guide/eslint/next` (requires `@next/eslint-plugin-next` to be installed at the same version as `next`)\n- `@vercel/style-guide/eslint/playwright-test`\n- `@vercel/style-guide/eslint/react`\n- `@vercel/style-guide/eslint/typescript` (requires `typescript` to be installed and [additional configuration](#configuring-eslint-for-typescript))\n- `@vercel/style-guide/eslint/vitest`\n\n\u003e You'll need to use `require.resolve` to provide ESLint with absolute paths,\n\u003e due to an issue around ESLint config resolution (see\n\u003e [eslint/eslint#9188](https://github.com/eslint/eslint/issues/9188)).\n\nFor example, use the shared ESLint config(s) in a Next.js project, set the\nfollowing in `.eslintrc.js`.\n\n```js\nmodule.exports = {\n  extends: [\n    require.resolve('@vercel/style-guide/eslint/browser'),\n    require.resolve('@vercel/style-guide/eslint/react'),\n    require.resolve('@vercel/style-guide/eslint/next'),\n  ],\n};\n```\n\n### Configuring ESLint for TypeScript\n\nSome of the rules enabled in the TypeScript config require additional type\ninformation, you'll need to provide the path to your `tsconfig.json`.\n\nFor more information, see: https://typescript-eslint.io/docs/linting/type-linting\n\n```js\nconst { resolve } = require('node:path');\n\nconst project = resolve(__dirname, 'tsconfig.json');\n\nmodule.exports = {\n  root: true,\n  extends: [\n    require.resolve('@vercel/style-guide/eslint/node'),\n    require.resolve('@vercel/style-guide/eslint/typescript'),\n  ],\n  parserOptions: {\n    project,\n  },\n  settings: {\n    'import/resolver': {\n      typescript: {\n        project,\n      },\n    },\n  },\n};\n```\n\n### Configuring custom components for `jsx-a11y`\n\nIt's common practice for React apps to have shared components like `Button`,\nwhich wrap native elements. You can pass this information along to `jsx-a11y`\nvia the `components` setting.\n\nThe below list is not exhaustive.\n\n```js\nmodule.exports = {\n  root: true,\n  extends: [require.resolve('@vercel/style-guide/eslint/react')],\n  settings: {\n    'jsx-a11y': {\n      components: {\n        Article: 'article',\n        Button: 'button',\n        Image: 'img',\n        Input: 'input',\n        Link: 'a',\n        Video: 'video',\n      },\n    },\n  },\n};\n```\n\n### Scoped configuration with `overrides`\n\nESLint configs can be scoped to include/exclude specific paths. This ensures\nthat rules don't \"leak\" into places where those rules don't apply.\n\nIn this example, Jest rules are only being applied to files matching Jest's\ndefault test match pattern.\n\n```js\nmodule.exports = {\n  extends: [require.resolve('@vercel/style-guide/eslint/node')],\n  overrides: [\n    {\n      files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],\n      extends: [require.resolve('@vercel/style-guide/eslint/jest')],\n    },\n  ],\n};\n```\n\n#### A note on file extensions\n\nBy default, all TypeScript rules are scoped to files ending with `.ts` and\n`.tsx`.\n\nHowever, when using overrides, file extensions must be included or ESLint will\nonly include `.js` files.\n\n```js\nmodule.exports = {\n  overrides: [\n    { files: [`directory/**/*.[jt]s?(x)`], rules: { 'my-rule': 'off' } },\n  ],\n};\n```\n\n## TypeScript\n\nThis style guide provides multiple TypeScript configs. These configs correlate to the LTS Node.js versions, providing the appropriate `lib`, `module`, `target`, and `moduleResolution` settings for each version. The following configs are available:\n\n| Node.js Version | TypeScript Config                       |\n| --------------- | --------------------------------------- |\n| v16             | `@vercel/style-guide/typescript/node16` |\n| v18             | `@vercel/style-guide/typescript/node18` |\n| v20             | `@vercel/style-guide/typescript/node20` |\n\nTo use the shared TypeScript config, set the following in `tsconfig.json`.\n\n```json\n{\n  \"extends\": \"@vercel/style-guide/typescript/node16\"\n}\n```\n\nThe base TypeScript config is also available as [`@vercel/style-guide/typescript`](./typescript/tsconfig.base.json) which only specifies a set of general rules. You should inherit from this file when setting custom `lib`, `module`, `target`, and `moduleResolution` settings.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvercel%2Fstyle-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvercel%2Fstyle-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvercel%2Fstyle-guide/lists"}