@aliheym/eslint-config v1.0.6
@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-config
Create 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.js
as 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-staged
And 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