@onewelcome/javascript-shared-codestyle

@onewelcome/javascript-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 piure JS you might need to adjust some values.

Installation

General

Install as a development dependency:

npm i @onewelcome/javascript-shared-codestyle -D

Javascript projects

Install the peerDependencies relevant for JS.

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

Typescript projects

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

Final step (all projects)

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 .eslintrc file to the root of your project:

{
    "extends": "@onewelcome/javascript-shared-codestyle"
}

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

module.exports = {
  ...require("@onewelcome/javascript-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.

(Optional step) 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.

{
    "extends": "@onewelcome/javascript-shared-codestyle",
    "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 .eslintrc file:

{
    "parserOptions": {
        "project": "./tsconfig.eslint.json"
    },
    "extends": "@onewelcome/javascript-shared-codestyle"
}