📦 SETUP • ⚙️ CONFIGURATION • 🛰️ FEATURES • 💻 VSCODE
|
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. |
About
Features
Requirements
Installation
Usage
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"
}
}
BACK TO TOP
Copyright © All rights reserved, developed by LuisdaByte and
