@hiscovega/eslint-plugin-griddo

Custom ESLint rules for Griddo projects.

Installation

npm install --save-dev @hiscovega/eslint-plugin-griddo

Usage

Add the plugin to your .eslintrc:

{
  "plugins": ["@hiscovega/eslint-plugin-griddo"],
  "extends": ["plugin:@hiscovega/eslint-plugin-griddo/recommended"]
}

Or configure individual rules manually:

{
  "plugins": ["@hiscovega/eslint-plugin-griddo"],
  "rules": {
    "@hiscovega/eslint-plugin-griddo/no-browser-apis": "error"
  }
}

Rules

no-browser-apis

Prevents usage of browser APIs that are not available during SSR (Server-Side Rendering). This helps prevent runtime errors in SSR environments like Gatsby where browser APIs are not available during the build process.

❌ Examples of incorrect code:

// Direct usage of browser APIs
const title = document.title;
window.scrollTo(0, 0);
const data = localStorage.getItem("key");
const userAgent = navigator.userAgent;

✅ Examples of correct code:

import { useEffect } from "react";

function Component() {
  useEffect(() => {
    // Check if we're in the browser
    if (typeof window !== "undefined") {
      window.scrollTo(0, 0);
    }
  }, []);

  return <div>Hello</div>;
}

Affected APIs

The rule checks for usage of common browser APIs including:

• document,
• window,
• localStorage,
• sessionStorage,
• navigator,
• location,
• history,
• screen,
• alert,
• confirm,
• prompt,
• fetch,
• XMLHttpRequest,
• WebSocket,
• URL,
• URLSearchParams,
• URLUtils,
• performance,