@sv/codestyle

This package includes confugration files for different tools used to enforce a consistent code style accross projects.

Installation

Make sure your project is set up with access to the registry as described in Setup.

pnpm

pnpm add @sv/codestyle --save-exact

npm

npm i @sv/codestyle --save-exact

bun

bun add @sv/codestyle --exact

Usage

The .editorconfig will be copied next to your package.json using a postinstall script — if not already present.

Automatically setup the configuration in your project by running the following command for the desired tool(s):

Manual setup

Biome

For the biome configuration to work with your editior, the biome.json file needs to be in the root of the project.

biome.json

{
  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
  "extends": ["@sv/codestyle/biome"]
}

Prettier

We should use Biome for js formatting but Prettier is still useful for many other files and integrations.

package.json

{
  "name": "your-package",
  ...
  "prettier": "@sv/codestyle/.prettierrc.json"
}

Prettier docs.

TypeScript

tsconfig.json

{
  "$schema": "http://json.schemastore.org/tsconfig",
  "extends": ["@sv/codestyle/tsconfig.json"]
}

Commitlint

commitlint.config.js

module.exports = {
  extends: ["@sv/codestyle/commitlint.cjs"],
};

Note

Reccomended for a new setup is biome instead of eslint and stylelint.

ESLint

.eslintrc.json

{
  "extends": ["@sv/codestyle/.eslintrc.json"]
}

Stylelint

stylelint.config.cjs

module.exports = {
  extends: ["@sv/codestyle/stylelint.config.cjs"],
};

Included configuration files

.editorconfig

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
indent_style = space
indent_size = 2

[*.py]
indent_style = space
indent_size = 4

[*.md]
trim_trailing_whitespace = false

biome.json

{
  "$schema": "https://biomejs.dev/schemas/1.8.0/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "organizeImports": {
    "enabled": false
  },
  "linter": {
    "rules": {
      "style": {
        "noDefaultExport": "warn",
        "useExponentiationOperator": "warn"
      },
      "complexity": {
        "noStaticOnlyClass": "warn",
        "noForEach": "warn"
      },
      "a11y": {
        "useKeyWithClickEvents": "off"
      },
      "suspicious": {
        "noArrayIndexKey": "off",
        "noExplicitAny": "warn",
        "noConsoleLog": "error"
      },
      "nursery": {
        "useSortedClasses": {
          "level": "warn",
          "options": {
            "attributes": [
              "classList"
            ],
            "functions": [
              "clsx",
              "cva",
              "twMerge",
              "tw"
            ]
          }
        }
      }
    }
  },
  "formatter": {
    "enabled": true,
    "indentWidth": 2,
    "lineWidth": 90,
    "indentStyle": "space",
    "formatWithErrors": true,
    "lineEnding": "lf"
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "double",
      "semicolons": "always",
      "trailingCommas": "all",
      "quoteProperties": "asNeeded",
      "jsxQuoteStyle": "double"
    }
  },
  "css": {
    "formatter": {
      "lineWidth": 90,
      "quoteStyle": "double",
      "indentStyle": "space",
      "indentWidth": 2
    }
  },
  "json": {
    "parser": {
      "allowComments": true,
      "allowTrailingCommas": true
    },
    "formatter": {
      "trailingCommas": "none",
      "lineWidth": 30
    }
  },
  "files": {
    "ignoreUnknown": true,
    "ignore": [
      ".mise",
      ".astro",
      ".nuxt",
      ".output",
      "vendor",
      "public",
      "dist"
    ]
  }
}

tsconfig.json

{
  "$schema": "http://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "target": "ES2018",
    "module": "ES2020",
    "moduleResolution": "Bundler",

    // typing
    "useUnknownInCatchVariables": true,
    "noImplicitAny": false,

    // linting
    "strict": true,
    "checkJs": true,
    "skipLibCheck": true,
    "noEmit": true,
    "noImplicitReturns": true,
    "noImplicitOverride": false,
    "noUnusedParameters": false,
    "noUnusedLocals": false,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedIndexedAccess": true,

    // imports
    "resolveJsonModule": true,
    "forceConsistentCasingInFileNames": true,
    "allowSyntheticDefaultImports": true,
    "allowImportingTsExtensions": false,
    "allowArbitraryExtensions": false,
    "esModuleInterop": true,

    "types": [
      "@total-typescript/ts-reset"
    ]
  }
}

.prettierrc.json

{
  "$schema": "http://json.schemastore.org/prettierrc",
  "semi": true,
  "trailingComma": "all",
  "singleQuote": false,
  "printWidth": 90,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "lf",
  "overrides": [
    {
      "files": ["*.json"],
      "options": {
        "printWidth": 30
      }
    },
    {
      "files": ["*.css"],
      "options": {
        "printWidth": 80
      }
    }
  ]
}

commitlint.cjs

import { RuleConfigSeverity } from "@commitlint/types";

