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

• 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.

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

bun i -D eslint-config-universal-code

npm i -D eslint-config-elegant-coding

pnpm i -D eslint-config-elegant-coding

yarn i -D eslint-config-elegant-coding

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

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

  export default eslintConfig();

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 |

{
  "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"
  }
}