My own style guide
npm install @dvukovic/style-guidePersonal style guide with ESLint, Prettier, Stylelint, and CSpell configurations.
``bash`
npx -y @dvukovic/style-guide@latest init
This interactive CLI will:
- Let you select which tools to configure (ESLint, Prettier, Stylelint, CSpell)
- Ask about your project setup (TypeScript, React/Next.js, testing frameworks)
- Install required dependencies
- Generate configuration files
`bash`
yarn add -D @dvukovic/style-guide eslint prettier stylelint cspell knip
Create eslint.config.js:
`js
import { customDefineConfig, core, typescript } from "@dvukovic/style-guide/eslint"
export default customDefineConfig({
configs: [core(), typescript()],
ignores: ["dist", "build"],
})
`
- core() - Essential rules for all JavaScript/TypeScript projectstypescript()
- - TypeScript parser and rulestypescriptStrict()
- - Additional strict TypeScript rulesreact()
- - React framework rulesnext()
- - Next.js frameworknode()
- - Node.js specific rulesjest()
- - Jest testing frameworkvitest()
- - Vitest testing frameworkplaywright()
- - Playwright e2e testingmobx()
- - MobX state managementstorybook()
- - StorybooktanstackQuery()
- - TanStack Queryturbo()
- - TurborepopackageJson()
- - package.json lintingpackageJsonWorkspace()
- - package.json linting for monorepos
Each factory function accepts a config parameter to extend or override settings:
`js
import { customDefineConfig, core, typescript } from "@dvukovic/style-guide/eslint"
export default customDefineConfig({
configs: [
core(),
typescript({
rules: {
"@typescript-eslint/no-unused-vars": "warn",
},
}),
],
ignores: ["dist"],
})
`
Create prettier.config.ts:
`ts
import type { Config } from "prettier"
import { core } from "@dvukovic/style-guide/prettier"
const config: Config = {
...core,
}
export default config
`
Create stylelint.config.js:
`js
import { core } from "@dvukovic/style-guide/stylelint"
/* @type {import("stylelint").Config} /
const config = {
...core,
}
export default config
`
Create cspell.config.js:
`js
import { core } from "@dvukovic/style-guide/cspell"
/* @type {import("cspell").FileSettings} /
const config = {
...core,
ignorePaths: [...core.ignorePaths],
ignoreWords: [],
}
export default config
`
Create knip.config.ts:
`ts
import type { KnipConfig } from "knip"
import { core } from "@dvukovic/style-guide/knip"
const config: KnipConfig = {
...core,
ignore: [],
ignoreDependencies: [...core.ignoreDependencies],
}
export default config
`
Add to your package.json:
`json``
{
"scripts": {
"lint": "yarn lint:eslint && yarn lint:prettier && yarn lint:stylelint && yarn lint:cspell && yarn lint:knip",
"lint:eslint": "eslint . --cache --concurrency=auto",
"lint:prettier": "prettier --check --cache .",
"lint:stylelint": "stylelint ./*/.css --cache",
"lint:cspell": "cspell --no-progress --no-summary --unique '**'",
"lint:knip": "knip",
"lint:fix": "yarn lint:eslint --fix && yarn lint:prettier --write && yarn lint:stylelint --fix"
}
}
MIT