@anyions/shared-eslint-config NPM

@anyions/shared-eslint-config

NPM License

AnyIons' shared ESLint flat config presets with prettier.

Default ESLint flat config for JavaScript, TypeScript, Vue and UnoCSS.
Use ESlint and Prettier to format HTML, CSS, LESS, SCSS, JSON, JSONC, Markdown.

Install

npm i @anyions/shared-eslint-config

Usage

ESLint config file

With "type": "module" in package.json
Create config file eslint.config.js
Import config from @anyions/shared-eslint-config

import { defineConfig } from '@anyions/eslint-config'

export default defineConfig(
  {
    // user options
  },
  // From the second arguments they are ESLint flat configs
  // you can have multiple configs
  {
    files: ['**/*.ts'],
    rules: {}
  },
  {
    rules: {}
  }
)

!NOTE
See Options for more details.

ESLint settings in VSCode

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },
  "eslint.experimental.useFlatConfig": true,
  "editor.formatOnSave": true,
  "eslint.format.enable": true,
  "eslint.ignoreUntitled": true,
  "eslint.validate": [
    // add the languages you want to lint
    "html",
    "css",
    "json",
    "jsonc",
    "json5",
    "markdown",
    "yaml",
    "yml"
  ],
  "prettier.enable": false
}

Scripts in package.json

{
  "scripts": {
    "lint": "eslint ."
    "lint:fix": "eslint . --cache --max-warnings 0 --fix",
  }
}

Options

interface OptionsPrettier {
  /**
   * Default prettier rules
   *
   * @default
   * ```json
   * {
   *   "printWidth": 120,
   *   "tabWidth": 2,
   *   "useTabs": false,
   *   "semi": false,
   *   "vueIndentScriptAndStyle": true,
   *   "singleQuote": true,
   *   "quoteProps": "as-needed",
   *   "bracketSpacing": true,
   *   "trailingComma": "none",
   *   "jsxSingleQuote": true,
   *   "arrowParens": "always",
   *   "proseWrap": "never",
   *   "htmlWhitespaceSensitivity": "strict",
   *   "endOfLine": "lf",
   *   "rangeStart": 0
   * }
   * ```
   */
  rules: PrettierRules
  /**
   * @default
   * {
   *  "html": true,
   *  "css": true,
   *  "json": true,
   *  "markdown": true,
   *  "yaml": false
   * }
   */
  formatters: {
    html?: boolean
    css?: boolean
    json?: boolean
    markdown?: boolean
    yaml?: false
  }
}

export interface OptionsComponentExts {
  /**
   * Additional extensions for components.
   *
   * @example ['vue', 'ts']
   * @default []
   */
  componentExts?: string[]
}

export interface OptionsOverrides {
  files?: string[]
  overrides?: FlatConfigItem['rules']
}

export interface OptionsMarkdown extends OptionsOverrides, OptionsComponentExts {}

export interface OptionsTypeScript extends OptionsOverrides, OptionsComponentExts {
  tsconfigPath?: string | string[]
  parserOptions?: Partial<ParserOptions>
  filesTypeAware?: string[]
}

export interface OptionsUnoCSS extends OptionsOverrides {
  /**
   * Enable attributify support.
   * @default true
   */
  attributify?: boolean
  /**
   * Enable strict mode by throwing errors about blocklisted classes.
   * @default false
   */
  strict?: boolean
}

export interface UserOptions {
  /**
   * The current working directory
   *
   * @default process.cwd()
   */
  cwd?: string
  /**
   * The globs to ignore lint
   *
   * @default []
   */
  ignores?: string[]
  /**
   * Enable flat git/eslint ignore support.
   *
   * Path to `.gitignore` files
   * By defult, will use `'.gitignore'` and '.eslintignore' automation.
   *
   * @see https://github.com/antfu/eslint-config-flat-gitignore
   *
   * @default ['.gitignore', '.eslintignore']
   */
  flatignore?: string[]
  /**
   * Whether to use prettier to format files
   * If true, will use default prettier options
   * You can use `.prettierrc` to override the default prettier rules
   *
   * @see OptionsPrettier
   * @default true
   */
  prettier?: boolean | OptionsPrettier
  /**
   * Javascript override rules.
   */
  javascript?: OptionsOverrides
  /**
   * Enable TypeScript support.
   *
   * @default auto-detect based on the dependencies
   */
  typescript?: boolean | OptionsTypeScript
  /**
   * Enable unocss rules.
   *
   * @default false
   */
  unocss?: boolean | OptionsUnoCSS
  /**
   * Enable Vue support.
   *
   * @default auto-detect based on the dependencies
   */
  vue?: boolean | OptionsOverrides
  /**
   * Enable linting for **code snippets** in Markdown.
   *
   * To format Markdown content, need enable `formatters.markdown`.
   *
   * @default true
   */
  markdown?: boolean | OptionsMarkdown
  /**
   * Enable JSONC support.
   *
   * @default true
   */
  jsonc?: boolean | OptionsOverrides
}

Thanks

Inspired by the following projects: