search

vuejs / vetur

Vue tooling for VS Code.
https://vuejs.github.io/vetur/
MIT License
5.75k stars 593 forks source link

Linting / error-checking running VERY slowly #1200

Closed geopic closed 5 years ago

geopic commented 5 years ago

Info

I am also writing the code in TypeScript, latest version.

Problem

When writing code in .vue files, the error-checking functionality lags massively. Screenshot -- note how the error doesn't recognise the entire string (it takes many seconds to recognise it all).

In the Vue Language Server panel I get this output:

Vetur initialized
[Error - 09:29:27] Request textDocument/codeAction failed.
  Message: Request textDocument/codeAction failed with message: Debug Failure. Invalid cast. The supplied value [object Object] did not pass the test 'isStringLiteral'.
  Code: -32603 
[Error - 09:29:44] Request textDocument/codeAction failed.
  Message: Request textDocument/codeAction failed with message: Debug Failure. Invalid cast. The supplied value [object Object] did not pass the test 'isStringLiteral'.
  Code: -32603

Reproducible Case

Open up a .vue file in VS Code with Vetur installed which has <script lang="ts">...</script> and write some code, anything at all which should have errors. The error-checking / linting displays, such as the red underline and the popup when you hover over the bad code, will take a long time to recognise all of the error.

EDIT: Here is a picture showing how much CPU power and RAM VS Code is taking up when Vetur is in the process of error-checking: https://i.imgur.com/at1ikdf.png

yoyoys commented 5 years ago

After update to the latest version, I have the same problem too.

octref commented 5 years ago

Open up a .vue file in VS Code with Vetur installed which has and write some code

Can you try to fork https://github.com/octref/veturpack to get a repro? This doesn't repro for me.

geopic commented 5 years ago

Hi octref. I tried to reproduce the issue but couldn't, leading me to think it is likely something unrelated to Vetur. Thanks for responding to my issue.

octref commented 5 years ago

@tedjenkins Can you show me code --list-extensions?

Also how large is your project?

geopic commented 5 years ago

Can you show me code --list-extensions?

dbaeumer.vscode-eslint
eg2.tslint
esbenp.prettier-vscode
felixfbecker.php-debug
felixfbecker.php-intellisense
felixfbecker.php-pack
HvyIndustries.crane
monokai.theme-monokai-pro-vscode
mrmlnc.vscode-apache
ms-python.python
octref.vetur
teabyii.ayu

Also how large is your project?

219MB, including node_modules. This is my package.json:

"dependencies": {
    "class-validator": "^0.9.1",
    "date-fns": "^1.30.1",
    "dotenv": "^7.0.0",
    "express": "^4.16.4",
    "mysql": "^2.16.0",
    "reflect-metadata": "^0.1.13",
    "typeorm": "^0.2.16",
    "validator": "^10.11.0",
    "vue": "^2.6.6",
    "vue-class-component": "^6.0.0",
    "vue-property-decorator": "^7.0.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@types/dotenv": "^6.1.1",
    "@types/express": "^4.16.1",
    "@types/jest": "^23.1.4",
    "@types/node": "^11.13.2",
    "@types/validator": "^10.9.0",
    "@vue/cli-plugin-typescript": "^3.5.0",
    "@vue/cli-plugin-unit-jest": "^3.5.0",
    "@vue/cli-service": "^3.5.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "husky": "^1.3.1",
    "node-sass": "^4.9.0",
    "prettier": "1.16.4",
    "sass-loader": "^7.1.0",
    "ts-jest": "^23.0.0",
    "typescript": "^3.2.1",
    "vue-template-compiler": "^2.5.21"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,css,json,md}": [
      "prettier --write",
      "git add"
    ]
  }
octref commented 5 years ago

@tedjenkins I have a feeling the perf issues are caused by your PHP extensions rather than Vetur. Can you run the command "Process Explorer" in VS Code to see which one is causing cpu/memory usage?

geopic commented 5 years ago

@octref Sure thing.

shot

yoyoys commented 5 years ago

I'm using typescript too, my teammate notice me that if a <script lang="ts"> block exists, then computer will keep burning.

hlhr202 commented 5 years ago

@tedjenkins I have a feeling the perf issues are caused by your PHP extensions rather than Vetur. Can you run the command "Process Explorer" in VS Code to see which one is causing cpu/memory usage?

I do not use PHP extensions but I still get the same problems too. I am using within <script lang="tsx"> block ts version: 3.1.6 (using workspace version) vscode version: 1.33.1 vetur version: 0.18.1

hlhr202 commented 5 years ago

image The first column is CPU % usage

geopic commented 5 years ago

Is there any more information you need @octref?

hlhr202 commented 5 years ago

@octref FYI, I v found that once I use 0.18.0 everything goes fine

yoyoys commented 5 years ago

@octref FYI, I v found that once I use 0.18.0 everything goes fine

0.18.0 works a a little fast, but still slow, type checking and intellisence still slow.

kjleitz commented 5 years ago

