🧦👒 Clear style

Monorepo storing configuration packages for checking, formatting and enforcing clear code style.

Quick Start

To quickly get setup on a new project, add the package that matches the framework you are using.

---

Vanilla

For setups that don't use any frameworks requiring special syntax or features. Has support for both esm/cjs and javascript/typescript.

First install @clear/style.

pnpm install @clear/style

Then add it as your prettier configuration in your package.json

{
    "prettier": "@clear/style/prettier",
}

Then create an eslint.config.mjs file that pulls in the config.

import config from "@clear/style/eslint/ts";

export default config;

Note

If using clear-style in a common js project or a project without typescript, you should instead create a eslint.config.cjs file and import the config from @clear/style/eslint/js instead.

---

Svelte

For use with svelte/sveltekit framework. Automatically includes svelte parsing, formatting and linting using the official plugins for each.

First install @clear/style-svelte.

pnpm install @clear/style-svelte

Then add it as your prettier configuration in your package.json

{
    "prettier": "@clear/style-svelte/prettier",
}

Then create an eslint.config.mjs file that pulls in the config.

import config from "@clear/style-svelte/eslint"; // NOTE: does not require /ts path

export default config;

Contributing & Development

This monorepo uses changesets to manage changes to all the config packages and for publishing packages. Check out the changesets repo for specific details. However, the basics are to run npx changeset when you are finished with a PR and it will prompt you to select a version increment (major, minor or patch) and to write some changenotes. Then when your PR is merged, a PR will be created to update the release notes and publish the new version of the package automatically. When we are ready to make the release we can merge that release PR.

References & More Reading

• Eslint config reference
• Prettier config reference
• Eslint plugins
  • eslint-plugin-svelte
  • eslint-plugin-prettier
  • typescript-eslint
  • eslint-plugin-mocha
• Prettier plugins
  • prettier-plugin-svelte