{"id":29571850,"url":"https://github.com/oceanbase/fe-lint-config","last_synced_at":"2026-01-28T10:04:48.473Z","repository":{"id":273797824,"uuid":"920358938","full_name":"oceanbase/fe-lint-config","owner":"oceanbase","description":"Front-end linting code style repository, applicable to all front-end projects of OceanBase.","archived":false,"fork":false,"pushed_at":"2025-06-19T02:46:19.000Z","size":38,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-07-18T05:49:06.390Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oceanbase.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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,"publiccode":null,"codemeta":null}},"created_at":"2025-01-22T02:25:05.000Z","updated_at":"2025-06-19T02:44:24.000Z","dependencies_parsed_at":"2025-01-23T02:45:16.496Z","dependency_job_id":null,"html_url":"https://github.com/oceanbase/fe-lint-config","commit_stats":null,"previous_names":["oceanbase/fe-lint-config"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/oceanbase/fe-lint-config","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oceanbase%2Ffe-lint-config","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oceanbase%2Ffe-lint-config/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oceanbase%2Ffe-lint-config/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oceanbase%2Ffe-lint-config/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oceanbase","download_url":"https://codeload.github.com/oceanbase/fe-lint-config/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oceanbase%2Ffe-lint-config/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265889155,"owners_count":23844539,"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":"2025-07-19T04:36:19.509Z","updated_at":"2026-01-28T10:04:48.449Z","avatar_url":"https://github.com/oceanbase.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# OceanBase Lint Standards\n\nEnglish | [中文](./README-zh-CN.md)\n\n- [Quick Start](#quick-start)\n- [ESLint Configuration](#eslint)\n- [Stylelint Configuration](#stylelint)\n  - [Design Token Plugin](#design-token-plugin)\n\n## Quick Start\n\n### Interactive Setup (Recommended)\n\nUse the interactive command to configure ESLint or Oxlint:\n\n```bash\nnpx @oceanbase/lint-config setup-lint\n```\n\nThis will guide you to:\n1. Choose ESLint, Oxlint, or both\n2. Select project type (TypeScript, React)\n3. Select features (Prettier, Import rules, etc.)\n4. Generate config files\n5. Install dependencies\n6. Add npm scripts\n\nSee [bin/README.md](./bin/README.md) for details.\n\n### Manual Installation\n\n#### Install\n\n```bash\nnpm i --save-dev eslint prettier stylelint @oceanbase/lint-config stylelint-config-recommended-less stylelint-config-standard stylelint-less\n```\n\n#### Requirements\n\n- ESLint v9.5.0+\n- Node.js (^18.18.0, ^20.9.0, or \u003e=21.1.0)\n\n## ESLint\n\n### Enabled Plugins\n\n- [eslint-plugin-import](https://github.com/benmosher/eslint-plugin-import)\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-prettier](https://github.com/prettier/eslint-plugin-prettier)\n\n### Usage\n\nCreate an `eslint.config.mjs` file in your project root:\n\n```js\n// eslint.config.mjs\nimport { OBEslintCfg } from '@oceanbase/lint-config'\n\nexport default OBEslintCfg()\n```\n\n### Add Scripts to `package.json`\n\n```json\n{\n  \"scripts\": {\n    \"lint\": \"eslint .\",\n    \"lint:fix\": \"eslint . --fix\"\n  }\n}\n```\n\n### Lint on Commit\n\nAdd the following to `package.json` to run lint and auto-fix on each commit:\n\n```bash\nnpm i --save-dev lint-staged husky\n```\n\n```json\n{\n  \"scripts\": {\n    \"prepare\": \"husky install\"\n  },\n  \"lint-staged\": {\n    \"./src/**/*.{js,jsx,ts,tsx}\": [\n      \"npx prettier --write\",\n      \"npm run lint:fix\"\n    ]\n  }\n}\n```\n\n### Customization\n\n```js\n// eslint.config.js\nimport OBEslintCfg from '@oceanbase/lint-config'\n\nexport default OBEslintCfg({\n  // Default plugins; set to false to disable\n  typescript: true,\n  prettier: true,\n  import: true,\n  react: true,\n  // .eslintignore is not used in flat config; configure ignores here\n  ignores: [\n    '**/fixtures'\n    // ...globs\n  ]\n})\n```\n\n`OBEslintCfg` also accepts any number of custom config overrides:\n\n```js\n// eslint.config.js\nimport OBEslintCfg from '@oceanbase/lint-config'\n\nexport default OBEslintCfg(\n  {\n    // OBEslintCfg options\n  },\n  // From the second argument onward, use ESLint Flat Configs\n  {\n    ignores: ['**/test'],\n    files: ['**/*.ts'],\n    rules: {\n      'no-unused-vars': ['error', { varsIgnorePattern: '^_' }]\n    }\n  },\n  {\n    rules: {}\n  }\n)\n```\n\n### Rule Overrides\n\nRules are scoped per module and can be overridden in the first argument or in later config objects:\n\n```js\n// eslint.config.js\nimport OBEslintCfg from '@oceanbase/lint-config'\n\nexport default OBEslintCfg(\n  {\n    typescript: {\n      overrides: {\n        '@typescript-eslint/no-unused-vars': 'off'\n      }\n    }\n  },\n  {\n    files: ['**/*.vue'],\n    rules: {\n      'vue/operator-linebreak': ['error', 'before']\n    }\n  }\n)\n```\n\n### TypeScript Type Information Rules\n\nYou can enable [type-aware rules](https://typescript-eslint.io/linting/typed-linting/) by setting `tsconfigPath`:\n\n\u003e [!NOTE]\n\u003e Type-aware rules are stricter; enable based on your project needs. They may also affect performance depending on repository size.\n\n```js\nimport OBEslintCfg from '@oceanbase/lint-config'\n\nexport default OBEslintCfg({\n  typescript: {\n    tsconfigPath: 'tsconfig.json'\n  }\n})\n```\n\n### Adding New Rules\n\n1. Add rules under `src/rules`\n2. Add them to a config under `src/configs`\n3. Expose options in `src/factory.ts` if needed\n\n### View Enabled Rules\n\nFrom the project root:\n\n```bash\nnpx @eslint/config-inspector\n```\n\n### IDE Support (Auto-Fix on Save)\n\n\u003cdetails\u003e\n\u003csummary\u003e🟦 VS Code\u003c/summary\u003e\n\n\u003cbr\u003e\n\nInstall the [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).\n\nAdd to `.vscode/settings.json`:\n\n```jsonc\n{\n  \"prettier.enable\": false,\n  \"editor.formatOnSave\": false,\n  \"editor.codeActionsOnSave\": {\n    \"source.fixAll.eslint\": \"explicit\",\n    \"source.organizeImports\": \"never\"\n  },\n  \"eslint.validate\": [\n    \"javascript\",\n    \"javascriptreact\",\n    \"typescript\",\n    \"typescriptreact\",\n    \"vue\",\n    \"html\",\n    \"markdown\",\n    \"json\",\n    \"jsonc\",\n    \"yaml\",\n    \"toml\",\n    \"xml\",\n    \"gql\",\n    \"graphql\",\n    \"astro\",\n    \"svelte\",\n    \"css\",\n    \"less\",\n    \"scss\",\n    \"pcss\",\n    \"postcss\"\n  ]\n}\n```\n\n\u003c/details\u003e\n\n## Stylelint\n\n### Enabled Plugins\n\n- [stylelint-config-recommended-less](https://github.com/stylelint-less/stylelint-less)\n- [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard)\n\n### Usage\n\nCreate a `.stylelintrc.mjs` file in your project root:\n\n```js\n// .stylelintrc.mjs\nimport { OBStylelintCfg } from '@oceanbase/lint-config'\n\nexport default OBStylelintCfg()\n```\n\n### Add Scripts to `package.json`\n\n```json\n{\n  \"scripts\": {\n    \"lint:css\": \"stylelint '**/*.{less,css}'\",\n    \"lint:fix:css\": \"stylelint '**/*.{less,css}' --fix\"\n  }\n}\n```\n\n### Lint on Commit\n\nAdd to `package.json` to run stylelint on commit:\n\n```json\n{\n  \"scripts\": {\n    \"prepare\": \"husky install\"\n  },\n  \"lint-staged\": {\n    \"./src/**/*.{less,css}\": [\n      \"npx stylelint --fix\"\n    ]\n  }\n}\n```\n\n### Rule Overrides\n\nYou can add custom plugins via `extends` and override rules via `overrides`:\n\n```js\n// .stylelintrc.mjs\nimport { OBStylelintCfg } from '@oceanbase/lint-config'\n\nexport default OBStylelintCfg({\n  extends: ['some-plugin'],\n  overrides: {\n    'selector-class-pattern': null\n  }\n})\n```\n\n### Design Token Plugin\n\nThe built-in **Design Token** plugin (rule: `ob/use-design-tokens`) checks style files for hardcoded colors, dimensions, etc., and can replace them with design tokens (e.g. CSS variables) so styles stay aligned with your design system.\n\n#### Overview\n\n| Feature | Description |\n|--------|-------------|\n| Detect \u0026 replace | Finds hardcoded colors (hex/rgb/rgba), dimensions, radius, shadow, etc., and replaces with configured tokens |\n| Default tokens | OceanBase UI design tokens are included; you can enable them or use only your own |\n| Auto-fix | `stylelint --fix` rewrites replaceable values to tokens |\n| Warnings | Optional warnings for values that don’t match any token |\n\n#### Enabling\n\nTurn on `designTokens.enabled` in `OBStylelintCfg` and configure as needed:\n\n```js\n// .stylelintrc.mjs\nimport { OBStylelintCfg } from '@oceanbase/lint-config/stylelint'\n\nexport default OBStylelintCfg({\n  designTokens: {\n    enabled: true,\n    // Merge built-in OceanBase UI tokens, default true\n    useDefaultOBUIToken: true,\n    // Custom token map (merged with defaults, same key overrides)\n    tokens: {\n      '--my-border': '#cdd5e4',\n      '--my-primary': '#0d6cf2'\n    },\n    // Output as CSS variables, default true\n    useCSSVariable: true,\n    // CSS variable prefix, e.g. 'ob' → var(--ob-xxx)\n    cssVariablePrefix: 'ob',\n    ignoreProperties: [],\n    ignoreValues: [],\n    disableFix: false,\n    enableWarningForNonTokenValues: true\n  }\n})\n```\n\nTo use only your own tokens (no built-in OceanBase UI set):\n\n```js\nexport default OBStylelintCfg({\n  designTokens: {\n    enabled: true,\n    useDefaultOBUIToken: false,\n    tokens: {\n      colorBorder: '#cdd5e4',\n      colorPrimary: '#0d6cf2'\n    },\n    useCSSVariable: true,\n    cssVariablePrefix: 'my'\n  }\n})\n```\n\n#### Using the Plugin Standalone\n\nIf you only use Stylelint and want to use the Design Token plugin on its own, import the rule from `@oceanbase/lint-config/stylelint`. With `useDefaultOBUIToken: true` (default) and no `tokens`, the built-in OceanBase UI tokens are used; pass `tokens` to override or set `useDefaultOBUIToken: false` to use only your own tokens:\n\n```js\n// .stylelintrc.mjs\nimport { useDesignTokens } from '@oceanbase/lint-config/stylelint'\n\nexport default {\n  plugins: [useDesignTokens],\n  rules: {\n    'ob/use-design-tokens': [\n      true,\n      {\n        useDefaultOBUIToken: true, // default: use built-in tokens\n        tokens: {},                // optional overrides\n        useCSSVariable: true,\n        cssVariablePrefix: 'ob'\n      }\n    ]\n  }\n}\n```\n\nFor more details, see [Design Token Plugin (Monorepo)](./docs/DESIGN_TOKEN_PLUGIN_MONOREPO.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foceanbase%2Ffe-lint-config","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foceanbase%2Ffe-lint-config","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foceanbase%2Ffe-lint-config/lists"}