Skip to main content

TL;DR

Code Quality

The Nebula Labs codebase uses a few tools to enforce code quality and commit conventions.

Prettier​

Install Prettier.

Ensure there is a .prettierrc.js file at the root of the project with this configuration:

module.exports = {
  printWidth: 80,
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'all',
  useTabs: false,
};
npm i -D prettier

Easy way to set up Prettier to run on commit:

npx mrm lint-staged

Now update the lint-staged configuration in the project's package.json:

{
  // ...
  "lint-staged": {
    "*.{tsx,ts,js}": [
      "eslint --cache --fix .",
      "prettier --write {pages,components,modules}/**/*.{tsx,ts,js}"
    ]
  }
}

ESLint​

Install the following as devDependencies:

  • eslint
  • eslint-config-prettier
  • eslint-plugin-react
  • eslint-plugin-react-hooks
  • eslint-plugin-jsx-a11y
  • eslint-plugin-simple-import-sort

For the magic incantation:

npm i -D eslint eslint-config-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-simple-import-sort

Commitlint​

npm i -D @commitlint/config-conventional @commitlint/cli

Use this for the commitlint.config.js config:

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'subject-case': [2, 'always', ['sentence-case', 'start-case']],
  },
};

Conventional Changelog​

Conventional Changelog automatically generates changelogs based on the Conventional Commits spec.

We'll primarily use these for generating releases for packages, and for more user-facing functionality, we'll write our own changelogs based off the automatically generated ones.

npx commitizen init cz-conventional-changelog --save-dev --save-exact

Commitizen​

https://github.com/commitizen/cz-cli

In the project's package.json, the config look like this:

{
  // ...
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog",
      "disableSubjectLowerCase": true,
      "maxHeaderWidth": 72,
      "maxLineWidth": 80,
      "defaultType": "chore"
    }
  }
}