Pug syntax highlight

[jasonlyu123]

Is your feature request related to a problem? Please describe.
Provide basic support for pug markup. Related: #106

Describe the solution you'd like
VSCode's syntax highlight is done by Textmate grammar. Basically it's defining some regex pattern to tokenize the code. And we could include other languages' rules as long as vscode knows how to deal with the included language.

I am not using pug so I don't know about pug syntax. It would be great if anyone with more experience with svelte-pug can help.

General guide on how to implement it
It's not hard to implement. First, fork this repo and follow the development instruction. Follow the vscode's official guide for syntax hightlight. Add the patterns needed to the syntax file which is located in packages/svelte-vscode/syntax.

It seems like syntax for the pug in svelte is similar to Vue's. So we could probably copy some code from vetur

This for defining a block to start and end identifying pug syntax:
https://github.com/vuejs/vetur/blob/master/syntaxes/vue.tmLanguage.json#L87

This for telling vscode that we have embedded pug code
https://github.com/vuejs/vetur/blob/master/package.json#L119

These two would add the basic syntax highlight. What's left would be adding svelte specific syntax like +each('posts as post') under pug patterns. Add more patterns and link them to the existing syntax token.
For example each block:

        "svelte-pug-each": {
            "begin": "(\\+)(each)\\(",
            "beginCaptures": {
                "1": {
                    "name": "punctuation.definition.tag.begin.svelte"
                },
                "2": {
                    "name": "keyword.control.conditional"
                }
            },
            "end": "\\)",
            "endCaptures": {
                "0": {
                    "name": "punctuation.definition.tag.end.svelte"
                }
            },
            "patterns": [
                {
                    "begin": "'",
                    "end": "\\s(as)\\s+",
                    "endCaptures": {
                        "1": {
                            "name": "keyword.control"
                        }
                    },
                    "patterns": [
                        {
                            "include": "source.ts"
                        }
                    ]
                }
            ]
        }

[jasonlyu123]

It seems like the svelte-preprocess' pug syntax is using pug's existing syntax. So we could just copy the corresponding syntax from vscode's pug syntax and modify it to suit our need

[dummdidumm]

Basic highlighting done through #371 . Maybe this is already enough? The svelte-specific syntax seems to highlight just fine.

[b1mind]

@dummdidumm YAY!!

Seems to be working, not sure why but it seems partially break in the if/else params . I thought it was template lits at first but as shown in the screen even without the colors are a bit off.

Also the component coloring below the template element seems to change (which does not really matter unless your mixing in html too like I am here for demo).

Super happy about seeing this progress, sorry I was late to test it.

[b1mind]

I appreciate you working on this. So I am finally able to get back to my Svelte project and noticed something is def killing the highlighting.

EDIT= removed image while it was passing it was not valid syntax for use with Svelte vars inside a element prop via preprocessors readme.

it seems to break with the " when defining some things within ( ) in loops and if checks though.

[rodshtein]

JSDoc is't work for pug.
For example It works on html tag inside pug template

Component

[hoishing]

Thanks for the great work! btw, seems inline function is not supported at the moment, say on:click="{ () => doSomething }" will raise errors.

[dummdidumm]

Intellisense support is tracked in #106 .