Skip to content

πŸŒ€ ESlint Config Symmetrys πŸŒ€, a versatile, customizable ESLint preset for modern web development needs. πŸ“ πŸ“

License

Notifications You must be signed in to change notification settings

aisevim/eslint-config-symmetrys

Repository files navigation

Symmetrys

Quality-Check NPM Badge Downloads

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.