[feat-req] ability to provide formatter for template, script & style tag like vetur

[jd-solanki]

Hi,

I am working in a team and I want to keep consistent code across my whole project. For this reason, I am using formatters like stylelint, eslint etc.

I was able to specify which formatter to choose in vetur but this is not the case with volar.

I already mentioned this in the discord channel previously and I was completely satisfied with your response but as the project grows and new team members are introduced, it is getting hard to keep consistency.

Below are some notes, I think providing features like this is important:

• Code consistency across the whole project
• Ability to use already popular formatters for specific language. (like stylelint for scss)
• Fewer bugs if we add strict linter (eslint)
• Formatters like stylelint allows following people preferred/chosen CSS format/order without knowing it
• Writing clean & formatted code for building products for developers or handling code over to other dev

I already tried for 2 months without the above feature but I still miss awesome things created by people around the world. Volar will be the future of Vue and I think using popular tools like eslint & stylelint with vue will be great.

I am totally fine if you still don't want to introduce a feature like this or volar later provide this. These are just my thoughts and what I am facing.

Regards.

[sethidden]

I am working in a team and I want to keep consistent code across my whole project. For this reason, I am using formatters like stylelint, eslint etc.

You just need to add eslint-plugin-vue to make ESLint understand .vue files and which parts of it are html and which JS/TS. It will then use the rules you've defined for normal JS/TS files also in Vue.

That way, your IDE's ESLint extension will show you the errors, instead of Volar. See here for the extensions.

Here's a web demo:
https://ota-meshi.github.io/eslint-plugin-vue-demo/
As you can see, this demo shows linting errors even for generic JavaScript rules — see line 31 and the "no-unused-var" rule which comes from regular ESLint. This website just uses regular ESLint for this (that has plugins that makes it understand .vue files).

https://eslint.vuejs.org/user-guide/#installation (just don't use the @vue/cli option, use "install via npm" since there's no vue cli in vue 3)

https://vue-loader.vuejs.org/guide/linting.html#stylelint - this is a link from the Vue 2 days (I think) but stylelint seems to support vue files out of the box. To get linting information in VS Code, see https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

Related:

• Add custom formatter for each block, like vetur does #478
• https://github.com/johnsoncodehk/volar/blame/17b50db7dbcee55457fa55127ad93a3806111abd/extensions/vscode-vue-language-features/README.md#L107
• Tips #53 (Formatting tab size config & Change formatter)

[sethidden]

Made a demo quickly: https://github.com/sethidden/vue3-eslint-stylelint-demo . Lemme know if there are any problems. Make sure to install the eslint and stylelint exts for vscode

[johnsoncodehk]

@jd-0001 similar to #672, we need to with for plugin API(#185) implemented.

@sethidden do you want to change vue3-eslint-stylelint-demo to a template repo so that I add it to readme? I think some peoples interested in it.

[sethidden]

@sethidden done. Also added husky for pre-commit linting

[johnsoncodehk]

@sethidden added, thank you. :)

[jd-solanki]

Thanks @sethidden I was able to enable stylelint in SFC after refering to your repo, I just updated .stylelintrc.json to below:

{
    "extends": [
        "stylelint-config-standard-scss"
    ],
    "overrides": [
        {
            "files": [
                "**/*.scss"
            ],
            "customSyntax": "postcss-scss"
        },
        {
            "files": [
                "**/*.vue"
            ],
            "customSyntax": "postcss-html"
        }
    ]
}

had to install postcss-html.

I was already linting my template & script tag using eslint.

Btw, I am not using prettier because of they don't want to merge this PR.

@johnsoncodehk Shall I close this?

[johnsoncodehk]

I will close it because already has a similar issue #672.