question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Syntax highlighting broken for .vue files

See original GitHub issue
  • I have searched through existing issues
  • I have read through docs
  • I have read FAQ

Info

  • Platform: macOS
  • Vetur version: 0.16.1
  • VS Code version: 1.31

Problem

I know longer have syntax highlighting for .vue files after updating to the latest VS code and vetur. I did not change any configuration. Theme does not effect this issue either, tried many. I also disabled all plugins but vetur and reloaded. Still does not work. There are no errors on the console. My .vue look like so: screen shot 2019-02-19 at 6 38 01 pm

My settings are:

{
  "window.zoomLevel": 0,
  "vscode_custom_css.imports": [
    "/Users/hendrixer/Dev/configs/vscode-theme/theme.css"
  ],
  "editor.fontFamily": "Operator Mono Ssm",
  "editor.tabSize": 2,
  "editor.cursorBlinking": "expand",
  "terminal.integrated.shellArgs.osx": ["-l"],
  "search.exclude": {
    "**/node_modules": false,
    "**/bower_components": true,
    "node_modules/**": true,
    "dist/**": true,
    "tmp/**": true,
    ".tmp/**": true,
    "**/.git": true,
    ".serverless/**": true,
    ".webpack/**": true
  },
  // "emmet.syntaxProfiles": { "javascript": "jsx" },
  "typescript.tsdk": "node_modules/typescript/lib",
  "files.exclude": {
    "**/.git": false,
    "**/.svn": true,
    "**/.hg": true,
    ".tmp/**": true,
    "**/.DS_Store": true
  },
  "files.insertFinalNewline": true,
  "vsicons.projectDetection.autoReload": true,
  "workbench.iconTheme": "material-icon-theme",
  "tsimporter.emitSemicolon": false,
  "git.enableSmartCommit": true,
  "vsicons.dontShowNewVersionMessage": true,
  "[javascriptreact]": {},
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "vue-html",
      "autoFix": true
    }
  ],
  "workbench.colorTheme": "Material Theme Lighter High Contrast",
  "editor.fontSize": 16,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "[typescript]": {
    "editor.formatOnSave": false
  },
  "eslint.run": "onType",
  "eslint.autoFixOnSave": true,
  "vetur.format.defaultFormatter.js": "prettier",
  // relevant for 'prettier-eslint' instead of 'prettier'
  "prettier.eslintIntegration": true,
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  // at the time of this writing there is no stylus support by prettier
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.validation.style": true,
  "stylusSupremacy.insertColons": false,
  "stylusSupremacy.insertSemicolons": false,
  "stylusSupremacy.insertBraces": false,
  "stylusSupremacy.insertNewLineAroundImports": true,
  "stylusSupremacy.insertNewLineAroundBlocks": true,
  "stylusSupremacy.insertNewLineAroundProperties": false,
  "stylusSupremacy.insertNewLineAroundOthers": false,
  "stylusSupremacy.insertSpaceBeforeComment": true,
  "stylusSupremacy.insertSpaceAfterComment": true,
  "stylusSupremacy.insertSpaceAfterComma": true,
  "stylusSupremacy.insertSpaceInsideParenthesis": false,
  "stylusSupremacy.insertParenthesisAfterNegation": false,
  "stylusSupremacy.insertParenthesisAroundIfCondition": true,
  "stylusSupremacy.insertNewLineBeforeElse": false,
  "stylusSupremacy.insertLeadingZeroBeforeFraction": true,
  "stylusSupremacy.selectorSeparator": ", ",
  "stylusSupremacy.quoteChar": "'",
  "stylusSupremacy.sortProperties": false,
  "stylusSupremacy.alwaysUseImport": false,
  "stylusSupremacy.alwaysUseNot": false,
  "stylusSupremacy.alwaysUseAtBlock": false,
  "stylusSupremacy.alwaysUseExtends": false,
  "stylusSupremacy.alwaysUseNoneOverZero": false,
  "stylusSupremacy.alwaysUseZeroWithoutUnit": false,
  "stylusSupremacy.reduceMarginAndPaddingValues": false,
  "stylusSupremacy.ignoreFiles": [],
  "javascript.updateImportsOnFileMove.enabled": "always",
  "todo-tree.defaultHighlight": {
    "foreground": "green",
    "type": "none"
  },
  "bracketPairColorizer.forceUniqueOpeningColor": true,
  "bracketPairColorizer.colorMode": "Independent",
  "workbench.colorCustomizations": {
    "activityBarBadge.background": "#AB47BC",
    "list.activeSelectionForeground": "#AB47BC",
    "list.inactiveSelectionForeground": "#AB47BC",
    "list.highlightForeground": "#AB47BC",
    "scrollbarSlider.activeBackground": "#AB47BC50",
    "editorSuggestWidget.highlightForeground": "#AB47BC",
    "textLink.foreground": "#AB47BC",
    "progressBar.background": "#AB47BC",
    "pickerGroup.foreground": "#AB47BC",
    "tab.activeBorder": "#AB47BC",
    "notificationLink.foreground": "#AB47BC",
    "editorWidget.resizeBorder": "#AB47BC",
    "editorWidget.border": "#AB47BC",
    "settings.modifiedItemIndicator": "#AB47BC",
    "settings.headerForeground": "#AB47BC",
    "panelTitle.activeBorder": "#AB47BC",
    "breadcrumb.activeSelectionForeground": "#AB47BC",
    "menu.selectionForeground": "#AB47BC",
    "menubar.selectionForeground": "#AB47BC"
  },
  "materialTheme.autoApplyIcons": true,
  "typescript.preferences.quoteStyle": "single",
  "tslint.autoFixOnSave": true,
  "tslint.packageManager": "yarn",
  "prettier.tslintIntegration": true,
  "javascript.format.enable": false,
  "editor.formatOnSave": false,
  "workbench.panel.defaultLocation": "bottom",
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "tslint.run": "onType",
  "files.trimFinalNewlines": true,
  "materialTheme.accent": "Purple",
  "terminal.integrated.rendererType": "dom",
  "files.associations": {
    "*.vue": "vue"
  }
}

Reproducible Case

  1. update to the lates vs code
  2. updated to the lates vetur
  3. open a .vue file
  4. observe

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
vilunetcommented, May 16, 2020

Its again broken in latest VS code and Vetur

1reaction
Hendrixercommented, Feb 20, 2019

after reinstalling vetur a few times, issue has resolved itself.

Read more comments on GitHub >

github_iconTop Results From Across the Web

VSCode Syntax Highlighting not working with Vue / Vetur
VUE file I work with has no syntax highlighting. I usually have the extension Vetur to help with synthax highlighting and other tweaks...
Read more >
syntax highlighting for vue templates broke after 16.8 update
block has lost its syntax highlighting, bracket completion, etc. and is being treated as plain text. This started after updating to VS 16.8.0....
Read more >
Vue Syntax Highlight - Packages
Enabling JSX Highlighting. The <script> block uses the syntax highlighting currently active for you normal .js files. To support JSX highlighting inside Vue...
Read more >
Using Syntax Highlighting in this forum - Get Help
Since many people seem to struggle with syntax highlighting, here are a few examples. ... Corrupted File Download from Byte[] array (works with...
Read more >
No automatic HTML syntax highlighting on .vue files
After I fixed it, I discovered that my syntax highligh broke on .vue files. I have syntax highlight inside <script> and <style> sections....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found