vetur icon indicating copy to clipboard operation
vetur copied to clipboard

Published 20 hours ago • verified publisher icon vuejs

use vetur for files with extention other than `.vue`

Open lzl124631x opened this issue 3 years ago • 19 comments

I want to use vetur for files with extension .wpy instead of .vue. How to achieve this?

image

lzl124631x avatar Mar 04 '21 07:03 lzl124631x

https://code.visualstudio.com/docs/languages/identifiers

Follow the files.associations example here

jasonlyu123 avatar Mar 04 '21 09:03 jasonlyu123

@jasonlyu123 Thanks. But I have that already I think?

image

Updated the screenshot. As you can see, Vetur is working but complaining my legit vue content.

lzl124631x avatar Mar 04 '21 17:03 lzl124631x

Oh sorry jumped to the conclusion too fast. There's some code using the .vue extension to check if a file is a vue file or ts/js files. Those need to be modified to allow a non-vue extension. for example: https://github.com/vuejs/vetur/blob/7cf0b97fda4b4387ce2d7491f69522d5dbfce30b/server/src/services/typescriptService/serviceHost.ts#L301 The code here is used to tell typescript how to process the code. Maybe we can add a user config for other extensions.

On another note, maybe you can jump into it and try to implement it yourself. I am not a core maintainer but I think maybe this way it would have more chances to happens.

jasonlyu123 avatar Mar 05 '21 01:03 jasonlyu123

@jasonlyu123 Do you mean adding a new config entry in vetur.config.js? Something like the following?

settings: {
  extensions: [".wpy"]
}

lzl124631x avatar Mar 05 '21 06:03 lzl124631x

A rough PR for it https://github.com/vuejs/vetur/pull/2759/files

Haven't updated doc yet.

lzl124631x avatar Mar 05 '21 06:03 lzl124631x

https://github.com/vuejs/vetur/issues/1616#issuecomment-584924652 https://github.com/vuejs/vetur/issues/2573#issuecomment-747184865

We have refused to do this before But I'm not sure if there's a deeper reason.

yoyo930021 avatar Mar 05 '21 11:03 yoyo930021

I frankly don't think it's a good idea to limit Vetur to .vue files. There are variants of files using vue syntax but with other extention names. The one I'm using is .wpy (wepy) which uses vue syntax but is targeting WeChat App. Apparently there are other cases as well for example the one mentioned in https://github.com/vuejs/vetur/issues/1616. I don't see https://github.com/vuejs/vetur/issues/2573#issuecomment-747184865 as related because that specific to file associations.

I was using Vetur for .wpy fine before 0.22.4 (including) https://github.com/vuejs/vetur/issues/1491. I don't see benefit of limiting to .vue file.

lzl124631x avatar Mar 05 '21 18:03 lzl124631x

Ping.

lzl124631x avatar Mar 08 '21 07:03 lzl124631x

I will ask @octref about this question.

yoyo930021 avatar Mar 08 '21 09:03 yoyo930021

@yoyo930021 sorry to bother. Any updates? Thanks.

lzl124631x avatar Mar 11 '21 07:03 lzl124631x

I frankly don't think it's a good idea to limit Vetur to .vue files. There are variants of files using vue syntax but with other extention names. The one I'm using is .wpy (wepy) which uses vue syntax but is targeting WeChat App. Apparently there are other cases as well for example the one mentioned in #1616. I don't see #2573 (comment) as related because that specific to file associations.

I was using Vetur for .wpy fine before 0.22.4 (including) #1491. I don't see benefit of limiting to .vue file.

Also need support for .nvue (native vue)

mashirozx avatar Mar 11 '21 07:03 mashirozx

@lzl124631x @mashirozx What are they different without file extensions? Why do they use different file extensions?

The purpose of this project is Vue SFC support. We don't have enough time to maintenance other frameworks. If their spec is the same as Vue SFC spec, we probably accept them.

If not, I would suggest you fork the project for their own support.

