npm package: @onewelcome/eslint-config-shared-codestyle
Description: A package for an ESLint + Prettier configuration that can be shared across different projects in OneWelcome.
Author: OneWelcome
Latest version: 11.0.0

[![npm version](https://badge.fury.io/js/@onewelcome%2Feslint-config-shared-codestyle.svg)](https://badge.fury.io/js/@onewelcome%2Feslint-config-shared-codestyle)

# [@onewelcome/eslint-config-shared-codestyle](https://github.com/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](https://eslint.org/docs/user-guide/configuring/) for linting.
* [prettier](https://prettier.io/docs/en/index.html) for code style/formatting.
* [husky](https://github.com/typicode/husky) for pre-commit hooks to enforce the linting and formatting.
* [lint-staged](https://github.com/okonet/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](https://prettier.io/docs/en/precommit.html) 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"
    },
    
}
```