npm package: @fmit/eslint-config
Description: FMIT's ESLint Config
Latest version: 4.12.0

# @fmit/eslint-config

This package extends from [@antfu/eslint-config](https://github.com/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](https://github.com/antfu/eslint-config#customization)
- [ESLint Flat config](https://eslint.org/docs/latest/use/configure/configuration-files-new), compose easily!
- Using [ESLint Stylistic](https://github.com/eslint-stylistic/eslint-stylistic)
- Respects `.gitignore` by default
- Optional [React](#react), [Nuxt](https://github.com/antfu/eslint-config#nuxt) support
- Optional [formatters](#formatters) support for CSS, HTML, etc.
- **Style principle**: Minimal for reading, stable for diff, consistent

## Usage

### Install

```bash
pnpm i -D eslint @fmit/eslint-config
```

### Create config file

With [`"type": "module"`](https://nodejs.org/api/packages.html#type) in `package.json` (recommended):

```js
// eslint.config.js
import fmit from '@fmit/eslint-config';

export default fmit();
```

With CJS:

```js
// 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`](https://github.com/antfu/eslint-ts-patch) to fix it.

> The `.eslintignore` file no longer works in Flat config, see [customization](https://github.com/antfu/eslint-config#customization) for more details.

### Add script for package.json

For example:

```json
{
  "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`](https://github.com/antfu/eslint-plugin-format).

```js
// 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:

```bash
npm i -D eslint-plugin-format
```

### React

```js
// 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:

```bash
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:

```js
// 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](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

Add the following settings to your `.vscode/settings.json`:

```json5
{
  // 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](https://github.com/antfu/eslint-config).

## Publish a new version

Releases are automatically managed by [semantic-release](https://github.com/semantic-release/semantic-release) through GitLab CI/CD when commits are pushed to the `main` branch.

### Required CI/CD Variables

The following variables must be configured in **Settings → CI/CD → Variables**:

- **`NPM_TOKEN`**: Authentication token for publishing to the npm registry
  - Generate at: https://www.npmjs.com/settings/[username]/tokens
  - Required scope: Automation or Publish

- **`GITLAB_TOKEN`**: Personal or project access token for GitLab operations
  - Generate at: Settings → Access Tokens
  - Required scopes: `api`, `write_repository`
  - Used for: Creating releases, pushing version bumps and CHANGELOG updates

### How it works

1. Commit your changes using [Conventional Commits](https://www.conventionalcommits.org/)
2. Merge to `main` branch
3. GitLab CI automatically:
   - Analyzes commits to determine version bump
   - Updates `package.json` and `CHANGELOG.md`
   - Creates a Git tag and GitLab release
   - Publishes to npm registry