@aliheym/eslint-config
This package is inspired by Anthony's ESLint config preset and Airbnb's ESLint config preset.
[!IMPORTANT] This config is intended to work only with ESM projects. Your project needs to be ESM too.
Usage
Install
npm i --save-dev eslint @aliheym/eslint-configCreate config file
Create a file named eslint.config.js in the root of your project and add the following:
import aliheym from '@aliheym/eslint-config';
export default aliheym();[!TIP] ESLint only detects
eslint.config.jsas the flag config entry.
Add script for package.json
For example:
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
}
}Editor Integration
VS Code
There is a plugin called VS Code ESLint extension. Install it.
Add the following to your .vscode/settings.json:
{
// Enable the ESlint flat config support
"eslint.experimental.useFlatConfig": true,
// Disable the default formatter, use eslint instead
"prettier.enable": false,
"editor.formatOnSave": false,
// Auto fix
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.organizeImports": "never"
},
// Silent the stylistic rules in the editor, but still auto fix them
"eslint.rules.customizations": [
{ "rule": "@stylistic/*", "severity": "off" },
{ "rule": "*-indent", "severity": "off" },
{ "rule": "*-spacing", "severity": "off" },
{ "rule": "*-spaces", "severity": "off" },
{ "rule": "*-order", "severity": "off" },
{ "rule": "*-dangle", "severity": "off" },
{ "rule": "*-newline", "severity": "off" },
{ "rule": "*quotes", "severity": "off" },
{ "rule": "*semi", "severity": "off" }
],
// Enable eslint for all supported languages
"eslint.validate": [
"javascript",
"typescript",
"json",
"jsonc",
"yaml",
"toml"
]
}Customization
Normally, you only need to import the @aliheym/eslint-config.
import aliheym from '@aliheym/eslint-config';
export default aliheym();However, you can configure each integration, for example:
import aliheym from '@aliheym/eslint-config';
export default aliheym({
// Disable some files and directories
ignores: [
'**/.temporary',
],
// Customize the stylistic rules
stylistic: {
indent: 4,
quotes: 'double',
},
// Enable Node.js linting
node: {
overrides: {
// ...
}
},
// Disable YAML support
yaml: false,
// Override Typescript rules
typescript: {
overrides: {
rules: {
'@typescript-eslint/no-explicit-any': 'off',
},
}
},
});[!TIP] The function has TS types, so you can check them to see all the available options.
You can also pass any number of custom config overrides, for example:
import aliheym from '@aliheym/eslint-config';
export default aliheym(
{
// Configures the base config
},
// From the second arguments they are ESLint configs
{
files: ['**/*.ts'],
rules: {
'@stylistic/semi': ['error', 'never'],
},
},
{
// Without `files`, they are general rules for all files
rules: {},
},
);Optional Rules
This config also provides some optional plugins/rules for extended usage.
eslint-plugin-perfectionist
eslint-plugin-perfectionist allows you to sorted object keys, imports, etc, with auto-fix.
The plugin is installed but no rules are enabled by default.
It's recommended to opt-in on each file individually using configuration comments.
/* eslint perfectionist/sort-objects: "error" */
const objectWantedToSort = {
a: 2,
b: 1,
c: 3,
};
/* eslint perfectionist/sort-objects: "off" */Type Aware Rules
You can optionally enable the type aware rules by passing tsconfigPath to the typescript config:
import aliheym from '@aliheym/eslint-config';
export default aliheym({
typescript: {
tsconfigPath: 'tsconfig.json',
},
});Lint Staged
You can use lint-staged to lint and auto-fix before every commit. Install it:
npm i -D lint-stagedAnd then change your package.json:
{
"lint-staged": {
"*": "eslint --fix"
}
}You can combine it with git hooks. For more details, see the husky or simple-git-hooks.
ESlint Config Viewer
There are a useful tool, that you can use to view what rules are enabled in your project and apply them to what files - eslint-flat-config-viewer.
Go to your project root (the same directory where your eslint.config.js is) and run:
npx eslint-flat-config-viewer