vuejs / eslint-config-typescript Goto Github PK

View Code? Open in Web Editor NEW

105.0 6.0 27.0 368 KB

eslint-config-typescript for vue projects

License: MIT License

JavaScript 100.00%

eslint-config-typescript's Introduction

@vue/eslint-config-typescript

eslint-config-typescript for Vue

See @typescript-eslint/eslint-plugin for available rules.

This config is specifically designed to be used by @vue/cli & create-vue setups and is not meant for outside use (it can be used but some adaptations on the user side might be needed - for details see the config file).

A part of its design is that this config may implicitly depend on other parts of @vue/cli/create-vue setups, such as eslint-plugin-vue being extended in the same resulting config.

Installation

In order to work around a known limitation in ESLint, we recommend you to use this package alongside @rushstack/eslint-patch, so that you don't have to install too many dependencies:

npm add --dev @vue/eslint-config-typescript @rushstack/eslint-patch

Usage

This package comes with 2 rulesets.

`@vue/eslint-config-typescript`

This ruleset is the base configuration for Vue-TypeScript projects. Besides setting the parser and plugin options, it also turns off several conflicting rules in the eslint:recommended ruleset. So when used alongside other sharable configs, this config should be placed at the end of the extends array.

An example .eslintrc.cjs:

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution")

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    '@vue/eslint-config-typescript'
  ]
}

`@vue/eslint-config-typescript/recommended`

This is extended from the @typescript-eslint/recommended ruleset, which is an opinionated ruleset. See the original documentation for more information.

Some of its rules, however, might conflict with prettier. So when used alongside other sharable configs, this config should be placed after all other configs except for the one from @vue/eslint-config-prettier or eslint-plugin-prettier in the extends array.

An example .eslintrc.cjs:

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution")

module.exports = {
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/eslint-config-typescript/recommended',
    '@vue/eslint-config-prettier'
  ]
}

With Other Community Configs

Work-In-Progress.

If you are following the standard or airbnb style guides, don't manually extend from this package. Please use @vue/eslint-config-standard-with-typescript or @vue/eslint-config-airbnb-with-typescript instead.

eslint-config-typescript's People

Contributors

Stargazers

Watchers

eslint-config-typescript's Issues

Broken package.json file

Your package.json contains conflicting eslint-plugin-vue versions in dev and peer:

"devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.0.0",
    "eslint": "^8.0.0",
    "eslint-plugin-vue": "^8.0.1",
    "execa": "^4.0.3",
    "jest": "^26.5.2",
    "typescript": "^4.0.3",
    "vue": "^2.6.12",
    "vue-class-component": "^7.2.6",
    "vue-property-decorator": "^9.0.2"
  },
  "peerDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.0.0",
    "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0",
    "eslint-plugin-vue": "^7.17.0"
  },

This leads to npm error:

How does @vue/typescript/recommended correspond to this project

chinese:

我想要知道@vue/typescript/recommended中有哪些规则，所以我想要找到@vue/typescript/recommended对应的项目，但是我并没有在
/node_modules/@VUE中发现 @vue/typescript , 然后我通过搜索引擎，大概了解到@vue/typescript/recommended 对应 vue/eslint-config-typescript，但是我不明白，他们是如何工作的，是如何对应的

english:

I want to know what rules are in @vue/typescript/recommended, so I want to find the corresponding project @vue/typescript/recommended, but I am not in
I found @vue/typescript in /node_modules/@VUE, and then through search engines, I probably learned that @vue/typescript/recommended corresponds to vue/eslint-config-typescript, but I don’t understand how they work and how they correspond of

<script setup lang="ts" generic=" multiline generic definition "> cause ESLint Parsing error, but can correctly build.

This code cause error Parsing error: ';' expected. at TBar comment row.
It is not occur not only when comment row exists, but also when generic definition has line breaks.

<script setup lang="ts" generic="
    // comment of TFoo
    TFoo extends Record<string, any>,
    // comment of TBar
    TBar
">
  ...
</script>

I write a component which has 6 generics and each definition lasting about 50 characters, so generic definition has 13 lines.
Vue.js can parse this and can built and move correctly, but only ESLint displays error.

ESLint seems not responsible for Vue, so I submit this bug? to here.
If more suitable place exsits, I'm please to tell me that and sorry for your bother.

Some rules enforced in .ts but not .vue?

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!

Annotating Props typescript

Annotating Props with typescript shows strange eslint error.
My setup is nuxtjs with composition api
.eslintrc.json