// biome-ignore lint/style/noDefaultExport: <explanation>
export default {
  parserPreset: "conventional-changelog-conventionalcommits",
  rules: {
    "body-leading-blank": [RuleConfigSeverity.Warning, "always"],
    "body-max-line-length": [RuleConfigSeverity.Error, "always", 100],
    "footer-leading-blank": [RuleConfigSeverity.Warning, "always"],
    "footer-max-line-length": [RuleConfigSeverity.Error, "always", 100],
    "header-max-length": [RuleConfigSeverity.Error, "always", 100],
    "header-trim": [RuleConfigSeverity.Error, "always"],
    "subject-case": [
      RuleConfigSeverity.Error,
      "never",
      ["sentence-case", "start-case", "pascal-case", "upper-case"],
    ],
    "subject-empty": [RuleConfigSeverity.Error, "never"],
    "subject-full-stop": [RuleConfigSeverity.Error, "never", "."],
    "type-case": [RuleConfigSeverity.Error, "always", "lower-case"],
    "type-empty": [RuleConfigSeverity.Error, "never"],
    "type-enum": [
      RuleConfigSeverity.Error,
      "always",
      [
        "build",
        "chore",
        "ci",
        "docs",
        "feat",
        "fix",
        "perf",
        "refactor",
        "revert",
        "style",
        "test",
      ],
    ],

    "scope-empty": [2, "never"],
    "scope-case": [0, "always", ["upper-case", "lower-case"]],
    "scope-enum": [2, "always", ["frontend", "cms", "integration", "global"]],
  },
  prompt: {
    questions: {
      type: {
        description: "Select the type of change that you're committing",
        enum: {
          feat: {
            description: "A new feature",
            title: "Features",
            emoji: "✨",
          },
          fix: {
            description: "A bug fix",
            title: "Bug Fixes",
            emoji: "🐛",
          },
          docs: {
            description: "Documentation only changes",
            title: "Documentation",
            emoji: "📚",
          },
          refactor: {
            description: "A code change that neither fixes a bug nor adds a feature",
            title: "Code Refactoring",
            emoji: "📦",
          },
          test: {
            description: "Adding missing tests or correcting existing tests",
            title: "Tests",
            emoji: "🚨",
          },
          ci: {
            description:
              "Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)",
            title: "Continuous Integrations",
            emoji: "⚙️",
          },
          chore: {
            description: "Other changes that don't modify src or test files",
            title: "Chores",
            emoji: "♻️",
          },
        },
      },
      scope: {
        description: "What is the scope of this change (e.g. component or file name)",
      },
      subject: {
        description: "Write a short, imperative tense description of the change",
      },
      issues: {
        description: 'Add issue references (e.g. "fix #123", "re #123".)',
      },
    },
  },
};

eslint.json

{
  "parser": "@babel/eslint-parser",
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "parserOptions": {
    "requireConfigFile": false,
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "rules": {
    "indent": [
      "error",
      2,
      {
        "SwitchCase": 1
      }
    ],
    "eqeqeq": [
      "error",
      "always"
    ],
    "no-trailing-spaces": "error",
    "no-multiple-empty-lines": [
      "error",
      {
        "max": 1,
        "maxEOF": 1
      }
    ],
    "keyword-spacing": [
      "error",
      {
        "before": true,
        "after": true
      }
    ],
    "arrow-spacing": [
      "error",
      {
        "before": true,
        "after": true
      }
    ],
    "brace-style": [
      "error",
      "1tbs",
      {
        "allowSingleLine": true
      }
    ],
    "space-in-parens": [
      "error",
      "never"
    ],
    "array-bracket-spacing": [
      "error",
      "never"
    ],
    "space-before-blocks": [
      "error",
      "always"
    ],
    "no-var": "warn",
    "prefer-const": "warn",
    "prefer-arrow-callback": "warn",
    "curly": ["error", "all"],
    "linebreak-style": [
      "error",
      "unix"
    ],
    "quotes": [
      "error",
      "single"
    ],
    "semi": [
      "error",
      "always"
    ],
    "no-unused-vars": [
      "warn"
    ],
    "no-console": ["warn"]
  }
}

stylelint.config.cjs

module.exports = {
  extends: ["stylelint-config-standard-scss", "stylelint-config-prettier"],
  rules: {
    "at-rule-no-unknown": null,
    "block-closing-brace-newline-after": "always-single-line",
    "block-closing-brace-empty-line-before": "never",
    "block-opening-brace-newline-after": "always-multi-line",
    "block-no-empty": null,
    "comment-empty-line-before": "never",
    "declaration-block-semicolon-newline-after": "always-multi-line",
    "declaration-block-trailing-semicolon": "always",
    "no-descending-specificity": null,
    "no-empty-source": null,
    "no-eol-whitespace": true,
    "no-extra-semicolons": true,
    "no-missing-end-of-source-newline": true,
    "scss/at-rule-no-unknown": true,
    "scss/double-slash-comment-empty-line-before": null,
    "selector-class-pattern": null,
    "selector-id-pattern": null,
    "selector-pseudo-element-no-unknown": [true, { ignorePseudoElements: ["v-deep"] }],
  },
};

Changelog

1.2.0 (2024-07-18)

Features

• update config schema to biome 1.8.0

1.1.1 (2024-06-15)

Fixes

• set useExponentiationOperator to warn

1.1.0 (2024-06-04)

Features

• enable allowComments in json parser and add css formatter config

1.0.0 (2024-05-26)

0.8.1 (2024-05-22)

Features

...

Full changelog