Codesandbox-client: Support pug in .vue files

[zephraph]

It was mentioned in #199, but having support for pug files in vue's single file components would be nice.

Generally vue-loader supports pug out of the box when it's installed... but it looks like it might be a little more involved here.

I can do a PR if desired, but I'm not sure I'll catch all the references.

Files to update:

• .../Frameworks/index.js
• .../Frameworks/icons.js
• /packages/app/src/sandbox/eval/presets/vue-cli/index.js
• /packages/app/src/app/components/sandbox/CodeEditor/Monaco.js

Files to add:

• .../Frameworks/pug.svg logo
• .../Frameworks/pug.png
• /packages/app/src/sandbox/eval/transpilers/pug/...

Did I miss anything?

[tristan-shelton]

This is a huge one for me. I hardly ever write HTML components any more.

[zephraph]

I'm gonna give it a go. 🤞

[lbogdan]

Added in #443 .

[pbastowski]

Is it possible to add code colouring for the PUG code in Vue components?

Currently it looks like this:

I would expect the code to be coloured, something like this (the colours are from another editor):

In pug files the colouring is already supported, see below, just not in the template section of a .vue file (or is there a way to enable it already?):

[unickhow]

@pbastowski
try to turn on the setting 'Use CodeMirror' and it will looked better

[pbastowski]

That works. Thanks :) the color scheme is not as nice, though.