# @wildix/eslint-config-style-guide

> ESLint and Prettier Config

Latest version **1.2.3** (published 2024-07-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @wildix/eslint-config-style-guide
pnpm add @wildix/eslint-config-style-guide
yarn add @wildix/eslint-config-style-guide
bun add @wildix/eslint-config-style-guide
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.3 |
| Published | 2024-07-12 |
| First published | 2023-11-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=18 |
| Dependencies | 17 |
| Unpacked size | 40.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Wildix |
| Maintainers | gennadiy.ganchev, mike.lozinsky, dmytro.renkas, alex_dubovskiy, vladimir.gorobets.wildix, sergey.dartchuk, marina.tsymbal, xbeesdcoder, vruban.wildix, vitaliy.negrichuk |
| Keywords | javascript, ecmascript, typescript, eslint, config, prettier |

## Links

- npm: https://www.npmjs.com/package/@wildix/eslint-config-style-guide
- Repository: git@git.wildix.com:sdk/sdk-code-style
- Homepage: https://git.wildix.com/sdk/sdk-code-style/-/blob/main/README.md
- npm.io page: https://npm.io/package/@wildix/eslint-config-style-guide

## Dependencies (17)

- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) ^7.34.1
- [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) ^2.29.1
- [eslint-plugin-lodash](https://npm.io/package/eslint-plugin-lodash.md) ^7.4.0
- [eslint-plugin-promise](https://npm.io/package/eslint-plugin-promise.md) ^6.1.1
- [eslint-config-prettier](https://npm.io/package/eslint-config-prettier.md) ^9.1.0
- [eslint-plugin-jsx-a11y](https://npm.io/package/eslint-plugin-jsx-a11y.md) ^6.8.0
- [eslint-plugin-prettier](https://npm.io/package/eslint-plugin-prettier.md) ^5.1.3
- [@rushstack/eslint-patch](https://npm.io/package/@rushstack/eslint-patch.md) ^1.10.2
- [eslint-plugin-storybook](https://npm.io/package/eslint-plugin-storybook.md) ^0.8.0
- [@stylistic/eslint-plugin](https://npm.io/package/@stylistic/eslint-plugin.md) ^1.7.2
- [@typescript-eslint/parser](https://npm.io/package/@typescript-eslint/parser.md) ^6.14.0
- [eslint-plugin-react-hooks](https://npm.io/package/eslint-plugin-react-hooks.md) ^4.6.1
- [eslint-plugin-react-native](https://npm.io/package/eslint-plugin-react-native.md) ^4.1.0
- [eslint-plugin-unused-imports](https://npm.io/package/eslint-plugin-unused-imports.md) ^3.1.0
- [eslint-plugin-testing-library](https://npm.io/package/eslint-plugin-testing-library.md) ^6.2.2
- [@typescript-eslint/eslint-plugin](https://npm.io/package/@typescript-eslint/eslint-plugin.md) ^6.14.0
- [eslint-plugin-simple-import-sort](https://npm.io/package/eslint-plugin-simple-import-sort.md) ^12.1.0

## Alternatives

- [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) — 2.9M weekly downloads
- [eslint-config-expo](https://npm.io/package/eslint-config-expo.md) — 1.5M weekly downloads
- [@matter/protocol](https://npm.io/package/@matter/protocol.md) — 63.5K weekly downloads
- [@eventcatalog/linter](https://npm.io/package/@eventcatalog/linter.md) — 24.8K weekly downloads
- [@inrupt/eslint-config-base](https://npm.io/package/@inrupt/eslint-config-base.md) — 4.5K weekly downloads

## Recent versions

- 1.2.3 (latest) — 2024-07-12
- 1.2.0-alpha.10 (next) — 2024-05-27
- 1.2.2 — 2024-06-05
- 1.2.2-alpha.0 — 2024-06-05
- 1.2.1 — 2024-06-02
- 1.2.0 — 2024-05-31
- 1.2.0-alpha.9 — 2024-05-27
- 1.2.0-alpha.8 — 2024-05-26
- 1.2.0-alpha.7 — 2024-05-26
- 1.2.0-alpha.4 — 2024-05-23
- 1.2.0-alpha.3 — 2024-05-23
- 1.2.0-alpha.2 — 2024-05-16
- 1.2.0-alpha.1 — 2024-05-16
- 1.1.21 — 2024-04-26
- 1.1.10 — 2024-02-27
- … 5 more at https://npm.io/package/@wildix/eslint-config-style-guide/versions

## README

# The Wildix Code Style Guide

## Eslint / Prettier Setup for @wildix 📦

This repository contains ESLint and Prettier configurations tailored for projects at Wildix. Utilize these settings to ensure code consistency and adherence to the latest standards endorsed by the Wildix development team.

## Table of Contents

- [What it does](#what-it-does)
- [Installation](#installation)
  - [Configuring ESLint](#configuring-eslint)
  - [Scripts](#scripts)
- [TypeScript Setup](#if-you-are-using-typescript)
- [Imports Sorting](#if-you-want-to-enable-imports-sorting)
- [React.js Specific Configurations](#if-you-are-using-reactjs)
- [Prettier Integration](#if-you-want-to-use-prettier)
- [VS Code Integration](#if-you-are-using-vs-code)

## What it does

- Lints JavaScript / TypeScript based on the latest standards accepted by Wildix development team
- Multiple configs available: `react`, `hooks`, `native`, and more
- Shared `tsconfig.json`

## Installation

All configurations are bundled in the package `@wildix/eslint-config-style-guide`. Follow the steps below:

```sh
# If you are using yarn
yarn add --dev @wildix/eslint-config-style-guide

# If you are using npm
npm i --save-dev @wildix/eslint-config-style-guide
```

### Configuring ESLint

1. Create a `.eslintrc` file in your project's root directory.
2. Extend your config with the minimal base of the Wildix Utils config:

```json
{
  "extends": [
    "@wildix/eslint-config-style-guide"
  ]
}
```

### Scripts

Add the following scripts to your `package.json` to lint and/or fix your code:

```json
{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}
```

## If you are using TypeScript

### Extend your tsconfig

Extend your existing `tsconfig.json` file with the provided TypeScript configuration:

for browser env projects
```json
{
  "extends": "@wildix/eslint-config-style-guide/tsconfig.browser.json"
}
```
// for node env projects
```json
{
  "extends": "@wildix/eslint-config-style-guide/tsconfig.json"
}
```

### Add TypeScript ESLint config

In your `.eslintrc` file, add the TypeScript ESLint rules:

```js
{
  extends: [
    '@wildix/eslint-config-style-guide',
    '@wildix/eslint-config-style-guide/typescript'
  ],
  parserOptions: {
    project: true,
    tsconfigRootDir: __dirname
  },
  root: true
}
```

## If you want to enable imports sorting

Include import sorting based on your alias from your `jsonfig.json` or `tsconfig.json` file:

```js
{
  extends: [
    '@wildix/eslint-config-style-guide',
    '@wildix/eslint-config-style-guide/imports'
  ]
}
```

## If you are using React.js

For React.js development (without Next.js), add these additional rules:

```js
{
  extends: [
    '@wildix/eslint-config-style-guide',
    '@wildix/eslint-config-style-guide/react',
    '@wildix/eslint-config-style-guide/react-hooks'
  ]
}
```

## If you want to use Prettier

Ensure Prettier config is added at the end of your `extends` array:

```js
{
  extends: [
    '@wildix/eslint-config-style-guide',
    '@wildix/eslint-config-style-guide/imports',
    '@wildix/eslint-config-style-guide/react',
    '@wildix/eslint-config-style-guide/react-hooks',
    '@wildix/eslint-config-style-guide/prettier' // ensure it's the last one
  ],
}
```

## If you are using VS Code

After configuration, install the [ESLint package](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint). Set up VS Code settings by creating a `.vscode` folder in your project's root and adding a `settings.json` file:

```json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
```
## Husky

### Installation

Install Husky as a development dependency in your project:

```sh
yarn add -D husky lint-staged
```

## Enable Git Hooks

Run the following command to enable Git hooks:

```sh
npx husky install
```

To automatically enable Git hooks after install, edit your `package.json`:

```sh
npm pkg set scripts.prepare="husky install"
```

## Configure a Pre-commit Hook

Create a pre-commit hook that will run when you commit. First, create a `.husky` directory:

```sh
mkdir .husky
```

Then, add a pre-commit hook using the following command:

```sh
npx husky add .husky/pre-commit 'yarn lint-staged'
```

Now, your pre-commit hook is configured to run `lint-staged` before each commit, ensuring code quality and consistency.

Adjust the commands based on your project structure and linting needs.

---
_Source: https://npm.io/package/@wildix/eslint-config-style-guide · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._