{"id":22740497,"url":"https://github.com/datarockets/style-guide","last_synced_at":"2025-04-14T05:52:49.487Z","repository":{"id":34850739,"uuid":"138580815","full_name":"datarockets/style-guide","owner":"datarockets","description":"Use robust linting like we do","archived":false,"fork":false,"pushed_at":"2025-01-27T12:35:52.000Z","size":866,"stargazers_count":2,"open_issues_count":2,"forks_count":1,"subscribers_count":17,"default_branch":"canary","last_synced_at":"2025-04-14T05:52:43.319Z","etag":null,"topics":["eslint-config","linter","styleguide","stylelint-config"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/datarockets.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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}},"created_at":"2018-06-25T10:39:39.000Z","updated_at":"2025-01-27T12:35:54.000Z","dependencies_parsed_at":"2024-03-04T18:11:02.925Z","dependency_job_id":null,"html_url":"https://github.com/datarockets/style-guide","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datarockets%2Fstyle-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datarockets%2Fstyle-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datarockets%2Fstyle-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datarockets%2Fstyle-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/datarockets","download_url":"https://codeload.github.com/datarockets/style-guide/tar.gz/refs/heads/canary","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248830389,"owners_count":21168272,"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":["eslint-config","linter","styleguide","stylelint-config"],"created_at":"2024-12-10T23:09:08.410Z","updated_at":"2025-04-14T05:52:49.480Z","avatar_url":"https://github.com/datarockets.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Datarockets Style Guide\n\nThis repository is the home of Datarockets' style guide, which includes configs\nfor popular 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-1)\n\n## Contributing\n\nPlease read our [contributing](./CONTRIBUTING.md) guide before creating a pull\nrequest.\n\n## Installation\n\nAll of our configs are contained in one package, `@datarockets/style-guide`. To\ninstall:\n\n```sh\nnpm i -D @datarockets/style-guide\n```\n\nSome of our configs require peer dependencies. Install them depending on which\nconfigs you use:\n\n```sh\n# If you use @datarockets/style-guide/prettier\nnpm i -D prettier\n\n# If you use @datarockets/style-guide/eslint\nnpm i -D eslint\n\n# If you use Next.js and @datarockets/style-guide/eslint/next\nnpm i -D @next/eslint-plugin-next\n\n# If you use @datarockets/style-guide/typescript\nnpm i -D typescript\n```\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\": \"@datarockets/style-guide/prettier\"\n}\n```\n\nIf you need to override the configuration (see:\nhttps://prettier.io/docs/en/configuration#sharing-configurations):\n\n```js\nimport datarocketsPrettierConfig from '@datarockets/style-guide/prettier';\n\nexport default {\n  ...datarocketsPrettierConfig,\n  semi: false,\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 the configs order:\n\n- `@datarockets/style-guide/eslint/browser`\n- `@datarockets/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 `files`](#scoped-configuration-with-files).\n\nThe following additional configs are available:\n\n- `@datarockets/style-guide/eslint/jest`\n- `@datarockets/style-guide/eslint/jest-react` (includes rules for `@testing-library/react`)\n- `@datarockets/style-guide/eslint/next` (requires `@next/eslint-plugin-next` to be installed at the same version as `next`)\n  - extends `@datarockets/style-guide/eslint/react`\n- `@datarockets/style-guide/eslint/playwright`\n- `@datarockets/style-guide/eslint/react`\n- `@datarockets/style-guide/eslint/storybook`\n- `@datarockets/style-guide/eslint/typescript` (requires `typescript` to be installed)\n\n### Plugins\n\n#### Base\n\n- [eslint-plugin-eslint-comments](https://github.com/mysticatea/eslint-plugin-eslint-comments)\n- [eslint-plugin-import](https://github.com/import-js/eslint-plugin-import)\n- [eslint-plugin-simple-import-sort](https://github.com/lydell/eslint-plugin-simple-import-sort)\n- [eslint-plugin-unicorn](https://github.com/sindresorhus/eslint-plugin-unicorn)\n- [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier)\n\n#### TypeScript\n\n- [typescript-eslint](https://github.com/typescript-eslint/typescript-eslint)\n- [eslint-plugin-tsdoc](https://github.com/microsoft/tsdoc)\n\n#### React\n\n- [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react)\n- [eslint-plugin-react-hooks](https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks)\n- [eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y)\n\n#### Next\n\n- [@next/eslint-plugin-next](https://nextjs.org/docs/app/building-your-application/configuring/eslint#eslint-plugin)\n\n#### Jest\n\n- [eslint-plugin-jest](https://github.com/jest-community/eslint-plugin-jest)\n- [eslint-plugin-testing-library](https://github.com/testing-library/eslint-plugin-testing-library) (React)\n\n#### Playwright\n\n- [eslint-plugin-playwright](https://github.com/playwright-community/eslint-plugin-playwright)\n\n#### Storybook\n\n- [eslint-plugin-storybook](https://github.com/storybookjs/eslint-plugin-storybook)\n\n### Examples\n\n#### Next.js\n\n\u003e Note: you might need to clear ESLint's cache for the first usage.\n\nHere is a recommended approach of using ESLint configs in Next.js projects.\n\n`eslint.config.js`:\n\n```js\nimport path from 'node:path';\n\nimport browser from '@datarockets/style-guide/eslint/browser';\nimport jest from '@datarockets/style-guide/eslint/jest';\nimport jestReact from '@datarockets/style-guide/eslint/jest-react';\nimport next from '@datarockets/style-guide/eslint/next';\nimport node from '@datarockets/style-guide/eslint/node';\nimport playwright from '@datarockets/style-guide/eslint/playwright';\nimport storybook from '@datarockets/style-guide/eslint/storybook';\nimport ts from '@datarockets/style-guide/eslint/typescript';\nimport {\n  applyConfigsToFiles,\n  includeIgnoreFile,\n} from '@datarockets/style-guide/eslint/utils';\n\nconst gitignorePath = path.resolve(import.meta.dirname, '.gitignore');\n\n/** @type {import('eslint').Linter.Config[]} */\nexport default [\n  includeIgnoreFile(gitignorePath),\n  {\n    ignores: [\n      // Any directories/files which makes sense to ignore to improve ESLint\n      // performance.\n    ],\n  },\n  ...node,\n  ...browser,\n  ...ts,\n  ...next,\n  // Unit tests (Jest)\n  ...applyConfigsToFiles(\n    [\n      'src/**/__tests__/**/*.{js,jsx,ts,tsx}',\n      'src/**/?(*.)+(spec|test).{js,jsx,ts,tsx}',\n      'jest.setup.{js,ts}',\n    ],\n    [...jest, ...jestReact, { settings: { jest: { version: 20 } } }],\n  ),\n  // E2E tests (Playwright)\n  ...applyConfigsToFiles(\n    ['tests/**/?(*.)+(spec|test).{js,jsx,ts,tsx}'],\n    playwright,\n  ),\n  // Storybook\n  ...applyConfigsToFiles(['*.stories.{js,jsx,ts,tsx}'], storybook),\n];\n```\n\n`next.config.js`:\n\n```js\n/** @type {NextConfig} */\nconst nextConfig = {\n  eslint: {\n    dirs: [\n      // By default, Next.js lints only `app`, `pages`, `components`, `lib`, `src`\n      // directories. Here we overwrite it to lint all files in the project.\n      '.',\n    ],\n  },\n};\n```\n\n### Scoped configuration with `files`\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\n```js\nexport default [\n  // ...intial configuration\n  {\n    files: ['**/*.{ts,tsx}'],\n    rules: {\n      '@typescript-eslint/restrict-template-expressions': [\n        'error',\n        { allowAny: true, allowBoolean: true, allowNumber: true },\n      ],\n      '@typescript-eslint/no-misused-promises': [\n        'error',\n        { checksVoidReturn: { attributes: false } },\n      ],\n    },\n  },\n];\n```\n\nIn case you need to apply multiple configs to certain files, you can use `applyConfigsToFiles` utility. That utility preserves the original configs `files` and also applies the patterns you specify:\n\n```js\nexport default [\n  // ...intial configuration\n  ...applyConfigsToFiles(\n    ['some-dir/**/*'],\n    [\n      ...externalConfig,\n      // Here, the final `files` should match both 'some-dir/**/*' and '**/*.{ts,tsx}'.\n      { files: ['**/*.{ts,tsx}'], rules: { 'some-rule': 'off' } },\n    ],\n  ),\n];\n```\n\n### Configuring rules/settings\n\nThere are some rules/settings that you probably want to configure manually to\nfit your project needs.\n\n#### `jsx-a11y` custom components\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\nFor example,\n\n```js\nexport default [\n  // ...intial configuration\n  {\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```\n\n#### `unicorn/filename-case`\n\nBy default, it's configured to ensure that all files are in `kebab-case`. If\nyour project already have a convention for file names, you can configure this\nrule to fit the convention (see [Documentation](https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/filename-case.md)):\n\n```js\nexport default [\n  {\n    rules: {\n      // Your project uses both `camelCase` and `PascalCase`\n      'unicorn/filename-case': [\n        'error',\n        {\n          cases: {\n            camelCase: true,\n            pascalCase: true,\n          },\n        },\n      ],\n    },\n  },\n];\n```\n\n#### `simple-import-sort/imports` (import order)\n\nWe enforce a certain import order by default. For example:\n\n```tsx\n// Side effects\nimport './global.css';\n\n// Node.js builtins prefixed with `node:`.\nimport path from 'node:path';\n\n// External packages\nimport Image from 'next/image';\n\n// 1. Absolute imports and other imports such as Vue-style `@/foo`.\n// 2. Relative imports.\nimport { SomeComponent } from '@/components';\nimport { parent } from '../parent';\nimport { sibling } from './sibling';\n```\n\nYou can configure it by modifying `simple-import-sort/imports` rule (see [Documentation](https://github.com/lydell/eslint-plugin-simple-import-sort)):\n\n```js\nexport default [\n  {\n    rules: {\n      'simple-import-sort/imports': [\n        'error',\n        {\n          groups: [\n            // Type imports.\n            ['\\\\u0000$'],\n            // Side effect imports.\n            ['^\\\\u0000'],\n            // Node.js builtins prefixed with `node:`.\n            ['^node:'],\n            // Packages.\n            ['^@?\\\\w'],\n            // 1. Absolute imports and other imports such as Vue-style `@/foo`.\n            // 2. Relative imports.\n            ['^', '^\\\\.'],\n          ],\n        },\n      ],\n    },\n  },\n];\n```\n\n### Debugging ESLint\n\nSometimes you need to debug ESLint to understand what actually happens and why\nsomething doesn't work.\n\nTo output ESLint debug logs:\n\n```sh\nDEBUG=eslint* npx eslint .\n# For Next.js projects\nDEBUG=eslint* npx next lint\n```\n\nTo show final ESLint config:\n\n```sh\nnpx eslint --print-config \u003csome-file\u003e\n```\n\n## TypeScript\n\nWe provide a base config for TypeScript which contains some defaults we usually\nuse.\n\nTo use it, just extend it in your `tsconfig.json`:\n\n```json\n{\n  \"extends\": \"@datarockets/style-guide/typescript\"\n}\n```\n\nThe base config isn't intended to be used as a complete one, so you might need\nto add more settings in your `tsconfig.json`. For example:\n\n```json\n{\n  \"extends\": \"@datarockets/style-guide/typescript\",\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n    \"allowJs\": true,\n    \"noEmit\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"bundler\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"preserve\",\n    \"plugins\": [\n      {\n        \"name\": \"next\"\n      }\n    ],\n    \"paths\": {\n      \"@/*\": [\"./src/*\"]\n    }\n  },\n  \"include\": [\n    \"next-env.d.ts\",\n    \"**/*.ts\",\n    \"**/*.tsx\",\n    \".next/types/**/*.ts\",\n    \".storybook/**/*\"\n  ],\n  \"exclude\": [\"node_modules\"]\n}\n```\n\n## Acknowledge\n\nInspired by https://github.com/vercel/style-guide.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatarockets%2Fstyle-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdatarockets%2Fstyle-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatarockets%2Fstyle-guide/lists"}