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.