@gramypomagamy/eslint-config

The ESLint config used in GramyPomagamy (GSPS) TypeScript projects.

Install

Run:

npm i -D @gramypomagamy/eslint-config

Base config

This package includes 3 base configs:

• one for raw TypeScript (exported as tsConfig)
• one for React (exported as reactConfig)
• one for Vue (exported as vueConfig)

Add a file called eslint.config.mjs to your project root, and add this code there:

import { tsConfig } from '@gramypomagamy/eslint-config';

export default tsConfig;

These configs can be combined if needed, like this:

import { tsConfig, reactConfig } from '@gramypomagamy/eslint-config';

export default [...tsConfig, ...reactConfig];

Config creator

The config creator allows you to create specific rules with custom paths to the files that would be linted and a custom path to a tsconfig.json file.

Example usage for React:

import { ConfigCreator } from "@gramypomagamy/eslint-config";

const tsParser = ConfigCreator.createTsParser({
  tsconfigFilePaths: [
    "src/browser/tsconfig.json",
    "src/extension/tsconfig.json",
  ],
});

const browserConfig = ConfigCreator.createReactRules({
  folderPath: "src/browser",
});

const browserTsConfig = ConfigCreator.createTsRules({
  folderPath: "src/browser",
});

const extensionConfig = ConfigCreator.createTsRules({
  folderPath: "src/extension",
});

export default [
  ...tsParser,
  ...browserConfig,
  ...browserTsConfig,
  ...extensionConfig,
];

Example usage for Vue:

import { ConfigCreator } from "@gramypomagamy/eslint-config";

const tsParser = ConfigCreator.createTsParser({
  tsconfigFilePaths: [
    "src/browser/tsconfig.json",
    "src/extension/tsconfig.json",
  ],
});

const browserConfig = ConfigCreator.createVueRules({
  folderPath: "src/browser",
  tsconfigFilePaths: [
    "src/browser/tsconfig.json",
  ],
});

const browserTsConfig = ConfigCreator.createTsRules({
  folderPath: "src/browser",
});

const extensionConfig = ConfigCreator.createTsRules({
  folderPath: "src/extension",
});

export default [
  ...tsParser,
  ...browserConfig,
  ...browserTsConfig,
  ...extensionConfig,
];

IDE Setup

Visual Studio Code

Install the ESLint Extension, then press Ctrl+Shift+P (Cmd+Shift+P on macOS), open Preferences: Open User Settings (JSON) and add this to the file:

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

This enable fix on save in VSCode for ESLint.

JetBrains WebStorm

ESLint is enabled by default in WebStorm, the only recommended tweak is enabling "fix on save" in ESLint settings.

Zed

ESLint is installed by default in Zed. In the settings go to Editor, and turn on Format on Save.