I use Volar extension in VS Code to edit SFC files for Vue. Also the Notepad++ Keymap extension is installed.
Everything works as expected, but I don't know how to change the commenting line command (ctrl+q) so it comments correctly in the <style lang="scss"> section.
In the <script> section the command uses correctly the // characters, Idem in <template> where comments with <!-- and -->. But in the <style> section it insists in using <!-- and --> instead of //.
Is there anything to change or should I open an issue?
Thanks for helping!
mario
Solved. Disabled extensions Vue and Preview apparently without side effects. Now commenting in the style section works as expected.
Add a file association to tell vscode the vue file is something like a html
file by adding the fellowing code in 'settings.json' of vscode.
"files.associations": {
"*.vue": "html"
}
Related
I have enabled Volar, the Vscode extension (v0.34.15).
I have disabled the Vetur extension.
Now when commenting out code in the template part of a vue file, the comments have the wrong syntax:
{# <p>hello</p> #}
instead of
<!-- <p>hello</p> -->
With Vetur it works like expected, so I don't know if this is caused by some conflict with another extension or if it is some setting that needs to be changed?
I had the same problem, solved by disabling some VS Code extensions, I disabled Vue 3 Snippets and TWIG pack, now everything works
Looks like a Twig(Symfony's template engine) extension is enabled and has access to .vue files, please disable it/them.
Similarly, it could also be the Antlers Toolbox plugin if you do Statamic work.
I am using Vue 2.6.14
I wrote the following in my Single File component:
<style scoped src="#/common/assets/landing/Land.css" />
in order to include a pre-existing file.
Because I want the style to apply to this component only, I used this scoped attribute.
It works perfectly when I run my app with vue-cli-service serve and when I compile in dev mode with vue-cli-service build --mode=preprod.
However, as soon as I compile in prod mode with vue-cli-service build, it doesn't work anymore as intended: the style apply globally on all pages of the application.
I can't find anyone having the issue on the Internet.
Can someone help me?
Because compilation is working as intended in dev mode but not in prod mode, I think it should be a bug in the compiler.
Thank you very much for your help
Try it
<style scoped>
#import '~#/common/assets/landing/Land.css';
</style>
Eventually: it appeared that every random CSS file located in the #/common/assets/ is included globally by the production builder.
It makes no sense at all to me, I believe it's a bug of the compiler.
Whatever it closes the issue.
I have a vue single file component where, the template section looks like this
<template>
<Card>
/// rest of template here ///
</Card>
</template>
Card is an imported Vue component.
For some reason, I don't understand, ESLint in VSCode underlines the element with the red line and is warning me that Card cannot be used as a JSX component. I have installed and configured eslint with vue with every online tutorial I could find and the warning won't go away.
Any ideas on what should I configure to remove this stupid warning?
To solve the immediate problem, add "jsx": "preserve" to your tsconfig.json file.
For a more permanent solution, you can also extend the recommended Vue-based typescript settings in your tsconfig.json by adding:
"extends": "#vue/tsconfig/tsconfig.json"
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
I've setup a compass file watcher as listed here.
http://blog.founddrama.net/2013/04/watching-compass-files-in-webstorm/
The file watcher works flawlessly, same as the command line compass process.
I'm curious if there's a way to configure WebStorm to point to references in the .scss file instead of the compiled app.css file.
Example
Inside index.html i have
<a href='#' class='pandaStyle'>
When i click on pandaStyle, it takes me to the line inside the compiled app.css
I'd like it to take me to the partial of _animalStyle.scss
As #Iena said, it's not possible. Try voting for the issue (http://youtrack.jetbrains.com/issue/WEB-6737) and JetBrains may add the feature.
I solved the problem like this:
Adding
#import "myFolder/myCssStylesheet";
to the .scss file and get all css classes and Id's from that stylesheet.
For example:
#import "Styles/bootstrap.css";
gives me all bootstrap classes autocomplite in my .scss files