Formatting Style Blocks in Vue Single-File-Components? about vscode-stylelint HOT 6 CLOSED

@ntwb In your readme, under Usage header, you list Vue (vue, vue-html, vue-postcss) by linking it to Vetur...

What are the officially recommended setup configs for using Stylelint in VS Code with VueJS framework (.vue files)? Now that ESLint acts as a formatter, do I still need to use Vetur (thats ok if it still brings something vital to the mix)?

I've opened and self-answered this StackOverflow question on the optimal linting and formatting setup with VueJS in TypeScript and Vue CLI4 (yet biased to using Airbnb rules and stylelint-config-recommended-scss): How to configure Vue CLI 4 with ESLint + Airbnb rules + TypeScript + Stylelint for SCSS, in VS Code editor with autofix on save?

I've opted to use Stylelint with your VS Code extension and a webpack plugin, so I may not need Vetur.

However, I found out there is still something from with my Stylelint setup configs. It seems autofix on save doesn't work and neither does NPM script or webpack plugin during builds. Any suggestions?

from vscode-stylelint.

Thanks @ux-engineer, since the stylelint org taking over this extension we have not had much time to explore such things :(

I had a quick glance at your Q & A on SO, lots of details there, perhaps you could advise us?

What are the pain points you have had? Docs or functionality?

Our docs are quite limited right now, maybe you could submit a PR to update the readme.mdd if you think we should remove Vetur and add section on how best to configure the extension with Vue? (It would be greatly appreciated)

Edit: Autofix should be working as expected, are you using the latest release? Creating a new issue for that would be best if you are using the latest

from vscode-stylelint.

Thanks @ux-engineer Let's keep the formatter discussion to #25

For VUE SFCs I just tested this:

p.s. I just noticed I used the menu command in the above, setting "editor.formatOnSave": true will also autofix the issue on save.

You also need the latest v0.70.0 of the extension for this to work, I published this a couple of hours ago.

from vscode-stylelint.

Thanks for the info. I'll debug my Stylelint setup more in the following weeks, and with any feedback to my SO question... Will get back to this later.

from vscode-stylelint.

while stylelint works with stylus in .styl files with stylelint-plugin-stylus it does not with <style lang="stylus"> in vue sfc

from vscode-stylelint.

For those who may be interested, I have written a small vscode extension name prettylus (available in vscode market place) that can format Vue SFCs using Prettier for <template> (works with pug with @prettier/plugin-pug) and <script>, and using Stylus Supremacy for <style lang="stylus">. This is early implementation. It is not much configurable, all config must be placed in a prettier rc config file or a .stylusrc (this file name can be configured) where you place your rules.

It may be setup to work with stylelint too I guess.

https://github.com/qnp/prettylus

from vscode-stylelint.