Symmetrys

eslint-config-symmetrys is a versatile and configurable ESLint preset designed for modern web development projects. It offers a comprehensive and customizable rule set, making it ideal for projects that require specific coding standards and practices. This preset enables easy integration and customization across a variety of development environments.

Important

This ESLint configuration is coded using the flat config format. For any modifications, please ensure to adhere to this format.

See ESlint Flat Config

Configurations Overview

Config name	Prefix	Auto detection	Deactivable	Description
js	-	-	🙅	ESLint configuration rules for JavaScript. Provides standard linting rules for JavaScript files, ensuring code quality and consistency.
ignore	-	-	🙅	-
node	node/	-	🙅	Node Rules
promise	promise/	-	🙅	Promise additional Rules.
perfectionist	perfectionist/	-	🙅	Perfectionist Rules
unicorn	unicorn/	-	🙅	Unicorn Rules. Implements advanced and specific coding standards to encourage the writing of clean and maintainable code.
eslint-comments	eslint-comments/	-	🙅	Eslint Comments Rules
imports	import/	-	🙅	Import Rules
ts	ts/	✅	✅	TypeScript configuration rules. Extends ESLint with TypeScript-specific rules, enhancing type safety and code standards in TypeScript projects.
vue	vue/	✅	✅	Vue.js specific rules. Automatic set TypeScript support when enabled.
vueA11y	vue-a11y/	✅ with vue	✅	Vue A11y Rules. An eslint plugin for checking accessibility rules from within .vue files. Available only when vue is enabled
vitest	vitest/, no-only-tests/	✅	✅	Vitest Rules, No only tests Rules
storybook	storybook/	✅	✅	Storybook Rules
cypress	cypress/	✅	✅	Cypress specific rules.
markdown	markdown/	-	✅	Markdown Rules, Lint JavaScript, JSX, TypeScript, and more inside Markdown files.
security	security/	-	✅	Security-focused rules. Enhances the security of the code by enforcing rules that prevent common security pitfalls.
jsDoc	jsdoc/	-	✅	JSDoc linting rules.
yaml	yaml/	-	✅	YAML Rules. Applies linting rules to YAML files, ensuring correct syntax and structure.
json	jsonc/	-	✅	ESLint plugin for JSON, JSONC, JSON5
stylistic	stylistic/	-	✅	Stylistic Rules, focuses on code styling and formatting, ensuring a consistent code appearance.
gitignore	-	-	✅	Support for .gitignore in ESLint Flat Config. See Github
specific	-	-	✅	Not Configurable! Sort specific files: '**/tsconfig.json', '**/tsconfig.*.json', **/package.json and **/.release-it.json.

Setup

Installation

pnpm add eslint-config-symmetrys -D
or
npm i eslint-config-symmetrys -D
or
yarn add eslint-config-symmetrys --dev

Usage

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

// eslint.config.js
import symmetrys from 'eslint-config-symmetrys'

export default symmetrys()

With CJS:

// eslint.config.js
const symmetrys = require('eslint-config-symmetrys').default

export default symmetrys()

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.

// package.json
{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

VSCode Config

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },
  "eslint.experimental.useFlatConfig": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "markdown",
    "json",
    "yaml",
    "github-actions-workflow"
  ]
}

Configs

Enable Config

All rules are enabled by default.

// eslint.config.js
import symmetrys from 'eslint-config-symmetrys'

// Enabled configs
export default symmetrys({
  jsDoc: true,
  ts: true,
  // vue: true || false // if vue existe in project
})

Disabled rules

// eslint.config.js
import symmetrys from 'eslint-config-symmetrys'

// Disable configs
export default symmetrys({
  ts: false,
  vitest: false,
  markdown: false,
  // vue: true || false // if vue existe in project
  // security: true,
  // jsDoc: true,

  // ...configurations can be enabled or disabled as needed
})

Customize Config

const config = {
  merge: ...eslintFlatConfig,
  erase: ...eslintFlatConfig,
}

Merge Config

// eslint.config.js
import symmetrys from 'eslint-config-symmetrys'

export default symmetrys({
  vue: {
    merge: {
      rules: {
        // Default Vue rules...

        // Add custom rules for Vue configuration
        'vue/require-default-prop': 'error',
        'vue/define-macros-order': 'off',
      },
    },
  },
  yaml: {
    merge: {
      files: ['**/*.ymll'], // ['**/*.y?(a)ml', '**/*.ymll']
    },
  },
})

Erase Config

// eslint.config.js
import symmetrys from 'eslint-config-symmetrys'

export default symmetrys({
  vue: {
    erase: {
      rules: {
        // Removes all default Vue rules in the configuration

        // Add the first rule for Vue configuration
        'vue/require-default-prop': 'error',
      },
    },
  },
  yaml: {
    erase: {
      files: ['**/*.yml'], // ['**/*.yml']
    },
  },
})

Setting Config

Typescript

The tsconfig.json file can be specified in the settings. strict-type-checking rules are automatically applied if tsproject is defined. Typescript ESlint docs

// eslint.config.js
import symmetrys from 'eslint-config-symmetrys'

export default symmetrys({
  settings: {
    tsproject: './tsconfig.json',
  },
})

Override the automatic rule assignment.

// eslint.config.js
import symmetrys from 'eslint-config-symmetrys'

export default symmetrys({
  ts: {
    merge: {
      languageOptions: {
        parserOptions: {
          project: true,
        },
      },
      rules: {
        // ✅ Typescript rules are applied

        // 🙅 Typescript 'strict-type-checking' rules are not applied
      },
    },
  },
})

Add Config

// eslint.config.js
import symmertry from 'eslint-config-symmetrys'
import eslintPluginRecommended from 'eslint-plugin-eslint-plugin/configs/recommended'

export default symmertry({
  settings: {
    addConfigs: [
      // Config 1
      eslintPluginRecommended,

      // Config 2
      {
        rules: {
          'eslint-plugin/test-case-shorthand-strings': 'error',
        },
      },
    ],
  },
})

Strict Formatting

symmetrys is a permissive formatter by default, but it also offers strict formatting options, ideal for data files or other specific cases.
Use the strictFormat setting to apply strict formatting rules to targeted files.

// eslint.config.js
import symmertry from 'eslint-config-symmetrys'

export default symmertry({
  settings: {
    strictFormat: {
      scriptFiles: ['./fixtures/data.js', './fixtures/data.ts'],

      jsonFiles: ['./fixtures/data.json'],
    },
  },
})

Warning

The json and/or stylistic configs need to be enabled.

Acknowledgements

This project is inspired by @antfu/eslint-config

License

This project is licensed under the MIT License.

Release Notes

See CHANGELOG.md for details on each release.