@fmit/eslint-config v2.2.0
@fmit/eslint-config
This package extends from @antfu/eslint-config, with some customizations.
- Single quotes, semi
- Auto fix for formatting (aimed to be used standalone without Prettier)
- Sorted imports, dangling commas
- Reasonable defaults, best practices, only one line of config
- Designed to work with TypeScript, JSX, Vue out-of-box
- Lints also for json, yaml, toml, markdown
- Opinionated, but very customizable
- ESLint Flat config, compose easily!
- Using ESLint Stylistic
- Respects
.gitignore
by default - Optional React, Nuxt support
- Optional formatters support for CSS, HTML, etc.
- Style principle: Minimal for reading, stable for diff, consistent
Usage
Install
pnpm i -D eslint @fmit/eslint-config
Create config file
With "type": "module"
in package.json
(recommended):
// eslint.config.js
import fmit from '@fmit/eslint-config';
export default fmit();
With CJS:
// eslint.config.js
const fmit = require('@fmit/eslint-config').default;
module.exports = fmit();
!TIP ESLint only detects
eslint.config.js
as the flat config entry, meaning you need to puttype: module
in yourpackage.json
or you have to use CJS ineslint.config.js
. If you want explicit extension like.mjs
or.cjs
, or eveneslint.config.ts
, you can installeslint-ts-patch
to fix it.The
.eslintignore
file no longer works in Flat config, see customization for more details.
Add script for package.json
For example:
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
}
}
Optional config
We provide some optional configs for specific use cases, that we don't include their dependencies by default.
Formatters
Use external formatters to format files that ESLint cannot handle yet (.css, .html, etc). Powered by eslint-plugin-format
.
// eslint.config.js
import fmit from '@fmit/eslint-config';
export default fmit({
formatters: {
/**
* Format CSS, LESS, SCSS files, also the `<style>` blocks in Vue
* By default uses Prettier
*/
css: true,
/**
* Format HTML files
* By default uses Prettier
*/
html: true,
/**
* Format Markdown files
* Supports Prettier and dprint
* By default uses Prettier
*/
markdown: 'prettier'
}
});
Running npx eslint
should prompt you to install the required dependencies, otherwise, you can install them manually:
npm i -D eslint-plugin-format
React
// eslint.config.js
import fmit from '@fmit/eslint-config';
export default fmit({
react: true,
});
Running npx eslint should prompt you to install the required dependencies, otherwise, you can install them manually:
npm i -D eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh
Type Aware Rules
You can optionally enable the type aware rules by passing the options object to the typescript config:
// eslint.config.js
import fmit from '@fmit/eslint-config';
export default fmit({
typescript: {
tsconfigPath: 'tsconfig.json',
},
});
VS Code support (auto fix)
Install VS Code ESLint extension
Add the following settings 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"
},
// Enable eslint for all supported languages
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"html",
"markdown",
"json",
"jsonc",
"yaml",
"toml"
]
}
To see all the available options and extended documentation, visit the original repo: @antfu/eslint-config.
Publish a new version
Login to npm:
npm login --registry https://registry.npmjs.org
Update the version in package.json
and run:
npm publish --latest