# eslint-config-dia

> [ESLint][eslint] > [shareable config][eslint-shareable-config] for most sort
> of projects at [DIA][dia-website]

[![Commitizen friendly][commitizen-badge]][commitizen]
[![Conventional Commits][conventional-commits-badge]][conventional-commits]
[![Code of Conduct][coc-badge]][coc]
[![semantic-release][semantic-release-badge]][semantic-release]
[![MIT License][license-badge]][license]

[![npm latest version][latest-version-badge]][package]
[![npm next version][next-version-badge]][package]

## Table of Contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#markdown-header-installation)
- [Usage](#markdown-header-usage)
- [Notes](#markdown-header-notes)
- [Provided configurations](#markdown-header-provided-configurations)
  - [Optional configurations](#markdown-header-optional-configurations)
  - [Things to know](#markdown-header-things-to-know)
  - [ESLint Dependencies](#markdown-header-eslint-dependencies)
- [Example Implementations](#markdown-header-example-implementations)
  - [Salesforce Platform Development with LWC and Aura](#markdown-header-salesforce-platform-development-with-lwc-and-aura)
  - [Node.js Package / App with Jest](#markdown-header-nodejs-package-app-with-jest)
  - [Appcelerator Titanium Mobile App](#markdown-header-appcelerator-titanium-mobile-app)
- [License](#markdown-header-license)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

```shell
npm install --save-dev @interaktiv/eslint-config-dia
```

## Usage

Once the `@interaktiv/eslint-config-dia` package is installed, you can use it by
specifying `@interaktiv/dia` in the [`extends`][eslint-extends] section of your
[ESLint configuration][eslint-config].

```js
{
  "extends": "@interaktiv/dia",
  "rules": {
    // Additional, per-project rules...
  }
}
```

## Notes

Please note that most of the stylistic rules are disabled cause we are using
[Prettier][] to format our code. Therefore the
[eslint-config-prettier][eslint-config-prettier] plugin is included.

Our [Prettier][] shareable config can be found here
[@interaktiv/prettier-config-dia][prettier-config-dia].

## Provided configurations

The default config actually is composed of several configurations and you can
use those individually. These are the configs it's using:

- [possible-errors.js](./possible-errors.js)
- [best-practices.js](./best-practices.js)
- [stylistic.js](./stylistic.js)
- [es6](./es6/index.js)
- [import](./import/index.js)
- [promise](./promise/index.js)
- [security](./security/index.js)
- [json](./json/index.js)
- [eslint-comments](./eslint-comments.js)

You can use each of these configs yourself. Also, the `es6`, `import`,
`promise`, `security` configs each have a `possible-errors.js`,
`best-practices.js` (and `stylistic.js`) which they are composed of as well.

But not only these, others too, checkout out the source.

### Optional configurations

Other configs are exposed also. You can use them standalone:

```js
{
  "extends": "@interaktiv/dia/<config-name>"
}
```

or in combination with the base config (**recommended**):

```js
{
  "extends": [
    "@interaktiv/dia",
    "@interaktiv/dia/<config-name>"
  ]
}
```

for example

```js
{
  "extends": [
    "@interaktiv/dia",
    "@interaktiv/dia/titanium",
    "@interaktiv/dia/jest",
  ]
}
```

- [aura](./aura/index.js) - Salesforce [Lightning Aura Components][aura]
- [babel](./babel/index.js) - [Babel][] JavaScript compiler for next generation
  JavaScript
- [jest](./jest/index.js) - [jest][] testing framework
- [json](./json/index.js) - [JSON][] files
- [jsx-a11y](./jsx-a11y/index.js) - Rules regarding accessibility with JSX
- [lwc](./lwc/index.js) - [Salesforce Lightning Web Components][lwc]
  - [lwc/compat-performance](./lwc/compat-performance.js) - Older browsers like
    IE11 run LWC in compatibility mode. For more information about browser
    performance, please refer to Supported Browsers in the Lightning Web
    Components Developer Guide.
- [salesforce](./salesforce/index.js) - A merge of the `lwc` and `aura`configs
  to support Javascript Development on the [Salesforce][] Platform. Where the
  `aura` config is only applied to `**/aura/**/*.js` and the `lwc` config to
  `**/lwc/**/*.js` files.

  If you need to apply the `aura` or `lwc` configs to all files e.g. in a sub
  dir eslint config file, just extend from them not from the `salesforce`
  config.

  ```js
  {
    "extends": [
      "@interaktiv/dia/aura",
      "@interaktiv/dia/lwc"
    ]
  }
  ```

- [titanium](./titanium/index.js) - A merge of the `classic` and `alloy` configs
  - [titanium/alloy](./titanium/alloy.js) - Copied and extended from
    [eslint-config-axway Env Alloy][eslint-config-axway-alloy], the `titanium`
    config is merged into this one
  - [titanium/classic](./titanium/classic.js) - Copied and extended from
    [eslint-config-axway Env Titanium][eslint-config-axway-titanium]
- [react](./react/index.js) - [React][] JavaScript library
- [react-native](./react-native/index.js) - Combination of the
  [react config](./react/index.js) and some [React Native][] specific rules
- [webpack](./webpack/index.js) - For the import plugin to work with [webpack][]
  overloaded imports/requires ([eslint-plugin-import][] and
  [eslint-import-resolver-webpack][])

### Things to know

- All plugins needed for rules used by these configs are dependencies of this
  module so you don't have to install anything on your own.
- Almost all of the stylistic rules are disabled cause we are using
  [prettier][prettier] to format our code. To ensure this the
  [eslint-config-prettier][eslint-config-prettier] is included too.

  Our [Prettier][] shareable config can be found here
  [@interaktiv/prettier-config-dia][prettier-config-dia].

- The [lwc](./lwc/index.js) and [aura](./aura/index.js) configs disable some
  [import](./import/index.js) config rules cause there is no lwc module resolver
  package available at the moment of time.

### ESLint Dependencies

- [eslint-config-prettier][eslint-config-prettier]
- [eslint-import-resolver-webpack][]
- [eslint-plugin-alloy][eslint-plugin-alloy]
- [eslint-plugin-aura][]
- [eslint-plugin-babel][eslint-plugin-babel]
- [eslint-plugin-compat][]
- [eslint-plugin-eslint-comments][eslint-plugin-eslint-comments]
- [eslint-plugin-import][eslint-plugin-import]
- [eslint-plugin-jest][eslint-plugin-jest]
- [eslint-plugin-json][eslint-plugin-json]
- [eslint-plugin-jsx-a11y][eslint-plugin-jsx-a11y]
- [eslint-plugin-lwc][eslint-plugin-lwc]
- [eslint-plugin-promise][eslint-plugin-promise]
- [eslint-plugin-react][eslint-plugin-react]
- [eslint-plugin-react-hooks][eslint-plugin-react-hooks]
- [eslint-plugin-react-native][eslint-plugin-react-native]
- [eslint-plugin-security][eslint-plugin-security]

## Example Implementations

### Salesforce Platform Development with LWC and Aura

```js
{
  extends: [
    '@interaktiv/dia',
    '@interaktiv/dia/jest',
    '@interaktiv/dia/salesforce'
  ],
  // Custom rules if needed
  rules: {}
}
```

### Node.js Package / App with Jest

```js
{
  extends: [
    '@interaktiv/dia',
    '@interaktiv/dia/jest'
  ],
  // Custom rules if needed
  rules: {}
}
```

### Appcelerator Titanium Mobile App

```js
{
  extends: [
    '@interaktiv/dia',
    '@interaktiv/dia/titanium'
  ],
  // Custom rules if needed
  rules: {}
}
```

## License

[MIT][license] Copyright © 2019-present [die.interaktiven GmbH & Co.
KG][dia-website]

[aura]:
  https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/intro_framework.htm/
[babel]: https://babeljs.io
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg
[coc]: ./other/CODE_OF_CONDUCT.md
[commitizen]: http://commitizen.github.io/cz-cli
[commitizen-badge]:
  https://img.shields.io/badge/commitizen-friendly-brightgreen.svg
[contributing]: ./CONTRIBUTING.md
[conventional-commits]: https://conventionalcommits.org
[conventional-commits-badge]:
  https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg
[dia-website]: https://die-interaktiven.de
[downloads-badge]:
  https://img.shields.io/npm/dw/@interaktiv/eslint-config-dia.svg
[downloads-total-badge]:
  https://img.shields.io/npm/dt/@interaktiv/eslint-config-dia.svg
[eslint]: https://eslint.org
[eslint-config]: http://eslint.org/docs/user-guide/configuring
[eslint-config-axway-alloy]:
  https://github.com/appcelerator/eslint-config-axway/blob/master/env-alloy.js
[eslint-config-axway-titanium]:
  https://github.com/appcelerator/eslint-config-axway/blob/master/env-titanium.js
[eslint-config-prettier]: https://www.npmjs.com/package/eslint-config-prettier
[eslint-extends]:
  http://eslint.org/docs/user-guide/configuring#extending-configuration-files
[eslint-import-resolver-webpack]:
  https://www.npmjs.com/package/eslint-import-resolver-webpack
[eslint-plugin-alloy]: https://www.npmjs.com/package/eslint-plugin-alloy
[eslint-plugin-aura]:
  https://www.npmjs.com/package/@salesforce/eslint-plugin-aura/
[eslint-plugin-babel]: https://www.npmjs.com/package/eslint-plugin-babel
[eslint-plugin-compat]: https://www.npmjs.com/package/eslint-plugin-compat/
[eslint-plugin-eslint-comments]:
  https://www.npmjs.com/package/eslint-plugin-eslint-comments
[eslint-plugin-disable]: https://www.npmsjs.com/package/eslint-plugin-disable
[eslint-plugin-import]: https://www.npmjs.com/package/eslint-plugin-import
[eslint-plugin-jest]: https://www.npmjs.com/package/eslint-plugin-jest
[eslint-plugin-json]: https://www.npmjs.com/package/eslint-plugin-json
[eslint-plugin-jsx-a11y]: https://www.npmjs.com/package/eslint-plugin-jsx-a11y
[eslint-plugin-lwc]: https://www.npmjs.com/package/@lwc/eslint-plugin-lwc
[eslint-plugin-promise]: https://www.npmjs.com/package/eslint-plugin-promise
[eslint-plugin-react]: https://www.npmjs.com/package/eslint-plugin-react
[eslint-plugin-react-hooks]:
  https://www.npmjs.com/package/eslint-plugin-react-hooks
[eslint-plugin-react-native]:
  https://www.npmjs.com/package/eslint-plugin-react-native
[eslint-plugin-react-native-a11y]:
  https://github.com/FormidableLabs/eslint-plugin-react-native-a11y
[eslint-plugin-security]: https://www.npmjs.com/package/eslint-plugin-security
[eslint-shareable-config]:
  https://eslint.org/docs/developer-guide/shareable-configs.html
[issues]: https://bitbucket.org/dieinteraktiven/eslint-config-dia/issues
[jest]: https://jestjs.io
[json]: https://www.json.org/
[latest-version-badge]:
  https://img.shields.io/npm/v/@interaktiv/eslint-config-dia/latest.svg
[license]: https://opensource.org/licenses/MIT
[license-badge]: https://img.shields.io/npm/l/@interaktiv/eslint-config-dia.svg
[lwc]:
  https://developer.salesforce.com/docs/component-library/documentation/lwc/
[next-version-badge]:
  https://img.shields.io/npm/v/@interaktiv/eslint-config-dia/next.svg
[package]: https://npmjs.com/package/@interaktiv/eslint-config-dia
[prettier-config-dia]: https://npmjs.com/package/@interaktiv/prettier-config-dia
[prettier]: https://prettier.io
[react]: https://reactjs.org
[react native]: https://facebook.github.io/react-native
[salesforce]: https://www.salesforce.com/
[semantic-release]: https://github.com/semantic-release/semantic-release
[semantic-release-badge]:
  https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
[version-badge]: https://img.shields.io/npm/v/@interaktiv/eslint-config-dia.svg
[webpack]: https://webpack.js.org