@aerisweather/eslint-plugin

@aerisweather/eslint-plugin

This package provides AerisWeather's .eslintrc and custom ESLint plugins as an extensible shared configuration.

Dependencies

Our ESLint rules build on top of other existing configurations. The following third-party dependencies are required in your project to use this plugin: eslint, eslint-config-airbnb, eslint-plugin-import, and eslint-plugin-unicorn.

eslint-config-airbnb

A widely-used set of reasonable Javascript best practices and syntax formatting rules from AirBnB to use with ESLint. See their Javascript style guide for more details.

eslint-plugin-import

An ESLint plugin that intends to support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names.

eslint-plugin-unicorn

Adds some additional rules not included in ESLint that are useful for adhering to a predefined set of coding best practices.

@typescript-eslint

Includes the parser and plugin required for ESLint to support Typescript.

Custom AerisWeather Rules

This plugin also includes some custom rules for our own projects and development. Many of these rules are borrowed from the eslint-plugin-putout package to be used without requiring the complete putout dependency.

Usage

• Install the package:

  npm install --dev @aerisweather/eslint-plugin
  

  yarn add -D @aerisweather/eslint-plugin
  

• Add plugin:@aerisweather/recommended to the extends property of your project's ESLint configuration:

  extends: ['plugin:@aerisweather/recommended']
  

• Add @aerisweather to the plugins property of your project's ESLint configuration:

  plugins: ['@aerisweather']
  

You can then lint your project's code using one of the following commands, where the latter will automatically fix issues when possible. This assumes your project's source code is located within the src directory:

eslint 'src/**/*.{js,ts,tsx}'

eslint --fix 'src/**/*.{js,ts,tsx}'

Commit Hooks

To ensure your code is properly linted and any issues are addressed before committing, you will want to set up a commit hook to run ESLint on your code.

For this we recommend using Husky, so install the required dependencies:

npm install --save-dev husky lint-staged

yarn add -D husky lint-staged

And add the following to your package.json:

"husky": {
    "pre-commit": "lint-staged",
    "pre-push": "yarn lint"
},
"lint-staged": {
    "**/*.{js,ts,tsx}": [
        "eslint --fix",
        "git add"
    ]
}

Now whenever you commit any change and that commit contains a Javascript or Typescript file, Husky will check if those files meet all the ESLint requirements or not. If not, it won't let you commit unless you fix those issues.

Setting Up Your IDE

You will typically want your IDE to lint and fix any issues when possible whenever you save changes to a file within your project. Set up one of the available ESLint plugins for your particular IDE.

What About Prettier?

Oftentimes you will see ESLint and Prettier used together such that Prettier is responsible for code formatting and ESLint is responsible for code smells and errors only. However, the two often don't work well together and can result in conflicting rules and results which makes for a miserable development experience.

Also, Prettier is a highly-opinionated tool and intentionally lacks the ability to override rules you don't necessarily agree with. This sounds great, but their rules favor better handling of git changes and conflicts and code reviews over proper structure and readability. This means it often forces your code into formats and structures that make it hard to read or follow from a developer perspective. It's also clear that the maintainers of Prettier feel strongly about not expanding the options and that plugin support isn't coming anytime soon.

ESLint is our preferred linter and formatter, and we don't recommend using both. ESLint is considerably more flexible and can automatically fix issues for you similar to Prettier, so it's better to just stick with it instead of trying to combine the two.