npm package: @nuskin/mobile-eslint-config
Description: Nuskin's React/React Native ESLint config.
Author: Norman Jarvis
Latest version: 0.1.2

# Nuskin's eslint config

Shared ESLint configs for Node, Web, and React Native projects.

## Installation

```sh
yarn add --dev @nuskin/mobile-eslint-config
```

You will also need to install `eslint`, `prettier`, `@typescript-eslint/eslint-plugin`, and `@typescript-eslint/parser`:

```sh
yarn add --dev eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser
```

## Usage

Import this config into your own ESLint configuration using the `extends` option. ESLint checks both package.json and .eslintrc.\* files for its configuration:

### package.json

```js
{
  "eslintConfig": {
    // Choose from:
    // @nuskin/mobile-eslint-config/native, @nuskin/mobile-eslint-config/node, @nuskin/mobile-eslint-config/web
    "extends": "@nuskin/mobile-eslint-config"
  }
}
```

### .eslintrc.js

```js
module.exports = {
  extends: '@nuskin/mobile-eslint-config'
};
```

## Customizing Prettier

If you would like to customize the Prettier settings, create a file named `.prettierrc` in your project directory. An example of Prettier configuration file:

```json
{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "jsxBracketSameLine": true,
  "trailingComma": "es5"
}
```

### .prettierrc.js

If you want a basic prettier configuration, create a file named `.prettierrc.js`:

```js
module.exports = require('@nuskin/mobile-eslint-config/prettier');
```

Read more about [configuring `prettier`](https://prettier.io/docs/en/configuration.html) and [all of the available options](https://prettier.io/docs/en/options.html).

## Support for Different Platforms

There are several configs for different platforms. They are:

- `@nuskin/mobile-eslint-config`: the basic config for JavaScript projects for which there isn't a more specific config
- `@nuskin/mobile-eslint-config/native`: the config for React Native projects, including Expo projects, with support for React and JSX
- `@nuskin/mobile-eslint-config/web`: the config for code that runs in web browsers, with support for React and JSX
- `@nuskin/mobile-eslint-config/node`: the config for code that runs in Node

## Optional Additional TypeScript Typed Linting

@nuskin/mobile-eslint-config also provides optional additional config for typescript-eslint rules that make use of the parsed type information. Note that this may increase the time it takes to run lint for large projects. More information can be found at https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/TYPED_LINTING.md

To enable the additional config, the following changes to your config are required:

### .eslintrc.js

```diff
module.exports = {
  extends: [
    '@nuskin/mobile-eslint-config',
+   '@nuskin/mobile-eslint-config/shared/typescript-analysis',
  ],
+ overrides: [
+   {
+     files: [
+       '*.ts',
+       '*.tsx',
+       '*.d.ts'
+     ],
+     parserOptions: {
+       project: './tsconfig.json'
+     },
+   },
+ ],
};
```

More info on parserOptions.project can be found at https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/parser#parseroptionsproject

## Philosophy

This config is designed to mark severe problems (ex: syntax errors) as errors and stylistic issues as warnings. This lets your team apply policies like, "make sure a commit has no errors but ignore warnings if the commit didn't introduce them."

It's also designed to be a more lenient config for teams who are stronger at decision-making and have a culture of osmotically learning coding guidelines and benefit more from flexibility than rigid rules.

force rebuild 12