yoyo930021 avatar Mar 11 '21 14:03 yoyo930021

@yoyo930021 Uni-app is a Vue based app development framework, just like React Native. Sorry I can't find their English docs, but it's really popular in China.

There can be .vue and .nvue files in a uni-app project. The .vue file goes into a webview based Vue compiler, and the .nvue file goes into native based weex compiler.

The .nvue file does follow the Vue SFC.

mashirozx avatar Mar 11 '21 15:03 mashirozx

@yoyo930021

Why do they use different file extensions?

Vue syntax is not necessarily used for only web development. Take WeChat App for example, there are several frameworks using Vue syntax but they are not targeting web browser, nor use .vue extention.

They are using Vue SFC syntax.

We don't have enough time to maintenance other frameworks.

Absolutely understandable. They are just vue variants. If Vetur doesn't support some of their special requirements, I absolutely agree that we don't need to support that -- we should only focus on Vue SFC itself.

But just allowing Vetur to do syntax highlighting can benefit lots of those devs using those Vue variants. The investment for us would be minimal, just allowing them to configure the supported file extentions. And the return is way greater -- all those devs will appreciate it.

lzl124631x avatar Mar 12 '21 01:03 lzl124631x

@mashirozx @lzl124631x I can read Chinese, so I read all the framework documents.

Uni-app is based on Vue and explicitly conforms to Vue SFC spec in their document. I will consider accepting PR, but we don't maintain different Vue parts. I will indicate this in the document and close the invalid issue.

wepy is using .wpy. See code sample in doc mpx is using .mpx. Example

In their document, it is only a framework and like Vue syntax. Ref: 类 Vue 开发风格 There is a big gap in many parts of the actual. I don't think vetur can provide any practical help.

But just allowing Vetur to do syntax highlighting can benefit lots of those devs using those Vue variants. The investment for us would be minimal, just allowing them to configure the supported file extentions. And the return is way greater -- all those devs will appreciate it.

If you only want syntax highlighting, you can copy vue syntax highlighting and open a new project. Here: https://github.com/vuejs/vetur/tree/master/syntaxes

Or set files.associations in vscode, syntax highlighting is work in vetur. Maybe try https://github.com/znck/vue-developer-experience/tree/main/extensions/vscode-vue

yoyo930021 avatar Mar 12 '21 02:03 yoyo930021

@yoyo930021 Thank you！

mashirozx avatar Mar 14 '21 16:03 mashirozx

@yoyo930021 Thanks for the recommendations.

Or set files.associations in vscode, syntax highlighting is work in vetur.

I've set this one so the Vetur is "working" on my wpy file. However, it shows error all over the place (as you can see in the first screenshot). Is it a bug?

lzl124631x avatar Mar 15 '21 07:03 lzl124631x

@yoyo930021 Thanks for the recommendations.

Or set files.associations in vscode, syntax highlighting is work in vetur.

I've set this one so the Vetur is "working" on my wpy file. However, it shows error all over the place (as you can see in the first screenshot). Is it a bug?

截圖 2021-03-15 下午3 13 50 Close all validation.

yoyo930021 avatar Mar 15 '21 07:03 yoyo930021

FYI I recently did this in a (albeit highly customized) fork of Vetur here and here: Going from hard-coded .coffee (already externalized to FILE_EXTENSION to accepting DEFAULT_FILE_EXTENSION and any more file extensions the user might want. I added get_file_extensions to EnvironmentService, which integrates files.associations. A problem here is: tsserver serviceHost needs unambiguous extensions, but VSCode files.associations allows for more complicated glob patterns. I solved this by omitting all associations that don't match exactly /^\*\.[a-zA-Z_0-9-]+$/. I think this is reasonable, as *.custom-ext will be the pattern that the vast majority of people use, and it's suggested by vscode settings this way. Maybe this helps if someone ever wants to tackle this issue.

phil294 avatar Mar 11 '22 13:03 phil294