ESET Frontend Code Styleguide

A collection of ESLint and Stylelint configurations for consistent code quality across ESET's frontend projects.

Architecture

This styleguide follows a composable plugin architecture where you pick and choose the configurations you need:

Core Philosophy

• Standalone Plugins: Each plugin (React, Vue, Tailwind, etc.) is independent and focused
• Manual Composition: You explicitly compose the plugins your project needs
• Special Exception: eslint-base-typescript includes base config automatically (since most projects use TypeScript)
• Maximum Flexibility: Use any combination that fits your project

Plugin Composition Strategy

eslint-base (standalone - JS, Prettier, SonarJS, JSX-a11y)
    ↓ (only extended by)
eslint-base-typescript (base + TypeScript parser & rules)

Standalone Plugins (compose manually):
├── eslint-react (pure React + React Hooks)
├── eslint-vue (pure Vue 2)
├── eslint-vue3 (pure Vue 3)
├── eslint-html (pure HTML linting)
├── eslint-tailwind (pure Tailwind CSS)
├── eslint-storybook (pure Storybook)
└── eslint-nuxt (Nuxt's own comprehensive config)

Composition Examples

JavaScript Only:

import base from '@eset-gdd/code-styleguide-eslint-base'
export default base

TypeScript (most common):

// base-typescript already includes base config
import baseTypescript from '@eset-gdd/code-styleguide-eslint-base-typescript'
export default baseTypescript

React + TypeScript:

import baseTypescript from '@eset-gdd/code-styleguide-eslint-base-typescript'
import react from '@eset-gdd/code-styleguide-eslint-react'

export default [...baseTypescript, ...react]

Vue 3 + TypeScript + Tailwind:

import baseTypescript from '@eset-gdd/code-styleguide-eslint-base-typescript'
import vue3 from '@eset-gdd/code-styleguide-eslint-vue3'
import tailwind from '@eset-gdd/code-styleguide-eslint-tailwind'

export default [...baseTypescript, ...vue3, ...tailwind]

React + TypeScript + Storybook + Tailwind:

import baseTypescript from '@eset-gdd/code-styleguide-eslint-base-typescript'
import react from '@eset-gdd/code-styleguide-eslint-react'
import storybook from '@eset-gdd/code-styleguide-eslint-storybook'
import tailwind from '@eset-gdd/code-styleguide-eslint-tailwind'

export default [...baseTypescript, ...react, ...storybook, ...tailwind]

Tailwind CSS v4 Beta Support

For projects using Tailwind CSS v4 beta, use the dedicated beta configuration that includes the latest eslint-plugin-tailwindcss beta features:

React + TypeScript + Tailwind v4 Beta:

import baseTypescript from '@eset-gdd/code-styleguide-eslint-base-typescript'
import react from '@eset-gdd/code-styleguide-eslint-react'
import tailwindBeta from '@eset-gdd/code-styleguide-eslint-tailwind4beta'

export default [...baseTypescript, ...react, ...tailwindBeta]

Installation

Install the packages you need for your project. Remember to compose them in your eslint.config.js:

Common Installations

TypeScript Project (Most Common)

npm install --save-dev @eset-gdd/code-styleguide-eslint-base-typescript

React + TypeScript Project

npm install --save-dev @eset-gdd/code-styleguide-eslint-base-typescript @eset-gdd/code-styleguide-eslint-react

Vue 3 + TypeScript Project

npm install --save-dev @eset-gdd/code-styleguide-eslint-base-typescript @eset-gdd/code-styleguide-eslint-vue3

Individual Packages

Base Configuration

# Pure JavaScript base (includes Prettier, SonarJS, JSX-a11y)
npm install --save-dev @eset-gdd/code-styleguide-eslint-base

# TypeScript (includes base automatically)
npm install --save-dev @eset-gdd/code-styleguide-eslint-base-typescript

Framework Plugins

# React
npm install --save-dev @eset-gdd/code-styleguide-eslint-react

# Vue 2
npm install --save-dev @eset-gdd/code-styleguide-eslint-vue

# Vue 3
npm install --save-dev @eset-gdd/code-styleguide-eslint-vue3

# Nuxt
npm install --save-dev @eset-gdd/code-styleguide-eslint-nuxt

Utility Plugins

# HTML
npm install --save-dev @eset-gdd/code-styleguide-eslint-html

# Tailwind CSS
npm install --save-dev @eset-gdd/code-styleguide-eslint-tailwind

# Storybook
npm install --save-dev @eset-gdd/code-styleguide-eslint-storybook

CSS/SCSS Configurations

# Base CSS
npm install --save-dev @eset-gdd/code-styleguide-stylelint-base

# SCSS/Sass
npm install --save-dev @eset-gdd/code-styleguide-stylelint-scss

Available Configurations

ESLint Packages

| Package | Description | Extends Base? | |---------|-------------|---------------| | @eset-gdd/code-styleguide-eslint-base | Base JavaScript + Prettier + SonarJS + JSX-a11y | N/A (is the base) | | @eset-gdd/code-styleguide-eslint-base-typescript | Base + TypeScript parser & rules | ✅ Yes (automatically) | | @eset-gdd/code-styleguide-eslint-react | React + React Hooks rules | ❌ No (compose manually) | | @eset-gdd/code-styleguide-eslint-vue | Vue 2 rules | ❌ No (compose manually) | | @eset-gdd/code-styleguide-eslint-vue3 | Vue 3 rules | ❌ No (compose manually) | | @eset-gdd/code-styleguide-eslint-html | HTML linting | ❌ No (standalone) | | @eset-gdd/code-styleguide-eslint-storybook | Storybook rules | ❌ No (add-on) | | @eset-gdd/code-styleguide-eslint-tailwind | Tailwind CSS rules | ❌ No (add-on) | | @eset-gdd/code-styleguide-eslint-nuxt | Nuxt.js comprehensive config | ❌ No (has own base) |

Stylelint Packages

| Package | Description | |---------|-------------| | @eset-gdd/code-styleguide-stylelint-base | Base CSS/Stylelint rules | | @eset-gdd/code-styleguide-stylelint-scss | SCSS/Sass Stylelint rules |

Usage

All configurations are built for ESLint 9+ flat config format and use ES modules. They are designed to be composable - you manually combine the plugins your project needs.

Basic Setup

Create an eslint.config.js file (not .eslintrc.js) in your project root:

Base JavaScript Project

import base from "@eset-gdd/code-styleguide-eslint-base";

export default [
  ...base,
  // Add your custom rules here
  {
    rules: {
      // Your overrides
    },
  },
];

TypeScript Project

// base-typescript already includes base config
import baseTypescript from "@eset-gdd/code-styleguide-eslint-base-typescript";

export default [
  ...baseTypescript,
  {
    rules: {
      // Your overrides
    },
  },
];

React Project

import base from "@eset-gdd/code-styleguide-eslint-base";
import react from "@eset-gdd/code-styleguide-eslint-react";

export default [
  ...base,
  ...react,
  {
    rules: {
      // Your overrides
    },
  },
];

React + TypeScript Project

import baseTypescript from "@eset-gdd/code-styleguide-eslint-base-typescript";
import react from "@eset-gdd/code-styleguide-eslint-react";

export default [
  ...baseTypescript,  // includes base + TypeScript
  ...react,           // adds React rules
  {
    rules: {
      // Your overrides
    },
  },
];

Vue 3 Project

import base from "@eset-gdd/code-styleguide-eslint-base";
import vue3 from "@eset-gdd/code-styleguide-eslint-vue3";

export default [...base, ...vue3];

Vue 3 + TypeScript Project

import baseTypescript from "@eset-gdd/code-styleguide-eslint-base-typescript";
import vue3 from "@eset-gdd/code-styleguide-eslint-vue3";

export default [...baseTypescript, ...vue3];

Full-Featured React + TypeScript + Tailwind + Storybook

import baseTypescript from "@eset-gdd/code-styleguide-eslint-base-typescript";
import react from "@eset-gdd/code-styleguide-eslint-react";
import tailwind from "@eset-gdd/code-styleguide-eslint-tailwind";
import storybook from "@eset-gdd/code-styleguide-eslint-storybook";

export default [
  ...baseTypescript,
  ...react,
  ...tailwind,
  ...storybook,
  {
    rules: {
      // Your project-specific overrides
      "no-console": "warn",
    },
  },
];

}

} ];

