VSCode does not show HTML attributes in .vue files but shows in html files - vue.js

I have spent 3 hours figuring out what's going on but could not find it out. I am new to HTML and intellisense help me know many attributes of a tag on the go. However, with .vue files html attributes are not being shown up.
a) Attributes being shown up in "index.html"
b) No attributes hints in "TodoItem.vue"
I have already installed Vetur, HTML CSS Support and Vue VSCode Snippets extension from marketplace.

First, install Vetur extension after that go to
File > Preferences > Settings
In the list find and open Extensions find Vetur, scroll down and find Template Interpolation Service (must be checked).

I found it.
you need to install this official extension to get tailwind css hints.
Tailwind CSS IntelliSense
everything will come true

Related

Customize/modify PrimeVue Bootstrap theme SCSS/SASS

I'm new to PrimeVue and I'm trying to customize/modify the Bootstrap theme. I have a separate project where I completely modified the variables of Bootstrap (v4) and I want to use it in PrimeVue. I want to use SCSS so I can manage the styles well (just import the SCSS file needed in the component). How do I do that? Upon looking at the PrimeVue resources directory, it looks like it doesnt have the scss folder of Bootstrap, and it only shows the css file (generated). Any help is greatly appreciated. Thanks!
Edit: I want to completely modify the variables instead of overriding the PrimeVue Bootstrap classes.
I don't know if it's still relevant, but you can only make changes in SASS variables if you buy the designer license from Primefaces - otherwise you'll get access only to prebuilt files.
See the designer documentation here.

vs code autocomplete other

I'm wondering how to get VS Code to autocomplete HTML tags in files that aren't .html
I'm working on a vue.js project which have a pages HTML, JavaScript, and CSS all in one file that have a .vue extension.
Just add the Vetur extension and you get emmet and auto completion out of the box.
Features
Syntax-highlighting
Snippet
Emmet
Linting / Error Checking
Formatting
Auto Completion
Debugging
https://marketplace.visualstudio.com/items?itemName=octref.vetur

How to work with css and js files in moodle plugin

I need to develop a plugin for Moodle, and i need to have some js and css files in plugin. But i have the next problem - how to work with them from installed plugin? Of course, i can hardcode their path via to moodle structure, but it's a very dirty and bad way. Also, i know that i can place all js and css code inline, but i think that it's a bad decision too. Is there a built-in way to serve assets from plugin? I tried to find it in documentations, but found nothing.
Thanks
I assume you want to know how to include CSS and JS files into your plugin.
You can include a JS file via the command:
$PAGE->requires->js( /relative/path/your_script.js');
You can then call a JS function once the page has been downloaded with the command:
$PAGE->requires->js_init_call ( your_JS_function_name, array_of_parameters_here, bool: on DOM ready);
For example:
$PAGE->requires->js_init_call('init', array($USER->lang), true);
Be sure to make the $PAGE available with global $PAGE;, first.
Your CSS file can be named styles.css and put into the root folder of your plugin. The file will be automatically read by the system and included. It will take precedence over (will overwrite the settings of) the system CSS files. After that you will have to reload the theme caches.

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

PhantomJS/CasperJS IDE Helper

Is there any way to get IDE support for CasperJS functions? I am currently using PhpStorm, but also tried in netbeans, it won't know which functions are defined. It is quite irritating that I get Unresolved variable / undefined function IDE warnings for all the functions.
I tried to copy \casperjs\modules\*.js files to the project, most of the functions got "defined".
PhpStorm: Download the casperjs.zip from casperjs.org, it will contain a modules folder, copy every .js file to your project. (I put them in an IDE_HELPER folder)
An IDE helper javascript file would still be much better, but it is working.
Alternatively: You can also attach these files as external libraries, so it won't bother you while browsing your own files.
It should work in other IDEs too.
Disclaimer: I'm talking about JetBrains products.
I encountered this problem myself. The easiest way to solve it is to click on a bottom right icon (Finally, I understand that is this for!).
It will show you which libraries are associated with an open file. The only thing you have to do is to click on «Libraries in scope» and add your library by clicking «Download»
I know it's an old post, but after not finding any IDE Helper too I managed to write a script that creates one by scraping the content off of the official docs. You can find out more about the IDE Helper on my website:
http://christophersax.com/2016/casperjs-ide-helper/
(It's free of course)
I hope it helps!
You can add casperjs as a Resource in your Preferences.
Go to Project > Directories > + Add Content Root > Add casperjs folder then > Mark as Resource Root.