Skip to content

Some rules enforced in .ts but not .vue? #18

@sbmw

Description

@sbmw

My eslintrc.json:

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": ["plugin:vue/vue3-recommended", "eslint:recommended", "@vue/typescript/recommended", "@vue/prettier", "@vue/prettier/@typescript-eslint"],
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "ecmaVersion": 2021,
        "parser": "@typescript-eslint/parser"
    },
    "plugins": ["vue", "@typescript-eslint", "prettier"],
    "root": true,
    "rules": {
        "prettier/prettier": "error"
    }
}

I add the following to both a .ts and .vue file (with script lang set to ts):

let foo = "";
var boo = "";

In both files @typescript-eslint/no-unused-vars raises a warning as expected.

However, prefer-const and no-var are only detected (as errors) in the .ts file. These two rules are activated in the extended config https://github.com/typescript-eslint/typescript-eslint/blob/498f397ff3898dde631f37311615b555f38a414e/packages/eslint-plugin/src/configs/eslint-recommended.ts#L27

Why do these rules not kick in within .vue? Sorry if I'm missing something!

Activity

sbmw

sbmw commented on Mar 18, 2021

@sbmw
Author

Also, if I manually include the rules from typescript-eslint within eslintrc, the rules are enforced in .vue files as expected.

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": ["plugin:vue/vue3-recommended", "eslint:recommended", "@vue/typescript/recommended", "@vue/prettier", "@vue/prettier/@typescript-eslint"],
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "ecmaVersion": 2021,
        "parser": "@typescript-eslint/parser"
    },
    "plugins": ["vue", "@typescript-eslint", "prettier"],
    "root": true,
    "rules": {
        "prettier/prettier": "error",
        "constructor-super": "off", // ts(2335) & ts(2377)
        "getter-return": "off", // ts(2378)
        "no-const-assign": "off", // ts(2588)
        "no-dupe-args": "off", // ts(2300)
        "no-dupe-class-members": "off", // ts(2393) & ts(2300)
        "no-dupe-keys": "off", // ts(1117)
        "no-func-assign": "off", // ts(2539)
        "no-import-assign": "off", // ts(2539) & ts(2540)
        "no-new-symbol": "off", // ts(2588)
        "no-obj-calls": "off", // ts(2349)
        "no-redeclare": "off", // ts(2451)
        "no-setter-return": "off", // ts(2408)
        "no-this-before-super": "off", // ts(2376)
        "no-undef": "off", // ts(2304)
        "no-unreachable": "off", // ts(7027)
        "no-unsafe-negation": "off", // ts(2365) & ts(2360) & ts(2358)
        "no-var": "error", // ts transpiles let/const to var, so no need for vars any more
        "prefer-const": "error", // ts provides better types with const
        "prefer-rest-params": "error", // ts provides better types with rest args over arguments
        "prefer-spread": "error", // ts transpiles spread to apply, so no need for manual apply
        "valid-typeof": "off" // ts(2367)
    }
}
colgin

colgin commented on Jul 19, 2022

@colgin

I got the same issue, eslint can't detect the ts part in .vue. I don't think turn off the no-undef rule is a good way, especially in js,ts mixed project.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @colgin@sbmw

        Issue actions

          Some rules enforced in .ts but not .vue? · Issue #18 · vuejs/eslint-config-typescript