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
• Installation
  • Configuring ESLint
  • Scripts
• TypeScript Setup
• Imports Sorting
• React.js Specific Configurations
• Prettier Integration
• VS Code Integration

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:

# 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:

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

Scripts

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

{
  "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

{
  "extends": "@wildix/eslint-config-style-guide/tsconfig.browser.json"
}

// for node env projects

{
  "extends": "@wildix/eslint-config-style-guide/tsconfig.json"
}

Add TypeScript ESLint config

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

{
  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:

{
  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:

{
  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:

{
  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. Set up VS Code settings by creating a .vscode folder in your project's root and adding a settings.json file:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Husky

Installation

Install Husky as a development dependency in your project:

yarn add -D husky lint-staged

Enable Git Hooks

Run the following command to enable Git hooks:

npx husky install

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

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:

mkdir .husky

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

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.