@didor/style-guide v0.4.0

Didor Development Style Guide

This package provides a unified configuration for ESLint, Prettier, Stylelint, and TypeScript, ensuring consistency and quality across all your projects at Didor.

Note: This style guide is based on the Vercel Development Style Guide

Installation

To install the package, run:

npm install --save-dev @didor/style-guide

ESLint

The configuration is composable. First, you need to extend one or both of the following configurations:

• @didor/style-guide/eslint/browser for browser projects.
• @didor/style-guide/eslint/node for Node projects.

Then, you can extend with the following configurations if needed:

• @didor/style-guide/eslint/vue for Vue projects.
• @didor/style-guide/eslint/nuxt for Nuxt projects (requires @didor/style-guide/eslint/vue before).
• @didor/style-guide/eslint/vitest for Vite tests.
• @didor/style-guide/eslint/typescript for TypeScript projects (requires typescript to be installed and additional configuration).

Create or update .eslintrc.js in your project root and extend the configurations you need:

Note: ESLint is a peer dependency, so you need to install at the root of your project, ESLint Installation.

Note: You'll need to use require.resolve to provide ESLint with absolute paths, due to an issue around ESLint config resolution (see eslint/eslint#9188).

Note: The latest version of ESLint, version 9, is not yet supported in this style guide because it is very recent and other necessary libraries have not yet been updated, causing errors. Therefore, it is recommended to use the latest previous version, which is v8.57.0.

module.exports = {
  extends: [
    require.resolve('@didor/style-guide/eslint/browser'),
    require.resolve('@didor/style-guide/eslint/vue'),
    require.resolve('@didor/style-guide/eslint/typescript')
  ]
}

Configuring ESLint for TypeScript

Some of the rules enabled in the TypeScript config require additional type information, you'll need to provide the path to your tsconfig.json.

For more information, see: https://typescript-eslint.io/docs/linting/type-linting

const { resolve } = require('node:path')

const project = resolve(__dirname, 'tsconfig.json')

module.exports = {
  root: true,
  extends: [
    require.resolve('@vercel/style-guide/eslint/node'),
    require.resolve('@vercel/style-guide/eslint/typescript')
  ],
  parserOptions: {
    project
  },
  settings: {
    'import/resolver': {
      typescript: {
        project
      }
    }
  }
}

Prettier

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

Note: Prettier is a peer dependency, so you need to install at the root of your project, Prettier Installation.

{
  "prettier": "@didor/style-guide/prettier"
}

Stylelint

Create or update .stylelintrc.js in your project root:

Note: Stylelint is a peer dependency, so you need to install at the root of your project, Stylelint Installation.

module.exports = {
  extends: ['@didor/style-guide/stylelint']
}

TypeScript

This style guide provides multiple TypeScript configs. These configs correlate to the LTS Node.js versions, providing the appropriate lib, module, target, and moduleResolution settings for each version. The following configs are available:

• @didor/style-guide/typescript/node18 for Node.js 18.
• @didor/style-guide/typescript/node20 for Node.js 20.

Ensure you have a tsconfig.json in your project root. You can extend the provided configuration if necessary:

{
  "extends": "@didor/style-guide/typescript"
}

Scripts

Add the following scripts to your package.json to lint and format your code:

{
  "scripts": {
    "lint:js": "eslint 'src/**/*.{js,ts,vue}'",
    "lint:css": "stylelint 'src/**/*.{scss,css}'",
    "format": "prettier --write 'src/**/*.{js,ts,vue,scss,css}'"
  }
}

Updating

To check for outdated dependencies, run:

npx npm-check-updates

This lists all outdated dependencies. It's important to read the release notes for each dependency to understand the changes.

Update dependencies running the interactive mode. It's recommended to update them one by one to avoid breaking changes.:

npx npm-check-updates --interactive

Contributing

We welcome contributions to improve and expand this style guide. Please follow these steps to contribute:

1. Fork the repository.
2. Create a new branch (git checkout -b feature-branch).
3. Make your changes.
4. Commit your changes, this repository follows the Conventional Commits format, so make sure to follow it when committing your changes. The scope should be included most of the time, and all allowed scopes are listed in the commitlint.config.js file. (git commit -m 'type(scope?): message').
5. Push to the branch (git push origin feature-branch).
6. Create a new Pull Request.