Unitario ESLint Configuration

The package provides base ESLint configurations for Unitario. It follows a set of recommended style guidelines for writing code that is more performant and easier to reason about.

This package use ESLint to run Prettier.

What it does

• Lints JavaScript or TypeScript based on latest standards
• Follows a mostly reasonable approach by Airbnb
• Fixes common code errors and style issues

Installation

1. Install dependencies

Development

npm install @unitario/eslint-config --save-dev

Peer

In case peer dependencies has not already been installed, make sure to install these too:

npm install eslint prettier --save-dev

Optional

• jest – Test framework. Configuration files has already loaded in this package.
• ramda – Functional utility library. Configuration files has already loaded in this package.
• lint-staged – Used to enable allow ESLint to run on staged files.
• husky – Used to enable allow ESLint to run on staged files.

Use them if you project requires it. If so then configuration files has already been bundled in this package. Just make sure that they have been installed in your project.

2. Create config file

Create an .eslintrc file at the root of your project with this content:

{
  "extends": "@unitario"
}

Rules

Extends

This configuration package follows a specific list of configuration rules. Each configuration overwrites the previous configuration in the case of conflicting rules.

1. Airbnb ESLint Base Config – Base ruleset for JavaScript files
2. TypeScript ESLint Recommended Config – Base ruleset for TypeScript files
3. Jest ESLint Recommended Config – Base ruleset for Jest spec-files
4. Prettier ESLint Config – Turns off all rules that are unnecessary or might conflict with Prettier

Enforced Rules

This configuration package makes a couple of opinionated style rules which overwrites any rules provided in the extends array.

• Print Width. Line wrap at 160 characters (default is 80).
• Tab Width. Tab with is 2 spaces (default is 4).
• Semicolons. Never print semicolons in end of statements (default is always).

Overriding Rules

If you'd like to override any rules, you can add the rules to your .eslintrc file.

{
  "extends": "@unitario",
  "rules": {
    "no-console": "off"
  }
}

Code Editor Integrations

Visual Studio Code

1. Install the ESLint Extension
2. Reload Visual Studio Code
3. Modify your settings.json file

// Format on save with Prettier
"editor.formatOnSave": true,
"eslint.alwaysShowStatus": true,
// Tell the ESLint plugin to run on save
"eslint.autoFixOnSave": true,
// An array of language identifiers specify the files to be validated
"eslint.validate": [
  { "language": "html", "autoFix": true },
  { "language": "json", "autoFix": true },
  { "language": "javascript", "autoFix": true },
  { "language": "typescript", "autoFix": true }
],
// Turn off Prettier extension for js and ts files since we're handling that with ESLint
"prettier.disableLanguages": ["javascript", "typescript"],

Pre-Commit Hook

You may want ESLint to automatically fix your errors on commit, you can use lint-staged with husky, which manages git hooks.

1. Install dependencies
   • npm install lint-staged husky --save-dev
2. Update package.json:

{
  "lint-staged": {
    "*.{js,ts,json}": ["eslint --fix", "git add"]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}