### Adding Custom Rules and Overrides

You can always add your own rules or override existing ones by adding configuration objects to the array:

```javascript
import baseTypescript from "@eset-gdd/code-styleguide-eslint-base-typescript";
import react from "@eset-gdd/code-styleguide-eslint-react";

export default [
  ...baseTypescript,
  ...react,
  
  // Your custom configuration
  {
    rules: {
      // Override or add rules
      "no-console": "warn",
      "react/prop-types": "off",
    },
  },
  
  // Ignore specific files/folders
  {
    ignores: ["build/**", "dist/**", "*.config.js"],
  },
];

Stylelint Configuration

Create a stylelint.config.js file in your project root:

Base CSS

module.exports = {
  extends: ["@eset-gdd/code-styleguide-stylelint-base"],
};

SCSS/Sass

module.exports = {
  extends: ["@eset-gdd/code-styleguide-stylelint-scss"],
};

Editor Setup

Visual Studio Code

Required Extensions:

• ESLint
• Stylelint

Recommended Extensions:

• Prettier
• Vetur (for Vue 2)
• Volar (for Vue 3)

VS Code Settings

Add to your .vscode/settings.json:

{
  "editor.codeActionsOnSave": {
    "source.fixAll": false,
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "eslint.validate": [
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact",
    "vue",
    "html"
  ],
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false
}

PhpStorm/WebStorm

ESLint Setup:

1. Go to Settings → Languages & Frameworks → JavaScript → Code Quality Tools → ESLint
2. Enable ESLint
3. Set the configuration file path to your .eslintrc.js
4. Enable "Run eslint --fix on save"

Stylelint Setup:

1. Go to Settings → Languages & Frameworks → Style Sheets → Stylelint
2. Enable Stylelint
3. Set the configuration file path to your stylelint.config.js

Package Scripts

Add these scripts to your package.json:

{
  "scripts": {
    "lint": "eslint . --ext .js,.ts,.jsx,.tsx,.vue",
    "lint:fix": "eslint . --ext .js,.ts,.jsx,.tsx,.vue --fix",
    "lint:css": "stylelint \"**/*.{css,scss,vue}\"",
    "lint:css:fix": "stylelint \"**/*.{css,scss,vue}\" --fix"
  }
}

Peer Dependencies

Each configuration package requires specific peer dependencies. Make sure to install them:

ESLint (Required for all configs)

npm install --save-dev eslint@^9.37.0

Prettier (Included in base configs)

npm install --save-dev prettier@^3.6.2

TypeScript Projects

npm install --save-dev typescript@>=4.0.0

React Projects

npm install --save-dev react@>=16.8.0

Vue Projects

# For Vue 2
npm install --save-dev vue@^2.6.0

# For Vue 3  
npm install --save-dev vue@^3.0.0

Stylelint Configurations

npm install --save-dev stylelint@^14.10.0

Complete Installation Examples

Here are complete installation commands for common project setups:

React + TypeScript + Tailwind

npm install --save-dev \
  eslint@^9.37.0 \
  prettier@^3.6.2 \
  typescript@>=4.0.0 \
  react@>=16.8.0 \
  @eset-gdd/code-styleguide-eslint-base-typescript \
  @eset-gdd/code-styleguide-eslint-react \
  @eset-gdd/code-styleguide-eslint-tailwind

Then in eslint.config.js:

import baseTypescript from "@eset-gdd/code-styleguide-eslint-base-typescript";
import react from "@eset-gdd/code-styleguide-eslint-react";
import tailwind from "@eset-gdd/code-styleguide-eslint-tailwind";

export default [...baseTypescript, ...react, ...tailwind];

Vue 3 + TypeScript

npm install --save-dev \
  eslint@^9.37.0 \
  prettier@^3.6.2 \
  typescript@>=4.0.0 \
  vue@^3.0.0 \
  @eset-gdd/code-styleguide-eslint-base-typescript \
  @eset-gdd/code-styleguide-eslint-vue3

Then in eslint.config.js:

import baseTypescript from "@eset-gdd/code-styleguide-eslint-base-typescript";
import vue3 from "@eset-gdd/code-styleguide-eslint-vue3";

export default [...baseTypescript, ...vue3];

Nuxt 3

npm install --save-dev \
  eslint@^9.37.0 \
  vue@^3.0.0 \
  @eset-gdd/code-styleguide-eslint-nuxt

Then in eslint.config.js:

import nuxt from "@eset-gdd/code-styleguide-eslint-nuxt";

export default nuxt;