@onewelcome/eslint-config-shared-codestyle

@onewelcome/eslint-config-shared-codestyle

This is the reusable eslint/prettier/husky config to use at OneWelcome. The original config was aimed at typescript development so if you're using pure JS you might need to adjust some rules.

General info

This project contains config and instructions for 4 different tools that all work together to provide an easy and optimized developer experience.

• eslint for linting.
• prettier for code style/formatting.
• husky for pre-commit hooks to enforce the linting and formatting.
• lint-staged for easily managing the husky config and enabling it on git staged files.

Installation

1. General setup

Install as a development dependency:

npm i @onewelcome/eslint-config-shared-codestyle -D

Install the peerDependencies relevant for JS.

npm i -D eslint-plugin-unused-imports eslint prettier eslint-config-prettier eslint-plugin-prettier

2. (optional) Typescript-specific setup

Install the same peerDependencies used for JS development + typescript specific packages:

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-unused-imports eslint prettier eslint-config-prettier eslint-plugin-prettier

3. Final setup

Finish of with the following command, which will install both husky and lint-staged and will add some default configuration to your package.json (see this link for more info)

npx mrm@2 lint-staged

Usage

Add a eslint.config.js file to the root of your project:

import sharedConfig from "@onewelcome/eslint-config-shared-codestyle";

export default [
  // Inherit everything from the shared codestyle
  ...sharedConfig,

  // TypeScript-specific overrides
  {
    languageOptions: {
      parserOptions: {
        project: "./tsconfig.eslint.json"
      }
    },
    rules: {
      "@typescript-eslint/no-explicit-any": 0,
      "@typescript-eslint/explicit-member-accessibility": 0,
      "@typescript-eslint/no-parameter-properties": 0,
      "@typescript-eslint/indent": 0,
      "@typescript-eslint/no-object-literal-type-assertion": 0,
      "@typescript-eslint/interface-name-prefix": 0
    }
  },
];

Add a .prettierrc.js file to the root of your project:

module.exports = {
  ...require("@onewelcome/eslint-config-shared-codestyle/.prettierrc")
  // You can overwrite the global config here...
};

Next, add a lint script to your package.json like this (mind the quotes around the regex and the extension. Either .js or .ts):

{
    scripts: {
        "lint": "eslint --fix '?(src|test|features)/**/*.ts'",
        ...
    }
}

The --fix will auto-fix 'unused imports' along with other minor issues.

Next, add a format script to your package.json like this (again mind the quotes around the regex and the extension. Either .js or .ts):

{
    scripts: {
        "format": "prettier --ignore-path .gitignore --write './(src|test|features)/**/*.ts'",
    }
}

Running this script will fix formatting for all your source and test files according to your prettier-config.

Customizing rules

You can configure rules in your project if you don't want to go with these defaults. For consistency though this is not recommended. If patterns emerge to enable/disable a certain rule it might be a better idea to just add it to this shared library so all projects follow them.

{
    "rules": {
        "@typescript-eslint/interface-name-prefix": "off",
        "@typescript-eslint/triple-slash-reference": "off"
    }
}

Typescript tsConfig Files

By default, this configuration will use the tsconfig.json file at the root of your project. This can possibly lead to errors for .ts files in your test, features and other folders. This is easily fixed by creating a tsconfig.eslint.json file like this:

{
    "extends": "./tsconfig.json",
    "include": [
        "src",
        "features",
        "test"
    ]
}

Then, point eslint to this file in your eslint.config.js file:

{
    "parserOptions": {
        "project": "./tsconfig.eslint.json"
    },
    
}