VSCode Syntax Highlighting not working with Vue / Vetur - vue.js

For the last week or so, every .VUE file I work with has no syntax highlighting. I usually have the extension Vetur to help with synthax highlighting and other tweaks to .VUE files.
Things I've tried so far:
uninstall/reinstall Vetur
change file associations in VScode
make sure .vue files have no errors

You can install 'Vue 3 Support - All In One' from extensions in vs code. Then the issue with syntax highlighting will fix.

Disable Volar/Vetur extension
Install and enable Vue 3 Support Extension
Reload VSCode

As i see for lang="pug" there is no needs to use other extension as like below:
https://vuejs.github.io/vetur/highlighting.html#custom-block
So I think the problem may be on your project file, please check new vue project to be sure that the problem is not from your files and config of the project !

As Sebastian Brosch said in a reply
This worked for me:
https://github.com/vuejs/vetur/blob/master/docs/FAQ.md#no-syntax-highlighting--no-language-features-working
TLDR: Run command reinstall command in vscode and select vetur extension

Related

Vue - Disable Eslint

I did some research, but could not find a quick fix to this situation:
Vue-cli 3.4.0 - Webpack 4.29.0
My project does not have config/index.js as mentioned here.
I tried to open vue.config.js and disable eslint does not work.
I removed the cli-plugin-eslint package.
Don't have .eslintrc.js.
Could not find any other configuration about eslint in project.
--- Fix ---
I realize that I didn't control my settings well. It was built in vetur.
the easiest way to ignore eslint is to ignore the files you dont want to be linted. For example, create .eslintignore in your project root folder. then just add the following folder which you dont want to lint like,
add src\

.ejs files in Sublime default to file type "Plain Text"

I'm new to coding and I'm using the Express framework in Sublime.
When I create .ejs files, (for example footer.ejs) for some reason Sublime shows these files as Plain Text files, instead of .ejs files, even though I have NPM installed ejs.
Furthermore, when I click on "Plain text" in the bottom right of Sublime, EJS doesn't show up as an option.
My package.json shows that I have ejs installed: "ejs": "^2.5.9".
Does anyone know what I'm doing wrong? And how I can get .ejs files to automatically default to EJS instead of plain text? Thanks!
The short version of the answer to your question is that installing a package via npm doesn't have any effect on Sublime. In order to add support for EJS to Sublime you need to install a package for it in Sublime.
Package Control has a couple of packages, EJS and EJS 2 (and maybe also Hyperloop EJS, if that's a thing; I'm unfamiliar with EJS).
Just at first blush it seems like EJS 2 might be the better first bet; it's been more recently updated and is using the newer sublime-syntax syntax format and seems to support more things. Take that with a grain of salt though, since I have no experience with either one.
You can select the command Package Control: Install Package from the command palette and then select one of those packages to install it. If you're going to try them both, do it one at a time and use Package Control: Remove Package before installing the next one so that they don't compete with each other.
If those commands aren't in your command palette, you don't have Package Control installed yet. In that case you can select Install Package Control from the command palette to install PC first. If that doesn't work there are also instructions on how to install it manually.
Once you have a package installed, you can close and reopen the file to apply the correct syntax, or use the menu as you mention in your question.
Let's make it short and simple.
Syntax highlighting and auto completions are not great if you were to download ejs package.
Instead I recommend you to use html syntax highlighting.
Open Command pallet using ctrl+ shift + P or cmd + shift + P.
Set Syntax: HTML

Is there any Plugin available for VueJs in Netbeans 8.2

Netbeans 8.x intellisense doesn't identify VueJS tags. Is there any Plugin available for VueJs syntax highlighting or autofill support in Netbeans 8.x? If not, are there any work arounds?
.vue file is a kind of html file, you can add syntax highlighting in Netbeans :
Tools > Options > Miscellaneous > Files
Add a new file extension :
File Extension : vue
Associated File Type (MIME) : HTML Files (text/html)
Not perfect but it seems there is no plugin for this actually.
EDIT : Visual Studio Code has nice features for vuejs
There is a plugin but it is still in developtment: https://github.com/Zwaen91/vuejs-netbeans. Some problems with the mixed mimetype text/vue+html. Created a ticket here: https://issues.apache.org/jira/browse/NETBEANS-88
Very Easy Solution:
First time, I also faced this problem when I am working on Netbeans
8.2.x Finally I got solution.
If you opened a PHP Project and if your file's extenstion is .html than NetBeans will display warning. Very easy solution.
replace your .html extension to .php .
Problem will be solve.See Screenshot from my PC's Netbeans.
See my Screenshot, there is no warning. Because, I have used [.]php extension.
Thanks

WebStorm syntax highlighting for Swig template engine

Given:
The Swig template engine: http://paularmstrong.github.io/swig/
Webstorm has a plugin for it: Textmate bundles support
A Textmate bundle for Swig is available: https://github.com/paularmstrong/Swig.tmbundle
I expect I should be able to get Swig highlighting fixed, but I'm only getting half way.
Below is the resulted highlighting I get. The Swig code is highlighted as expected, but HTML is not highlighted anymore.
I've tried installing and enabling the HTML textmate bundle as well, but when both the HTML and the Swig bundle are activated, the code is highlighted as only HTML. If I disable the HTML bundle but have the Swig bundle still active, I only get Swig highlighting.
My Question: How do I get Swig code and HTML code highlighted in the same file in WebStorm on Windows?
Result:
This is my Textmate Bundles configuration in WebStorm 9:
Again, simply selecting the HTML bundle to enable it doesn't work.
Swig has nearly identical syntax to Twig, so we can assume they can be used interchangeably speaking of syntax highlighting and code completion.
The thing is that PHPStorm it has a Twig support throught a plugin (which is awesome BTW), but sadly it is not available in the others IDEs thought the Plugins menu.
This issue can be solved by:
manually downloading the plugin from the official repo at https://plugins.jetbrains.com/plugin/7303?pr=
then installing it manually thought the Plugin interface,
then or use the .twig extension on files or adding a new mapping in the File Types system menu for the type Twig, with wildcard *.html or *.swig, how you prefer.
I'm using the *.html workaround and work like a charm, both Swig & HTML syntax highlighting + code completion.
Hope this helps you like it did to me :)

WebStorm + CodeKit?

Does anyone know how to setup WebStorm to work with CodeKit on a mac?
The ultimate goal is to get codekit to run and compile the my scss when a file is saved in WebStorm.
May be I have miss understood your question but, webstorm can compile your scss files automatically whenever you change them. Why do you need codekit to run?
I was looking for the same answer. From my initial test, I had both CodeKit and Webstorm open together. When I had Webstorm compile the SCSS it produced the map file which helps debug the SCSS files and changed the scss in CodeKit. Whereas codekit does not produce the map but produces a config file. I guess that it depends on who else needs to work with your code.