Universal Eslint Configuration

  📦 SETUP • ⚙️ CONFIGURATION • 🛰️ FEATURES • 💻 VSCODE

                   

About

This GitHub repository offers a powerful ESLint configuration to elevate your coding experience. Proactively identify and fix potential errors before they cause issues, preventing runtime failures and streamlining your development workflow. The configuration enforces consistent coding style and best practices, making your codebase easier to understand, modify, and collaborate on in the long run. It's built to be adaptable, allowing you to fine-tune the rules to your project's specific needs.

Table of content

• About
• Features
• Requirements
• Installation
• Usage
• Configuration
• Recommended VsCode configuration

Features

• Eslint - Linter core engine.
• Astro - Awesome Astro components linting.
• Html - Tidy and consistent HTML files.
• Import - Manage imports effectively.
• Perfectionist - Automated sorting and strict quality.
• Stylistic - Beautiful Allman-style formatting.
• Typescript - Strong type safety for TS 6.0.
• Unicorn - 100+ advanced modern rules.

Requirements

• node >= 22.17.0
• eslint >= 10.10.0
• bun >= 1.1.0

Installation

Bun

bun i -D eslint-config-universal-code

Npm

npm i -D eslint-config-elegant-coding

Pnpm

pnpm i -D eslint-config-elegant-coding

Yarn

yarn i -D eslint-config-elegant-coding

Usage

Create an eslint.config.js file in your root and add the following:

  import eslintConfig from 'eslint-config-universal-code';

  export default eslintConfig();

Configuration

Extra settings that can be added.

  import eslintConfig from 'eslint-config-universal-code';

  export default eslintConfig({
    // This line enables ESLint rules for YAML files.
    yml: true,

    // This line enables ESLint rules for HTML files.
    html: true,

    // This line enables ESLint rules for JSON files.
    json: true,

    // This line enables ESLint rules for Astro components.
    astro: true,

    // This line enables ESLint rules for Astro perfectionist, to sort imports.
    perfectionist: true,

    // This line enables ESLint rules for regex.
    regex: true,

    // This line enable unicorn rules.
    unicorn: true,

    // This line enables ESLint rules for tailwind classes.
    tailwind: true,

    // This line enables ESLint rules for stylistic concerns in your code.
    stylistic: true,

    // This line enables ESLint rules for TypeScript files.
    typescript: true,

    // This line specifies a file to ignore from linting.
    // In this case, 'postcss.config.cjs' will not be processed by ESLint.
    ignore: [ 'postcss.config.cjs' ],
  });

To add or override plugins and options, you can pass a second attribute to the function with an array like a normal configuration of eslint:

export default elegantCoding({
  stylistic: true,
  typescript: true
}, [
  {
    rules:
    {
      'style/indent': 'off'
    }
  },
  {
    plugin: 'customPlugin',
    rules:
    {
      // Extra rules...
    }
  }
]);

The list of the used plugins and the names are here:

New name	Original	Source
import	import-x	eslint-plugin-import-x
unicorn	unicorn	eslint-plugin-unicorn
perfectionist	perfectionist	eslint-plugin-perfectionist
node	n	eslint-plugin-n
regex	regexp	eslint-plugin-regexp
style	@stylistic	@stylistic/eslint-plugin
ts	@typescript-eslint	@typescript-eslint/eslint-plugin
html	@html-eslint	@html-eslint/eslint-plugin
json	jsonc	eslint-plugin-jsonc
yml	yml	eslint-plugin-yml
astro	astro	eslint-plugin-astro
tailwind	tailwindcss	eslint-plugin-tailwindcss

Recommended VsCode Configuration

{
  "editor.formatOnSave": false,
  "editor.suggest.showWords": false,
  "eslint.run": "onSave",
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.addMissingImports": "explicit",
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },

  // Eslint files to validate
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "astro",
    "typescript",
    "typescriptreact",
    "html",
    "json",
    "jsonc",
    "json5",
    "yaml",
    "github-actions-workflow"
  ],

  // Silent Eslint only style options
  "eslint.rules.customizations": [
    { "rule": "style/*", "severity": "off", "fixable": true },
    { "rule": "tailwind/*", "severity": "off", "fixable": true },
    { "rule": "perfectionist/*", "severity": "off", "fixable": true },
  ],

  // Configure Eslint formatter as linter for VsCode
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[astro]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[html]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[json]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[yaml]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  }
}

  BACK TO TOP

  Copyright © All rights reserved,
  developed by LuisdaByte and