@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 put type: module in your package.json or you have to use CJS in eslint.config.js. If you want explicit extension like .mjs or .cjs, or even eslint.config.ts, you can install eslint-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:

{
  // 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 you IDE, but still auto fix them
  "eslint.rules.customizations": [
    { "rule": "style/*", "severity": "off", "fixable": true },
    { "rule": "format/*", "severity": "off", "fixable": true },
    { "rule": "*-indent", "severity": "off", "fixable": true },
    { "rule": "*-spacing", "severity": "off", "fixable": true },
    { "rule": "*-spaces", "severity": "off", "fixable": true },
    { "rule": "*-order", "severity": "off", "fixable": true },
    { "rule": "*-dangle", "severity": "off", "fixable": true },
    { "rule": "*-newline", "severity": "off", "fixable": true },
    { "rule": "*quotes", "severity": "off", "fixable": true },
    { "rule": "*semi", "severity": "off", "fixable": true }
  ],

  // Enable eslint for all supported languages
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml",
    "toml",
    "xml",
    "gql",
    "graphql",
    "astro",
    "svelte",
    "css",
    "less",
    "scss",
    "pcss",
    "postcss"
  ]
}

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