DIFFUSE-DEV Style Guide

Introduction

This repository is the home of __DIFFUSE style guide, which includes configs for popular linting and styling tools.

The following configs are available, and are designed to be used together.

• Prettier
• ESLint
• TypeScript
• Commitlint

Installation

# If you use pnpm
pnpm i --save-dev @diffuse-lab/style-guide

Prettier

Note: Prettier is a peer-dependency of this package, and should be installed at the root of your project.

See: https://prettier.io/docs/en/install.html

To use the shared Prettier config, set the following in package.json.

{
  "prettier": "@diffuse-lab/style-guide/prettier"
}

ESLint

Note: ESLint is a peer-dependency of this package, and should be installed at the root of your project.

See: https://eslint.org/docs/user-guide/getting-started#installation-and-usage

This ESLint config is designed to be composable.

The following base configs are available. You can use one or both of these configs, but they should always be first in extends:

• @diffuse-lab/style-guide/eslint/browser
• @diffuse-lab/style-guide/eslint/node

For example, use the shared ESLint config(s) in a Next.js project, set the following in .eslintrc.js.

module.exports = {
  extends: [
    require.resolve("@diffuse-lab/style-guide/eslint/browser"),
    require.resolve("@diffuse-lab/style-guide/eslint/react"),
    require.resolve("@diffuse-lab/style-guide/eslint/next"),
  ],
};

Commitlint

Note: Commitlint is a peer-dependency of this package, and should be installed at the root of your project.

See: https://commitlint.js.org/guides/getting-started.html

To use the shared commitlint config, set the following in commitlint.config.js.

module.exports = {
  extends: ["@diffuse-lab/style-guide/commitlint/config-conventional"],
};