Happens to me, too. No PHP extensions, using TypeScript and Vetur. Similar CPU stats. I notice it's a heck of a lot better (but still slow) in smaller files, but slows to an unbearable crawl on even slightly bigger SFCs. Been this way for at least a month now, maybe more.

kjleitz commented 5 years ago

My extensions list:

> code --list-extensions
AlanWalk.markdown-toc
akamud.vscode-theme-onedark
anthonymoi.rivescript
bierner.github-markdown-preview
bierner.markdown-checkbox
bierner.markdown-emoji
bierner.markdown-preview-github-styles
bierner.markdown-yaml-preamble
bung87.rails
bung87.vscode-gemfile
castwide.solargraph
dbaeumer.vscode-eslint
dustinsanders.an-old-hope-theme-vscode
eamodio.gitlens
eg2.tslint
Equinusocio.vsc-material-theme
GrapeCity.gc-excelviewer
HookyQR.beautify
jacobkantzer.case-sensitive-add-next
karunamurti.haml
lkytal.coffeelinter
mkaufman.HTMLHint
ms-python.python
ms-vscode.Theme-MarkdownKit
ms-vscode.Theme-TomorrowKit
naumovs.color-highlight
neilding.language-liquid
octref.vetur
Orta.vscode-jest
PeterJausovec.vscode-docker
rebornix.ruby
robinbentley.sass-indented
sianglim.slim
vortizhe.simple-ruby-erb
wholroyd.jinja
zhuangtongfa.Material-theme
chanlito commented 5 years ago

I'm experiencing slowness in latest version. Not sure what's causing it tho.

AtofStryker commented 5 years ago

Also experiencing this. anyone have any leads as to what is causing this?

geopic commented 5 years ago

Received this error when saving a .vue file today.

Error

octref commented 5 years ago

Please try to generate a profile and attach it to this issue. It'd help me a lot more than screenshots. Instruction here: https://github.com/vuejs/vetur/blob/master/.github/PERF_ISSUE.md#profiling

geopic commented 5 years ago

@octref cpu-profile-02.zip

octref commented 5 years ago

There's a lot of file system activity going on. It seems to be caused by TypeScript.

What's your jsconfig/tsconfig, or you don't have one?

I also added some logging for your case. After I publish 0.19.4, can you set "vetur.dev.logLevel": "DEBUG", reload window and let me know what you get on Output -> Vue Language Server?

geopic commented 5 years ago 
Debugger listening on ws://127.0.0.1:7000/e448e12c-a55b-4e56-8301-104ae439fad8
For help, see: https://nodejs.org/en/docs/inspector
Loaded bundled typescript@3.3.4000.
[DEBUG] Initializing ServiceHost with 16 files: [(all .ts files in project)]
Vetur initialized
Debugger attached.

And then when I edit files to get errors I receive:

Prettier format failed
[Error - 13:29:19] ';' expected. (5:6)
  3 | import { utils } from '@/utils';
  4 | import { hello } from '@/hello';
> 5 | cons hi
    |      ^
  6 | 
  7 | @Component({})
  8 | export default class SiteDashboard extends Vue {

etc.

My tsconfig.json is as follows:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "baseUrl": ".",
    "types": ["webpack-env", "jest", "node"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost", "es6"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/unit/**/*.ts",
    "tests/unit/**/*.tsx"
  ],
  "exclude": ["node_modules", "tests/e2e/**/*.ts", "tests/e2e/**/*.tsx"]
}
octref commented 5 years ago

I think the crux of this problem is that I try to load "all files specified from tsconfig.json", when Vetur only needs the *.vue files to work.

Just to prove my hypothesis, can you try this pattern and verify if Vetur's features work for you?

{
  "include": [
    "src/**/*.vue"
  ],
  "exclude": [
    "node_modules",
    "tests/e2e/**/*.ts",
    "tests/e2e/**/*.tsx"
    "src/**/*.ts",
    "src/**/*.tsx",
    "tests/unit/**/*.ts",
    "tests/unit/**/*.tsx"
  ]
}
yoyoys commented 5 years ago

@octref I think this may break ts files

octref commented 5 years ago

@yoyoys I know...Just to see if it breaks Vetur features. If it doesn't I'll need to read the list of files to process in Vetur not from jsconfig/tsconfig.

geopic commented 5 years ago

@octref I get error code TS18003, which says No inputs were found in config file 'tsconfig.json'. Specified 'include' paths were '["src/**/*.vue"]' and 'exclude' paths were '["node_modules", "tests/e2e/**/*.ts", "tests/e2e/**/*.tsx" "src/**/*.ts", "src/**/*.tsx", "tests/unit/**/*.ts", "tests/unit/**/*.tsx"]'. And then a set of errors all saying that property '$store' does not exist on type 'x', where x is the exported Vue component (e.g. 'App' in App.vue, 'SiteHeader' in SiteHeader.vue, etc).

octref commented 5 years ago

I think I have found a good fix. Can you try the VSIX linked here? https://github.com/vuejs/vetur/issues/1277#issuecomment-489456369

octref commented 5 years ago

This should be fixed in 0.20.0.