@beuluis/eslint-config
Advanced tools
Shared eslint config
·
Report Bug
·
Request Feature
·
Shared eslint config for my projects. Utilizing ESLint.
npm i -D @beuluis/eslint-config
Install ESlint
npm i -D eslint
Create a .eslintrc file and pick one of the configs and paste it in.
touch .eslintrc
Tweak the overrides to your used project structure. Also feel free to remove unused extends.
Install @beuluis/prettier-config
:warning: Since this pack does not assume any particularly structure. It is necessary to configure the glob patterns according to your project structure.
{
"extends": ["@beuluis/eslint-config"],
"root": true,
"overrides": [
{
"extends": ["@beuluis/eslint-config/json"],
"files": "*.json"
},
{
"extends": ["@beuluis/eslint-config/yaml"],
"files": "*.{yml,yaml}"
}
]
}
{
"extends": ["@beuluis/eslint-config"],
"root": true,
"overrides": [
{
"extends": ["@beuluis/eslint-config/browser"],
"files": "*.js"
},
{
"extends": ["@beuluis/eslint-config/json"],
"files": "*.json"
},
{
"extends": ["@beuluis/eslint-config/yaml"],
"files": "*.{yml,yaml}"
}
]
}
{
"extends": ["@beuluis/eslint-config"],
"root": true,
"overrides": [
{
"extends": ["@beuluis/eslint-config/node"],
"files": "*.js"
},
{
"extends": ["@beuluis/eslint-config/json"],
"files": "*.json"
},
{
"extends": ["@beuluis/eslint-config/yaml"],
"files": "*.{yml,yaml}"
},
{
"extends": ["@beuluis/eslint-config/jest"],
"files": [
"*.?(component-){spec,test}.js",
"**/{__mocks__,__tests__}/**/*.js",
"**/jest.setup.js"
]
}
]
}
{
"extends": ["@beuluis/eslint-config"],
"root": true,
"overrides": [
{
"extends": ["@beuluis/eslint-config/node", "@beuluis/eslint-config/module"],
"files": "*.js"
},
{
"extends": ["@beuluis/eslint-config/json"],
"files": "*.json"
},
{
"extends": ["@beuluis/eslint-config/yaml"],
"files": "*.{yml,yaml}"
},
{
"extends": ["@beuluis/eslint-config/jest"],
"files": [
"*.?(component-){spec,test}.js",
"**/{__mocks__,__tests__}/**/*.js",
"**/jest.setup.js"
]
}
]
}
{
"extends": ["@beuluis/eslint-config"],
"root": true,
"overrides": [
{
"extends": ["@beuluis/eslint-config/typescript"],
"files": "*.ts",
"parserOptions": {
"project": "tsconfig.json"
}
},
{
"extends": ["@beuluis/eslint-config/json"],
"files": "*.json"
},
{
"extends": ["@beuluis/eslint-config/yaml"],
"files": "*.{yml,yaml}"
},
{
"extends": ["@beuluis/eslint-config/jest"],
"files": [
"*.?(component-){spec,test}.ts",
"**/{__mocks__,__tests__}/**/*.ts",
"**/jest.setup.ts"
]
}
]
}
{
"extends": ["@beuluis/eslint-config"],
"root": true,
"overrides": [
{
"extends": [
"@beuluis/eslint-config/typescript",
"@beuluis/eslint-config/browser"
],
"files": "*.ts",
"parserOptions": {
"project": "tsconfig.json"
}
},
{
"extends": ["@beuluis/eslint-config/json"],
"files": "*.json"
},
{
"extends": ["@beuluis/eslint-config/yaml"],
"files": "*.{yml,yaml}"
},
{
"extends": ["@beuluis/eslint-config/jest"],
"files": [
"*.?(component-){spec,test}.ts",
"**/{__mocks__,__tests__}/**/*.ts",
"**/jest.setup.ts"
]
}
]
}
{
"extends": ["@beuluis/eslint-config"],
"root": true,
"overrides": [
{
"extends": [
"@beuluis/eslint-config/node",
"@beuluis/eslint-config/browser",
"@beuluis/eslint-config/i18next"
],
"files": "*.{js,jsx}"
},
{
"extends": ["@beuluis/eslint-config/react"],
"files": "*.jsx"
},
{
"extends": ["@beuluis/eslint-config/json"],
"files": "*.json"
},
{
"extends": ["@beuluis/eslint-config/yaml"],
"files": "*.{yml,yaml}"
},
{
"extends": ["@beuluis/eslint-config/jest"],
"files": [
"*.?(component-){spec,test}.js",
"**/{__mocks__,__tests__}/**/*.js",
"**/jest.setup.js"
]
}
]
}
{
"extends": ["@beuluis/eslint-config"],
"root": true,
"overrides": [
{
"extends": [
"@beuluis/eslint-config/typescript",
"@beuluis/eslint-config/browser",
"@beuluis/eslint-config/i18next"
],
"files": "*.{ts,tsx}",
"parserOptions": {
"project": "tsconfig.json"
}
},
{
"extends": ["@beuluis/eslint-config/react"],
"files": "*.tsx"
},
{
"extends": ["@beuluis/eslint-config/json"],
"files": "*.json"
},
{
"extends": ["@beuluis/eslint-config/yaml"],
"files": "*.{yml,yaml}"
},
{
"extends": ["@beuluis/eslint-config/jest"],
"files": [
"*.?(component-){spec,test}.{ts,tsx}",
"**/{__mocks__,__tests__}/**/*.{ts,tsx}",
"**/jest.setup.ts"
]
}
]
}
Your .eslintrc file can be extended and overridden as normal.
However, one point is worth mentioning. You don't need to install plugins already listed in the dependencies. (See Tips and tricks for more info)
This means you only need to install plugins or configs if they are not provided by this pack.
typescript config vs. typescript-no-type-checking configI decided to do a opt out approach in favor of type safety. The typescript has the same rules enabled as the typescript-no-type-checking but enables some more rules that need deeper type checking. In general this is a good thing thats why it is enabled in the default typescript config but for some larger projects or projects with complex types this can be a performance issue.
If you experience such performance issues you have two points to consider:
typescript-no-type-checking config instead of the typescript configThis version has prettier now build in and ignores prettier config files.
So make sure that prettier is run only for files eslint can not parse if it should run at all.
root = true
[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = false
[*.json]
indent_size = 2
[*.{yaml,yml}]
indent_size = 2
It is not used due to its usage of the outdated eslint-plugin-node pack. See this issue on GitHub.
It is replaced with eslint-plugin-n instead.
I make use of @rushstack/eslint-patch/modern-module-resolution to load all the packages defined in the package.json. In doing so the consuming package doesn't have to install them as peerDependency.
All the rules get separated into fitting configurations. They can be later used alongside the base one.
So if you have a new technology/lib/etc. That need extra rules like react or jest? -> create a new configuration in configurations.
See Migrating to version 2.X.X.
Configurations need to be reexported on root level to be found by ESlint.
I use the subfolder configurations to define the configurations as JSON and make use of the eslintrc schema for validation.
.
├── ...
├── configurations # All configurations to be used
│ ├── eslintrc.json # Base configuration. Should apply for all languages to be tested by eslint
│ ├── {{name}}.json # Specialized configuration for languages, tools, libs, etc.
│ └── ...
├── eslintrc.js # Base configuration export. Also loads https://www.npmjs.com/package/@rushstack/eslint-patch
├── {{name}}.js # Specialized configuration export. Can also be used to log warnings for deprecation or throw errors for other infos about the used configuration.
└── ...
Inside the files I try to keep this structure:
{
"first_all_rules_that_are_turned_off": "off",
"first_all_rules_that_are_configured_with_warn": "warn",
"first_all_rules_that_are_configured_with_error": "error"
}
Rules should use the string value instead of the number to ensure easy reading:
"off" instead of 0
"warn" instead of 1
"error" instead of 2
You see a error like 'module' is not defined or other node global variables missing?
Add a node override for .js (often still needed in TS projects for config files or so):
{
"overrides": [
{
"extends": ["@beuluis/eslint-config/node"],
"files": ["*.js"]
}
]
}
One of the most confusing part is the override mechanism of eslint.
Some useful links for that are extending-configuration-files and how-do-overrides-work
Make sure to read the plugin documentations carefully. Most plugins recommended configs already enable all you need.
Example: The prettier recommended-configuration already expand to
{
"extends": ["prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error",
"arrow-body-style": "off",
"prefer-arrow-callback": "off"
}
}
so no need to redefine it.
Same goes for extended configs.
Example: canonical already enables the import plugin. So no need to redefine it. You can just use it
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
git checkout -b feature/AmazingFeature)git commit -m 'Add some AmazingFeature')git push origin feature/AmazingFeature)Luis Beu - me@luisbeu.de
FAQs
Shared eslint config for my projects
We found that @beuluis/eslint-config demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.
Security News
Research
Socket researchers found a malicious Maven package impersonating the legitimate ‘XZ for Java’ library, introducing a backdoor for remote code execution.