vuejs / eslint-config-typescript Goto Github PK
View Code? Open in Web Editor NEWeslint-config-typescript for vue projects
License: MIT License
eslint-config-typescript for vue projects
License: MIT License
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!
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"
}
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?
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
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.
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.
<script>
export default {
// Missing return type on function. eslint(@typescript-eslint/explicit-module-boundary-types)
data(){}
}
</script>
module.exports = {
root: true,
env: {
node: true,
},
"plugins": ["@typescript-eslint"],
extends: [
'@vue/typescript/recommended',
],
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
},
};
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.
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!
The README begins with:
See @typescript-eslint/eslint-plugin for available rules.
Is this link still active somewhere else? I can't seem to find where this was supposed to lead.
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'
],
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"]
}
}
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.
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"
},
Are there plans to support the recommended-requiring-type-checking
and the all
sets from typescript-eslint?
Would a PR for that be welcome?
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?
I see that it has been mentioned a couple of times (#59 (comment), #48 (comment)), it is still not supported.
Support typescript-eslint v7
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
.
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.
I see two steps solution, and would appreciate your input, @sodatea:
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.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.
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
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
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?
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"]
}
}
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'
}
}
]
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
Can you please update it?
Thank you.
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.
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
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 `}`?
✖ 1 problem (1 error, 0 warnings)
.eslintrc.cjs
, add ecmaFeatures: { jsx: false }
to parserOptions
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.
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?
OS : Ubuntu 18 & 20
Node : 20.11.1
$ npm create vue (pick TypeScript + EsLint)
$ cd vue-project
$ npm install
$ npm run lint
Thanks for your help!
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
.
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
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'
],
> 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.
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
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.
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
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 annotationLocation
is never explicitly used but as the return type of the methodI 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?
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.