@griddo/eslint-plugin-griddo

Custom ESLint rules for Griddo projects.

Installation

yarn add -D @griddo/eslint-plugin-griddo

Usage (ESLint 8+)

Option 1: Recommended Configuration (Recommended)

Add the recommended configuration to your .eslintrc:

module.exports = {
  extends: [
    // ... other extends
    "plugin:@griddo/griddo/recommended",
  ],
};

Option 2: Manual Configuration

Add the plugin and rules manually to your .eslintrc:

module.exports = {
  plugins: ["@griddo/eslint-plugin-griddo"],
  rules: {
    "@griddo/griddo/no-browser-apis": "error",
  },
};

Usage (ESLint 9+)

ESLint 9 uses the new flat config format. Create an eslint.config.js file:

Option 1: Recommended Configuration (Recommended)

import griddoPlugin from "@griddo/eslint-plugin-griddo";

export default [
  // ... other configs
  griddoPlugin.configs["flat/recommended"],
];

Option 2: Manual Configuration

import griddoPlugin from "@griddo/eslint-plugin-griddo";

export default [
  {
    plugins: {
      "@griddo/griddo": griddoPlugin,
    },
    rules: {
      "@griddo/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:

Although it's not strictly necessary to check typeof window !== "undefined" inside a useEffect (since it only runs on the client), it's considered good practice and is recommended for robustness and portability.

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>;
}