{
  "root": true,
  "env": {
    "browser": true,
    "node": true
  },
  "parserOptions": {
    "parser": "babel-eslint"
  },
  "extends": [
    "@nuxtjs/eslint-config-typescript",
    "prettier",
    "plugin:nuxt/recommended",
    "@vue/typescript/recommended",
    "plugin:cypress/recommended",

    "plugin:prettier/recommended",
    "prettier/vue"
  ],
  "plugins": ["prettier"],
  // add your custom rules here
  "rules": {
    "semi": [2, "always"]
  }
}

Why @ vue/typescript, it will error checking my vue script without ts lang

When I use js components in a TS project, why check the JS script in a VUE file

comp.vue

<script>
export default {
// Missing return type on function. eslint(@typescript-eslint/explicit-module-boundary-types)
  data(){}
}
</script>

.eslintrc.js

module.exports = {
    root: true,
    env: {
        node: true,
    },
    "plugins": ["@typescript-eslint"],
    extends: [
        '@vue/typescript/recommended',
    ],
    parserOptions: {
        parser: '@typescript-eslint/parser',
        ecmaVersion: 2020,
    },
};

Support additional typescript-eslint configs

https://typescript-eslint.io/users/configs#recommended-configurations:

recommended-type-checked(-only)
strict(-type-checked(-only))
stylistic(-type-checked(-only))
all
base
disable-type-checked

Currently it seems that only eslint-recommended and recommended are provided.

Add support for eslint-plugin-vue@^9.0

Updating eslint-plugin-vue to https://github.com/vuejs/eslint-plugin-vue/releases/tag/v9.0.0 is possible (but not recommended) when using npm i --force. Everything just seems to work.

Can you add support for v9?

Error while loading rule '@typescript-eslint/indent' in TSX

Hi,

"@vue/eslint-config-typescript": "^10.0.0"

.eslintrc.cjs

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
require("@rushstack/eslint-patch/modern-module-resolution");
const { defineConfig } =  require("eslint-define-config");

module.exports = defineConfig({
    root: true,
    env: {
        browser: true,
        node: true,
        es6: true,
    },
    parser: "vue-eslint-parser",
    parserOptions: {
        parser: "@typescript-eslint/parser",
        ecmaVersion: "latest",
        sourceType: "module",
        jsxPragma: "React",
        ecmaFeatures: {
            jsx: true,
            tsx: true,
        },
    },
    extends: [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "plugin:vue/vue3-recommended",
        "@vue/eslint-config-typescript/recommended",
    ],
    plugins: ["vue", "@typescript-eslint"],
    overrides: [
        {
            files: ["*.ts", "*.tsx"],
            rules: {
                "indent": "off",
                "@typescript-eslint/indent": ["error", 4],
            },
        },
    ],
    rules: {
        "no-undef": "off",
        "vue/html-indent": ["error", 4],
        "vue/script-indent": ["error", 4, {
            baseIndent: 0,
            switchCase: 1,
        }],
        "@typescript-eslint/no-explicit-any": "off",
        "default-param-last": "off",
        "@typescript-eslint/default-param-last": ["error"],
        "func-call-spacing": "off",
        "@typescript-eslint/func-call-spacing": ["error", "never"],
        "@typescript-eslint/no-non-null-assertion": "off",
        "vue/multi-word-component-names": "off",
        "quotes": "off",
        "@typescript-eslint/quotes": ["error", "double", { "allowTemplateLiterals": true }],
        "semi": "off",
        "@typescript-eslint/semi": ["error"],
        "space-infix-ops": "off",
        "@typescript-eslint/space-infix-ops": ["error"],
        "comma-dangle": "off",
        "@typescript-eslint/comma-dangle": ["error", "always-multiline"],
        "vue/html-quotes": ["error", "double", { "avoidEscape": true }],
        "vue/max-attributes-per-line": ["error", {
            "singleline": {
                "max": 12,
            },
            "multiline": {
                "max": 1,
            },
        }],
        "vue/require-default-prop": "off",
        "vue/v-slot-style": ["error", {
            "atComponent": "shorthand",
            "default": "shorthand",
            "named": "shorthand",
        }],
        "vue/no-v-html": "off",
        "vue/singleline-html-element-content-newline": "off",
        "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^no_" }],
        "space-before-function-paren": "off",
        "@typescript-eslint/space-before-function-paren": ["error", {
            "anonymous": "never",
            "named": "never",
            "asyncArrow": "always",
        }],
        "no-useless-escape": "off",
        "max-len": ["error", {
            code: 200,
        }],
        "array-bracket-spacing": "error",
        "block-spacing": "error",
        "brace-style": "off",
        "@typescript-eslint/brace-style": ["error"],
        "comma-spacing": "off",
        "@typescript-eslint/comma-spacing": ["error"],
        "comma-style": "error",
        "computed-property-spacing": "error",
        "key-spacing": ["error", {
            "mode": "strict",
        }],
        "keyword-spacing": ["error", {
            overrides: {
                "if": { "after": false },
                "for": { "after": false },
                "while": { "after": false },
            },
        }],
        "object-curly-spacing": "off",
        "@typescript-eslint/object-curly-spacing": ["error", "always"],
        "space-before-blocks": "off",
        "@typescript-eslint/space-before-blocks": ["error"],
        "@typescript-eslint/type-annotation-spacing": ["error"],
        "@typescript-eslint/member-delimiter-style": ["error"],
    },
    globals: {
        $: "readonly",
        $$: "readonly",
        $ref: "readonly",
        $computed: "readonly",
        $shallowRef: "readonly",
        $customRef: "readonly",
        $toRef: "readonly",
        defineOptions: "readonly",
    },
});

