Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

[eslint-plugin] Proposal: Add configuration helper #301

Copy link
Copy link
Closed
@bartlangelaan

Description

@bartlangelaan
Issue body actions

To get this plugin and the TypeScript parser to work, currently it needs some basic configuration to be added to the ESLint configuration. This amount of configuration grows if it should only apply to TypeScript files, and it even increases more if you extend from a shared configuration (like airbnb's) that implements rules that aren't supported by the TypeScript ESLint parser.

With a configuration helper, we can enable everyone to automatically apply all Typescript-related stuff to your ESLint configuration. It would look something like this:

// .eslintrc.js

// You need to wrap your configuration with a function provided by the ESLint plugin.
module.exports = require('@typescript-eslint/eslint-plugin/config-helper')({
  
  // In there, include your normal ESLint configuration.
  extends: [
    'eslint-config-airbnb',
    'eslint-config-prettier',
    'eslint-config-prettier/react'
  ],
  plugins: ['prettier'],
  env: {
    browser: true,
  },
  rules: {
    'prettier/prettier': 'error',
    camelcase: ['error', { properties: 'never', ignoreDestructuring: false }],
    
    // You can also configure TypeScript rules here.
    '@typescript-eslint/restrict-plus-operands': 'error',
  }
});

Then, the config-helper function would apply all transformations needed to get the configuration working. So, the configuration that is actually exported looks like this:

{
  "extends": ["eslint-config-airbnb", "eslint-config-prettier", "eslint-config-prettier/react"],
  "plugins": ["prettier"],
  "env": { "browser": true, },
  "rules": {
    "prettier/prettier": "error",
    "camelcase": ["error", { "properties:": "never", "ignoreDestructuring": false }],
  },
  "overrides": [
    {
      "files": ["*.ts", "*.tsx"],
      "parser": "@typescript-eslint/parser",
      "plugins": ["@typescript-eslint"],
      "settings": {
        "import/resolver": { "node": {"extensions": [".js", ".ts", ".jsx", ".tsx", ".json"]}, "typescript": {}},
        "import/extensions": [".js", ".ts", ".jsx", ".tsx", ".json"]
      },
      "rules": {
        "camelcase": 0,
        "@typescript-eslint/camelcase": ["error", { "properties:": "never", "ignoreDestructuring": false }],
        "no-array-constructor": 0,
        "@typescript-eslint/no-array-constructor": ["error"],
        "import/no-unresolved": 0,
        "import/named": 0,
        "react/jsx-filename-extension": 0,
        "@typescript-eslint/restrict-plus-operands": "error"
      }
    }
  ]
}

So, what it basically does is:

  • Adds an override for .ts and .tsx files with the right parser and plugin
  • Checks which core rules are enabled (also in extends) that have a TypeScript-specific rule (like camelcase & no-array-constructor in this example), and disables the core rule and enables the TS-specific one with the original config.
  • Disables rules that are incompatible with or unnecessary for TypeScript (like import/no-unresolved and import/named in this example)
  • Moves all @typescript-eslint/* rule definitions to the override so they aren't enabled for non-TS files.

This way it's way easier to make ESLint compatible with TypeScript, as all needed config changes are handled for you.

Issues related to config, that would probably be helped by this helper: #36 #109 #118 #147 #154 #177 #265 #266 #267 #268

If others agree that this would be helpful, I'm willing to try to make a PR that enables this.

Metadata

Metadata

Assignees

No one assigned

    Labels

    accepting prsGo ahead, send a pull request that resolves this issueGo ahead, send a pull request that resolves this issueenhancementNew feature or requestNew feature or requestpackage: eslint-pluginIssues related to @typescript-eslint/eslint-pluginIssues related to @typescript-eslint/eslint-plugin

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.