Using Vue.js I some time have a lot of parameters when calling a component in the html like way. And Vetur is completly lost when formating this.
Is there a way to tell Vetur to ignore some lines, in the same way we can do it with eslint ?
Related
Currently I am using prettier and Vetur but neither one will highlight components unless I code them as which is not the practice of the company I am working for. Anyone have any idea how to get syntax highlighting on vue components when they are written ?
I would like to know if there's any shorthand to fill the empty vue file with all three tags: template, script and style with proper default content.
As a comparison, at least, VS Code allows to autofill an html file with all default required tags/codes on ! + Enter. I want to know if there's something alike in VS Code or Vetur extension.
I've personally never used it but this seems to do what you're looking for. There seems to be a lot of different configuration options as well.
I've been working with Ionic and Vue2 for a while and I always have hard time adding ion-input tags to my code, because v-model does not work properly and I have to do all sorts of workarounds. Same is with ion-checkbox and ion-text-area. I was wondering if any of you know a way to fix this so that v-model works or do I have to just wait for Ionic team to fix this?
I'm using a custom Webpack plugin and loader to substitute special markers in a HTML template into valid HTML (similar to a macro in C). This works all fine, the produced HTML turns out fine, but unfortunately, it triggers eslint which runs after this substitution (as it would otherwise stumble over these macro markers).
I am fairly flexible with the macro substitution itself, so was thinking about excluding certain warnings from eslint for the substituted markup, however none of the ways to disable eslint work satisfactory.
For instance, if I try to insert /* eslint-disable-next-line */in the line /* eslint-disable-next-line */<my-custom-tag>... it still raises an error (for instance for max-len). I can't use <!-- eslint-disable --> as it doesn't seem to work well with Vuejs and v-if statements (can't find v-else). Inserting a tag before or after the substituted line doesn't work either as that would shift the line numbering for error/warning reporting for eslint.
I was wondering if eslint can be made to ignore certain HTML tags such as <my-custom-tag> and within those all the things that one would usually enforce by a linter would be ignored (like generated code which one wouldn't necessarily lint either).
Any suggestions are welcome, in particular if someone can share some experience in modifying eslint (custom rule?) this way?
I'm using both Vue.js and HAML in my current project. The templates are parsed by HAML, converted into HTML, then parsed by Vue. For instance:
#pagecontent.nonscrolling
%h2 Demand forecasts
%label{ for:"location-type" } Select location type
%select.form-control#location-type{ v-model:"locationType" }
%option{ v-bind:value:"'foo'" } Foo
It works ok, but it's a bit disconcerting worrying whether all the Vue syntax will make it unscathed through the HAML parser.
But I really like this type of succinct, angle-bracket-less template.
Is there is a cleaner way to achieve this? Some add-on to Vue that supports something similar?
Don't worry to much. There is nothing wrong about using preprocessors. I mean vue depends on wepback where everything is being preprocessed in one way or an other. Out of the box you can use pug with vue so I put more trust in it. It works fine for me without any unexpected problems. Both have the nesting through indentation in common and this is something that starts to be confusing with longer source codes. So I use pug mainly in short components and nest them using named slots into bigger ones.
Your code - pug version (as far I can guess what this HAML code should do)
<template lang="pug">
#pagecontent.nonscrolling
h2 Demand forecasts
label(for="location-type") Select location type
select.form-control#location-type(v-model="locationType")
option(v-bind:value="foo") Foo
</template>
The whole Vuetifyjs website is made with pug:
Vuetifyjs.com Source Code