when i run pnpm lint

Oops! Something went wrong! :(

ESLint: 8.22.0

RangeError: Maximum call stack size exceeded
Occurred while linting D:\workspace\vue-admin\src\components\BasicTable\BasicTable.tsx:1
Rule: "@typescript-eslint/indent"
    at BinarySearchTree.findLe (D:\workspace\vue-admin\node_modules\.pnpm\e[email protected]\node_modules\eslint\lib\rules\indent.js:162:11)
    at OffsetStorage._getOffsetDescriptor (D:\workspace\vue-admin\node_modules\.pnpm\e[email protected]\node_modules\eslint\lib\rules\indent.js:262:27)
    at OffsetStorage.getDesiredIndent (D:\workspace\vue-admin\node_modules\.pnpm\e[email protected]\node_modules\eslint\lib\rules\indent.js:447:41)
    at OffsetStorage.getDesiredIndent (D:\workspace\vue-admin\node_modules\.pnpm\e[email protected]\node_modules\eslint\lib\rules\indent.js:457:45)
    at OffsetStorage.getDesiredIndent (D:\workspace\vue-admin\node_modules\.pnpm\e[email protected]\node_modules\eslint\lib\rules\indent.js:457:45)
    at OffsetStorage.getDesiredIndent (D:\workspace\vue-admin\node_modules\.pnpm\e[email protected]\node_modules\eslint\lib\rules\indent.js:457:45)
    at OffsetStorage.getDesiredIndent (D:\workspace\vue-admin\node_modules\.pnpm\e[email protected]\node_modules\eslint\lib\rules\indent.js:457:45)
    at OffsetStorage.getDesiredIndent (D:\workspace\vue-admin\node_modules\.pnpm\e[email protected]\node_modules\eslint\lib\rules\indent.js:457:45)
    at OffsetStorage.getDesiredIndent (D:\workspace\vue-admin\node_modules\.pnpm\e[email protected]\node_modules\eslint\lib\rules\indent.js:457:45)
    at OffsetStorage.getDesiredIndent (D:\workspace\vue-admin\node_modules\.pnpm\e[email protected]\node_modules\eslint\lib\rules\indent.js:457:45)
 ELIFECYCLE  Command failed with exit code 2.

Flat config support

I see that it has been mentioned a couple of times (#59 (comment), #48 (comment)), it is still not supported.

typescript-eslint/no-floating-promises - You have used a rule which requires parserServices to be generated

The readme says that we can use any rule in @typescript-eslint/eslint-plugin however when I try using no-floating-promises, I keep getting the following error:

Error: Error while loading rule '@typescript-eslint/no-floating-promises': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

This is what I have in my eslint config file:

extends: ["plugin:vue/vue3-recommended", "eslint:recommended", "@vue/eslint-config-typescript/recommended", "@vue/eslint-config-prettier"],
   parserOptions: {
      ecmaVersion: 2022, // needed to support class static properties
   },

I am using vue3/vite with Typescript.
Any other rule that I have used in the past for example: @typescript-eslint/no-unused-vars or @typescript-eslint/no-explicit-any seems to work fine. Is there something special about typescript-eslint/no-floating-promises ?

Thanks!

Imported modules only used as type annotation are marked as `no-unused-vars`

Thanks for the latest update to v5! If just tried it out and it works fine, though I know have another problem which I don't exactly know if estlint-config-typescript introduced it or something else ...

My config looks like this:

    "extends": [
      "eslint:recommended",
      "plugin:vue/recommended",
      "plugin:jest/recommended",
      "@vue/eslint-config-typescript",
      "@vue/eslint-config-prettier"
    ],

Now in my .vue files if I do this, I get a no-unused-vars error:

...
import { Location } from "vue-router/types"

export default Vue.extend({
  ...
  methods: {
    getLocation(): Location {
      return { name: "some_location" }
    }
  }
})

// => no-unused-vars: 'Location' is defined but never used

The key points are:

Location is only imported because it is used as a type annotation
Location is never explicitly used but as the return type of the method
Other imports work fine which are used inside methods or computed getters beside type annotation

I didn't have this before upgrading to v5, but a lot of things changed during that upgrade (new peer dependencies, other packages upgraded) so I'm sorry if this is the wrong place to report it.

Is this something that can be fixed here or elsewhere?

Default `parserOptions.ecmaFeatures.jsx: true` breaks type assertion parsing in setup scripts

Steps to reproduce:

Clone dmolesUC/ts-test for a complete reproducible example, or:

create a Vue3/TypeScript project by running yarn create vite and selecting Vue and TypeScript
add and configure ESLint, including this plugin

modify components/HelloWorld.vue to contain the code below:

<script setup lang="ts">
import { Ref, ref } from 'vue'

defineProps<{ msg: string }>()

const count: Ref<number | undefined> = ref(0)

function incrementCount() {
  const c = <number>count.value // <- type assertion is here
  count.value = c + 1
}
</script>

Run yarn eslint --ext .js,.ts,.vue src

Expected

Code lints without errors; or, at least, ESLint is able to parse the Vue component source file.

Actual

Closing brace of the incrementCount() function produces the following parsing error:

/Users/david/Work/Scratch/ts-test/src/components/HelloWorld.vue
  12:0  error  Parsing error: Unexpected token. Did you mean `{'}'}` or `&rbrace;`?

✖ 1 problem (1 error, 0 warnings)

Workaround

in .eslintrc.cjs, add ecmaFeatures: { jsx: false } to parserOptions

Note

I originally filed this as vuejs/vue-eslint-parser#177, but @ota-meshi identified the issue as being the jsx config in eslint-config-typescript/index.js.

It's not clear to me why JSX support needs to be enabled by default for Vue projects, which I think tend not to use it that often. But at least this issue documents the workaround.

[Bug] ESLint throws `Parsing error: ',' expected` when using TypeScript `satisfies`

Repro Link

Code:

const a = 1 satisfies number

Behavior:

no-undef ESLint rule active in Vue files using ts syntax in both base and recommended config

It is normally not enabled in TypeScript files as TypeScript already checks that global variables are defined, yet it should still be enabled for Vue files using JS syntax.

v11 error with typescript information

Hi there,
v11 with typescript-eslint's type information rules does not work. I have confirmed that it works in v10.

$ npm run lint
> [email protected] lint
> eslint --ext .vue .


Oops! Something went wrong! :(

ESLint: 8.18.0

Error: Error while loading rule '@typescript-eslint/await-thenable': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
Occurred while linting <path/to>/eslint-config-typescript-1011/v11/src/App.vue
    at Object.getParserServices (<path/to>/eslint-config-typescript-1011/v11/node_modules/@typescript-eslint/utils/dist/eslint-utils/getParserServices.js:16:15)
    at create (<path/to>/eslint-config-typescript-1011/v11/node_modules/@typescript-eslint/eslint-plugin/dist/rules/await-thenable.js:44:37)
    at Object.create (<path/to>/eslint-config-typescript-1011/v11/node_modules/@typescript-eslint/utils/dist/eslint-utils/RuleCreator.js:42:20)
    at creatfollowingeRuleListeners (<path/to>/eslint-config-typescript-1011/v11/node_modules/eslint/lib/linter/linter.js:922:21)
    at <path/to>/eslint-config-typescript-1011/v11/node_modules/eslint/lib/linter/linter.js:1104:110
    at Array.forEach (<anonymous>)
    at runRules (<path/to>/eslint-config-typescript-1011/v11/node_modules/eslint/lib/linter/linter.js:1041:34)
    at Linter._verifyWithoutProcessors (<path/to>/eslint-config-typescript-1011/v11/node_modules/eslint/lib/linter/linter.js:1389:31)
    at <path/to>/eslint-config-typescript-1011/v11/node_modules/eslint/lib/linter/linter.js:1798:29
    at Array.map (<anonymous>)

I made the repro env here: https://github.com/koooge/eslint-config-typescript-1011

Available rules link leads to Page Not Found

The README begins with:
See @typescript-eslint/eslint-plugin for available rules.

But leads to this page:

Is this link still active somewhere else? I can't seem to find where this was supposed to lead.

[TypeScript 5.0] WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

> eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --max-warnings=0 --ignore-path ../.gitignore

=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <5.0.0

YOUR TYPESCRIPT VERSION: 5.0.4

Please only submit bug reports when using the officially supported version.

=============

Dependencies @typescript-eslint/eslint-plugin and @typescript-eslint/[email protected] need to be upgraded to at least 5.55.0 to support TypeScript 5.

Support ESLint `v9`

Just a heads up, ESLint v9 was released recently and it seems to be incompatible with @vue/eslint-config-typescript. Here's the error I got:

npm ERR! ERESOLVE could not resolve
npm ERR! While resolving: @vue/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"^9.0.0" from the root project
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^8.56.0" from @vue/[email protected]
npm ERR! node_modules/@vue/eslint-config-typescript
npm ERR!   dev @vue/eslint-config-typescript@"^13.0.0" from the root project
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/eslint
npm ERR!   peer eslint@"^8.56.0" from @vue/[email protected]
npm ERR!   node_modules/@vue/eslint-config-typescript
npm ERR!     dev @vue/eslint-config-typescript@"^13.0.0" from the root project

Update typescript-eslint to ^2.0.0

typescript-eslint 2.0.0 got released recently, which promises help with performance issues https://github.com/typescript-eslint/typescript-eslint/releases/tag/v2.0.0

Update to @typescript-eslint/* v3

Here's the changelog: https://github.com/typescript-eslint/typescript-eslint/releases/tag/v3.0.0

Need to introduce some breaking changes to this package.

Error: Cannot find module 'eslint/use-at-your-own-risk'

Hi, as per the title, I'm getting the following error:

Error: Failed to load plugin '@typescript-eslint' declared in '.eslintrc.js » @vue/eslint-config-typescript': Cannot find module 'eslint/use-at-your-own-risk'

I have tried different node versions and various different eslint plugin versions, with the same result.

Current node version: 18.14.2

Here is my .eslintrc.js file:

require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  root: true,
  env: {
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    '@vue/eslint-config-typescript'
  ],
  rules: {
    'prefer-regex-literals': 'off',
    'vue/multi-word-component-names': 'off',
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'padded-blocks': [0],
    'key-spacing': [1, { mode: 'minimum' }],
    // no spaces before function paren
    'space-before-function-paren': [2, 'never'],
    // require parenthesis in arrow functions
    'arrow-parens': [1, 'always'],
    // allow debugger during development
    // allow semi-colons
    semi: [1, 'always'],
    // allow indentation inside vue <script> tags
    // https://github.com/vuejs/eslint-plugin-vue/issues/362
    indent: ['error', 2, { SwitchCase: 1 }],
    'vue/script-indent': [
      'error',
      2,
      { baseIndent: 1, switchCase: 1 }
    ],
    'vue/no-use-v-if-with-v-for': ['error', {
      allowUsingIterationVar: true
    }]
  },
  overrides: [
    {
      files: ['*.vue'],
      rules: {
        indent: 'off'
      }
    }
  ],
  globals: {
    jquery: true,
    $: true,
    _: true
  },
  parserOptions: {
    parser: '@typescript-eslint/parser'
  }
};

Extract from package.json:

"dependencies": {
    "@vue/compat": "^3.1.0-0",
    "vue": "^3.2.47",
    "vue-burger-menu": "^1.0.9",
    "vue-clipboard2": "^0.3.1",
    "vue-grid-layout": "^2.4.0",
    "vue-router": "^4.1.6",
    "vue-swatches": "^2.1.0",
    "vue2-ace-editor": "0.0.15",
    "vue3-click-away": "^1.2.4",
    "vuedraggable": "^2.19.3",
    "vuex": "^4.1.0",
    "vuex-router-sync": "6.0.0-rc.1"
  },
"devDependencies": {
    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
    "@rushstack/eslint-patch": "^1.2.0",
    "@typescript-eslint/eslint-plugin": "^5.54.0",
    "@typescript-eslint/parser": "^5.54.0",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/compiler-sfc": "^3.1.0-0",
    "@vue/eslint-config-typescript": "^11.0.2",
    "@vue/test-utils": "^2.3.0",
    "chromedriver": "106",
    "dotenv": "^8.6.0",
    "eslint": "^8.0.1",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-vue": "^9.9.0",
    "flush-promises": "^1.0.2",
    "geckodriver": "^3.0.1",
    "http-proxy-middleware": "^0.19.1",
    "msw": "^1.1.0",
    "rollup-plugin-node-polyfills": "^0.2.1",
    "rollup-plugin-visualizer": "^5.9.0",
    "sass": "^1.32.7",
    "typescript": "~4.5.5",
    "vite": "^4.1.4",
    "vite-plugin-dynamic-import": "^1.2.7",
    "vitest": "^0.29.2"
  }

Error: Plugin "@typescript-eslint" was conflicted between ".eslintrc.js » plugin:@typescript-eslint/recommended-type-checked » ./configs/base" and ".eslintrc.js » @vue/eslint-config-typescriptBug: <short description of the issue>

require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  env: {
    node: true,
    es6: true
  },
  parser: 'vue-eslint-parser',
  plugins: ['standard-recommended'],
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:vue/vue3-strongly-recommended',
    'plugin:vue/vue3-recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier/skip-formatting',
    'plugin:@typescript-eslint/recommended-type-checked',
    // unplugin-auto-import
    './.eslintrc-auto-import.json'
  ],
  parserOptions: {
    project: true,
    tsconfigRootDir: __dirname,
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
    ecmaVersion: 'latest',
    ecmaFeatures: {
      jsx: true
    }
  },
  noInlineConfig: true,
  reportUnusedDisableDirectives: true,
  // ignore 
  ignorePatterns: [
    '*.sh',
    'node_modules',
    '*.md',
    '*.woff',
    '*.ttf',
    '.vscode',
    '.idea',
    'dist',
    '/docs',
    '.husky',
    '.github'
  ],
};

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "auto-imports.d.ts", "components.d.ts"],
  "compilerOptions": {
    "ignoreDeprecations": "5.0",
    "jsx": "preserve",
    "baseUrl": ".",
    "moduleResolution": "bundler",
    "paths": {
      "@unocss/preset-icons/browser": ["./node_modules/@unocss/preset-icons/dist/browser"],
      "@/*": ["./src/*"],
      "@c/*": ["./src/components/*"],
      "@v/*": ["./src/views/*"]
    },
    "lib": ["ESNext", "DOM"],
    "types": ["vite/client", "naive-ui/volar"]
  }
}

using recommended order, not getting correct results

order of plugins mentioned in README.md is

'extends': [
    'plugin:vue/essential',
    '@vue/standard',
    '@vue/typescript'
  ]

however, I don't get eslint(no-unused-vars) errors for this config.
works fine with this order

'extends': [
    '@vue/typescript',
    '@vue/standard',
 'plugin:vue/essential'
  ],

docs issue?

When I read the Readme.MD file for this project, I get confused because the readme says that it provides 2 rulesets: @vue/eslint-config-typescript and @vue/eslint-config-typescript/recommended but then it goes on to say here are some sample .eslintrc.js files but neither of the examples include these two rulesets.

Shouldn't the docs show how to use the rulesets? Or if @vue/typescript somehow includes @vue/eslint-config-typescript, than that should be explicitly called out.

typescript-eslint@v6

Announcement: https://typescript-eslint.io/blog/announcing-typescript-eslint-v6

It’d be great to discuss the timeline for a downstream update as well as potential caveats.

npm install and npx install-peerdeps throws Error

Hi Folks,
since today our Pipeline failed.

After further investigation we found the possible issue:
npm install for @vue/eslint-config-typescript fails with Error 404

Also we tried npx install-peerdeps --dev @vue/eslint-config-typescript and this also crashes.

Here is the Part of our package.json:

"devDependencies": {
       ........
        "@vue/eslint-config-typescript": "^5.0.1",
       ........

Here is the process when trying to manually install:

$: npm install @vue/eslint-config-typescript

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@vue%2feslint-config-typescript - Not found
npm ERR! 404 
npm ERR! 404  '@vue/eslint-config-typescript@^5.0.1' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/robertkeller/.npm/_logs/2020-08-06T11_04_50_532Z-debug.log

And here the npx peerdeps:

$: npx install-peerdeps --dev @vue/eslint-config-typescript

install-peerdeps v2.0.3
ERR That package doesn't exist. Did you mean to specify a custom registry?

We are using the standard npm registry.

Thanks for your help.

Support for `recommended-requiring-type-checking` and `all`

Are there plans to support the recommended-requiring-type-checking and the all sets from typescript-eslint?
Would a PR for that be welcome?

Support ESLint 8.0.0

The ESLint 8.0.0 was released two days ago
https://github.com/eslint/eslint/releases/tag/v8.0.0

However the package.json file of @vue/eslint-config-typescript do not seem to support it.

eslint-config-typescript/package.json

Line 45 in e11179c

"eslint": "^5.0.0 || ^6.0.0 || ^7.0.0",

Can you please update it?

Thank you.

[13.0.0] Error: Error while loading rule '@typescript-eslint/consistent-type-imports': You have used a rule which requires parserServices to be generated

After update from "@vue/eslint-config-typescript": "^12.0.0", to "@vue/eslint-config-typescript": "^13.0.0",, the error has shown up:

Error: Error while loading rule '@typescript-eslint/consistent-type-imports': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
Parser: X:\WebTV Frontend\node_modules\.pnpm\[email protected][email protected]\node_modules\vue-eslint-parser\index.js
Note: detected a parser other than @typescript-eslint/parser. Make sure the parser is configured to forward "parserOptions.project" to @typescript-eslint/parser.
Occurred while linting X:\WebTV Frontend\src\components\player\video\info\LiveIndicator.vue
    at throwError (X:\WebTV Frontend\node_modules\.pnpm\@[email protected][email protected][email protected]\node_modules\@typescript-eslint\utils\dist\eslint-utils\getParserServices.js:40:11)
    at getParserServices (X:\WebTV Frontend\node_modules\.pnpm\@[email protected][email protected][email protected]\node_modules\@typescript-eslint\utils\dist\eslint-utils\getParserServices.js:20:9)
    at create (X:\WebTV Frontend\node_modules\.pnpm\@[email protected]_@[email protected][email protected][email protected]\node_modules\@typescript-eslint\eslint-plugin\dist\rules\consistent-type-imports.js:85:68)
    at Object.create (X:\WebTV Frontend\node_modules\.pnpm\@[email protected][email protected][email protected]\node_modules\@typescript-eslint\utils\dist\eslint-utils\RuleCreator.js:38:20)
    at createRuleListeners (X:\WebTV Frontend\node_modules\.pnpm\[email protected]\node_modules\eslint\lib\linter\linter.js:895:21)
    at X:\WebTV Frontend\node_modules\.pnpm\[email protected]\node_modules\eslint\lib\linter\linter.js:1066:110
    at Array.forEach (<anonymous>)
    at runRules (X:\WebTV Frontend\node_modules\.pnpm\[email protected]\node_modules\eslint\lib\linter\linter.js:1003:34)
    at Linter._verifyWithoutProcessors (X:\WebTV Frontend\node_modules\.pnpm\[email protected]\node_modules\eslint\lib\linter\linter.js:1355:31)
    at X:\WebTV Frontend\node_modules\.pnpm\[email protected]\node_modules\eslint\lib\linter\linter.js:1913:29
 ELIFECYCLE  Command failed with exit code 2

Any recommendations how should this be fixed?

Integration with ESLint's built-in configurations (`strict-type-checked`, `stylistic-type-checked`)

Documentation problem on ESLint configurations

The current documentation advises using this config after other plugins. However, it lacks clarity on integrating with ESLint's stricter inbuilt configurations like strict-type-checked or stylistic-type-checked, which exceed the recommended level provided by @vue/typescript/recommended.

Issues with .vue file parsing

Going against the official documentation and adding strict-type-checked and stylistic-type-checked before this config works partly. This is also suggested by @n0099 in issue #29. It allows reusing parser and plugin options but it fails to parse .vue files

So doing something like:

    '@vue/typescript/recommended',

    'plugin:@typescript-eslint/strict-type-checked',
    'plugin:@typescript-eslint/stylistic-type-checked',

Fails on files that are not .ts, such as cjs, js and most importantly .vue files.

Potential solution

I see two steps solution, and would appreciate your input, @sodatea:

Update README.md to offer clear guidance on using these ESLint configurations. Either advise against their use if unsupported, or provide a workaround if possible. The current instruction to use this config after other plugins is unclear and confusing, leading to similar issues on GitHub.
Find a way to support integration with these inbuilt ESLint rules.

Updating documentation can be first step as it could address related issues like #63, #43, #29, and #18, potentially resolving them with an official statement from the maintainers.

App compiles even with typescript error?

Assume I have this code:

function foo(bar: string) {
  console.log(bar)
}
foo(3);

When I run yarn serve, an type error is thrown to the console:

10:3 Argument of type 'number' is not assignable to parameter of type 'string'.

However, the project compiles and launches in my web browser. I would expect for the project to fail compilation until all typescript errors are fixed.

Is this expected behavior, or is there an additional config for this?

[Feature request] Support typescript-eslint v7

Support typescript-eslint v7

False positive no-unused-vars when importing typescript type in .vue file

I am getting a false positive error no-unused-vars when importing and using a typescript type in a .vue file.
My eslintrc.js:

module.exports = {
  root: true,
    env: {
      node: true
    },
    extends: [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "@vue/typescript"
    ],
    parserOptions: {
      "parser": "@typescript-eslint/parser"
    },
    rules: {
      "@typescript-eslint/semi": ["error"]
    }
};

One possible workaround I found is to disable the no-used-vars rule for .vue files and enable @typescript-eslint/no-unused-vars:

overrides: [
  // Fix no-used-vars when importing ts types in .vue files
  {
    files: ["*.vue"],
    rules: {
      'no-unused-vars': 'off',
      '@typescript-eslint/no-unused-vars': 'error'
    }
  }
]

TypeScript version warning on a new Vue project

Hi there,

On a new vue project, I'm getting this warning :

=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=4.3.5 <5.4.0

YOUR TYPESCRIPT VERSION: 5.4.3

Please only submit bug reports when using the officially supported version.

=============

Do you know how can I get rid of it?

Should I bump vuejs/eslint-config-typescript to v13?

Details:

OS : Ubuntu 18 & 20
Node : 20.11.1

Steps to reproduce:

$ npm create vue (pick TypeScript + EsLint)
$ cd vue-project
$ npm install
$ npm run lint

Thanks for your help!

Wrongly installed @typescript-eslint/eslint-plugin

The dependency @typescript-eslint/eslint-plugin is wrongly installed as it causes another plugin version to be used or even fails to resolve the plugin in a pnpm workspace.

This could be easily solved by declaring these as peerDependencies instead of dependencies.

My current workaround: Install @typescript-eslint/eslint-plugin manually and keep versions in sync with the one listed in @vue/eslint-config-typescript.

add parserOptions.project and then throw error "Parsing error: '>' expected" in demo of 'tsx-in-sfc'

Docs improvement

Hey guys, maybe I'm missing something, but why is this module even needed?

My Vite-Vue-TS project works perfectly fine without this module.
So why does Vite adds it into the project in the first place? It's not clear from the readme page

Here's my eslint config

I'm using @typescript-eslint plugin directly

plugins: [
  '@typescript-eslint',
  'import'
],
extends: [
  'plugin:@typescript-eslint/recommended',
  'plugin:vue/vue3-recommended',
  'eslint:recommended',
  'plugin:import/recommended',
  'plugin:import/typescript',
  'plugin:@intlify/vue-i18n/recommended',
  '@vue/typescript/recommended'
],

Error while loading rule '@typescript-eslint/naming-convention'

Hi,

"@vue/eslint-config-typescript": "^11.0.0",

I set the rules.

.eslintrc.js:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'plugin:vue-pug/vue3-recommended',
    '@vue/standard',
    '@vue/eslint-config-typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'prefer-regex-literals': 'off',
    'multiline-ternary': 'off',
    indent: ['error', 2, { SwitchCase: 1, ignoredNodes: ['PropertyDefinition'] }],
    'space-before-function-paren': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/camelcase': 'off',
    camelcase: 'off',
    '@typescript-eslint/member-delimiter-style': 'off',
    '@typescript-eslint/no-use-before-define': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-inferrable-types': 'off',
    '@typescript-eslint/naming-convention': [
      'warn',
      {
        selector: 'interface',
        format: ['PascalCase'],
        custom: {
          regex: '^I[A-Z]',
          match: true
        },
        filter: {
          regex: '[wW]indow',
          match: false
        }
      }
    ],
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    'vue/multi-word-component-names': 'off',
    'vue/no-reserved-component-names': 'off',
    'vue/return-in-computed-property': 'warn'
  }
}

The result lint reported an error.

npm run lint 

> vue-cli-service lint

 ERROR  Error: Error while loading rule '@typescript-eslint/naming-convention': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
        Occurred while linting /Users/test/.eslintrc.js

vuejs / eslint-config-typescript Goto Github PK

eslint-config-typescript's Introduction

@vue/eslint-config-typescript

Installation

Usage

@vue/eslint-config-typescript

@vue/eslint-config-typescript/recommended

With Other Community Configs

eslint-config-typescript's People

Contributors

Stargazers

Watchers

Forkers

eslint-config-typescript's Issues

When I use js components in a TS project, why check the JS script in a VUE file

comp.vue

.eslintrc.js

Steps to reproduce:

Expected

Actual

Workaround

Note

Documentation problem on ESLint configurations

Issues with .vue file parsing

Potential solution

Details:

Steps to reproduce:

Here's my eslint config

Recommend Projects

Recommend Topics

Recommend Org

`@vue/eslint-config-typescript`

`@vue/eslint-config-typescript/recommended`