Syntax highlighting broken for .vue files
See original GitHub issueInfo
- 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:
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
- update to the lates vs code
- updated to the lates vetur
- open a .vue file
- observe
Issue Analytics
- State:
- Created 5 years ago
- Comments:5 (1 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Its again broken in latest VS code and Vetur
after reinstalling vetur a few times, issue has resolved itself.