@sanomics/eslint-config

Extending @antfu/eslint-config with its default Flat config and Stylistic features enabled, additional rules are also enabled and most cases will show warnings rather than errors.

Usage in Project

Install

pnpm i -D eslint typescript @sanomics/eslint-config

Create config file

With "type": "module" in package.json (recommended):

// eslint.config.js
import eslintConfig from '@sanomics/eslint-config'

export default eslintConfig()

Add script for package.json

For example:

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

VS Code support

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,

  // Enable eslint for all supported languages
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml",
    "toml",
    "gql",
    "graphql"
  ]
}

Additional Rules

Grouped import statement

Import statements are separated into different groups by blank lines according to categories

// built in modules
import path from 'node:path'

// external packages
import _ from 'lodash'

// internal files, including relative imports and alias
import { foo } from './foo'
import { bar } from '~/bar'

// types
import type { Foo } from './foo'

Unified function declaration style

When declearing a function, we only use the function declaration.

// good
function foo() {

}

// bad
const foo = () => {}

// good, arrow function is allowed to use when it's passed as arguments
setTimeout(() => {

},1000)

No shadow

See no-shadow - ESLint for detail.

No unused vars

Generally unused vars is not allowed, except for props and emit in .vue files.

<script setup lang="ts">
// good even if `props` is not used
const props = defineProps<{
    foo: string
}>()

// good even if `emit` is not used
const emit = defineEmits<{
    change: [foo: string]
}>()

// bad
const foo = ''
</script>

Kebab-casing and self-closing component

<template>
    <!-- good -->
    <user-form />

    <!-- bad -->
    <UserFrom />

    <!-- bad -->
    <user-form></user-form>
</template>

No self-closing HTML element

<template>
    <!-- good -->
    <div></div>

    <!-- bad -->
    <div />
</template>

Customization

In eslint.config.js:

import eslintConfig from '@sanomics/eslint-config'

export default eslintConfig(
    {
        // override preset ESLint config options
    },

    // override ESLint configs
    {
        files: ['**/*.vue'],
        rules: {
            'vue/html-indent': ['warn', 2],
        },
    },
    {
        ignores: [
            '**/*.md',
            'public/libs/ketcher/**/*',
            'public/libs/rdkit/RDKit_minimal.js',
        ],
    },
    {
        files: ['**/*.yml', '**/*.yaml'],
        rules: {
            'yaml/indent': ['warn', 4, { indicatorValueIndent: 2 }],
        },
    },
)

Please check Anthony Fu's README.md for more.