Grid Linter

Eslint / Prettier Setup for Grid's Projects 📦

This package provides a shared ESLint configuration for Grid's projects. It ensures consistent code quality and formatting across all projects by enforcing company-standard linting rules and integrating Prettier for automatic code formatting.

Table of Contents

• Installation
  • Configuring ESLint
  • Scripts
• Enable TypeScript Lint Setup
• Enable Imports Lint Setup
• Enable React Lint Setup
• Enable Prettier Integration
• Adding Linter For Pre-Commit Setup

Installation

All configurations are bundled in the package @thesgpgridapp/grid-linter. Follow the steps below:

# If you are using yarn
yarn add --dev @thesgpgridapp/grid-linter

# If you are using npm
npm i --save-dev @thesgpgridapp/grid-linter

Configuring ESLint

1. Create a eslint.config.mjs file in your project's root directory.
2. Extend your config with grid-linter utils config:

import path from "node:path";
import {fileURLToPath} from "node:url";
import js from "@eslint/js";
import {FlatCompat} from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: js.configs.recommended,
  allConfig: js.configs.all
});

export default [
  // use this setting to tell ESLint that your code is running in a browser environment
  // {
  //   languageOptions: {
  //     ecmaVersion: 2022,
  //     sourceType: 'module',
  //     globals: {
  //       ...globals.browser,
  //       ...globals.node,
  //       myCustomGlobal: 'readonly',
  //     },
  //   },
  // },
  
  // default necessary setting
  ...compat.extends(
  "./node_modules/@thesgpgridapp/grid-linter",
)];

Scripts

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

{
  "scripts": {
    "lint": "eslint .",             // or you can specify explicit files "lint": "eslint \"**/*.ts\""
    "lint:fix": "eslint . --fix"    // or you can specify explicit files "lint": "eslint --fix \"**/*.ts\""
  }
}

Typescript Lint Project Setup

Extend your tsconfig

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

for browser env projects

{
  "extends": "./node_modules/@thesgpgridapp/grid-linter/tsconfig-client.json"
}

for node env projects

{
  "extends": "./node_modules/@thesgpgridapp/grid-linter/tsconfig-client.json"
}

Add TypeScript ESLint config

In your eslint.config.mjs file, add the TypeScript ESLint rule:

export default [...compat.extends(
  ...
  "./node_modules/@thesgpgridapp/grid-linter/typescript",
)];

Imports Lint Project Setup

In your eslint.config.mjs file, add the Import ESLint rule:

export default [...compat.extends(
  ...
  "./node_modules/@thesgpgridapp/grid-linter/imports",
)];

React Lint Project Setup

For React.js development, add the React ESLint rule:

export default [...compat.extends(
  ...
  "./node_modules/@thesgpgridapp/grid-linter/react",
)];

Prettier Integration

For Node prettier formatter, add the Prettier rule:

export default [...compat.extends(
  ...
  "./node_modules/@thesgpgridapp/grid-linter/prettier",
)];

For React.js formatter, add the React Prettier rule:

export default [...compat.extends(
  ...
  "./node_modules/@thesgpgridapp/grid-linter/react-prettier",
)];

Linter Pre Commit Setup

This step is added to ensure code quality and consistency on each pre-commit

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'