I'm building a custom IDE (using Electron) and am trying to integrate Volar into VS Code's Monaco Editor.
Currently I have no syntax highlighting for .vue files:
My understanding is that I need to run an LSP server in a separate process and somehow connect that to Monaco using web-sockets? I'm not going to lie, I'm having a hell of a time figuring this out. And there don't seem to be any documentation/examples for this online (as of 2/20/22). Every attempt I've made so far at getting this to work has failed :(
Has anyone successfully connected Volar to the Monaco editor?
Any help would be greatly appreciated, thank you.
EDIT: see https://github.com/Kingwl/monaco-volar
See https://github.com/johnsoncodehk/volar/discussions/598 and https://github.com/johnsoncodehk/volar/issues/612
There's no Monaco support yet for Volar.
If somehow possible, you could play with the Monaco settings to maybe treat .vue files as HTML, that way you'd get some very basic (no TypeScript) syntax highlighting - after all, <template>, <script> and <style> are regular HTML tags.
Related
I've just started using the Vetur VS Code extension for formatting .vue files. Everything seemed to work fine (syntax highlight, EMMET, etc.), but it just doesn't want to format the JavaScript code in tags. "Prettier" can't format it either. I tried to tweak my settings, tried disabling Prettier and Vetur respectively, but nothing seems to work. Code formatting is fine in and , though.
Now the project I'm going to be working on doesn't have any build steps, it uses Single File Component loader, so ESLint and Prettier in my build tooling is out of the picture. Plus, I'd rather have these tools in my IDE/Editor.
Where could the problem be? It looks like some sort of bug to me, I just don't know in which component: VS Code? Prettier? Vetur?
Thank you!
I'm working on my first Vue project in the company that I work. I have noticed when I run the project I get warnings that they have be fixed using --fix all the warnings are related with indentation, spaces, new lines and things like that. Is there a formatter for Vue? I was using the default VS Code format on save but didn't help with the warnings.
As of this writing, the gold standard for linting JavaScript is eslint. For Vue, you can use eslint-plugin-vue.
The user guide will walk you through how to install and configure, and how to integrate it into your editor.
When I am editing a file with the Vue extension in VS Code I do not get Syle intellisense in the HTML. If I change the Language Mode to HTML then it works but I no longer get Vue intellisense.
Is there a way to make this work in a Vue file?
Absolutely, you can install the following extension: Vetur. It has great features like linting, formatting, snippets and of course syntax highlighting.
I'm a vue.js beginner and I've been trying to integrate the Quill editor into Vue modules. At first, I tried with the vue-quill plugin but documentation is very poor and I couldn't understand how to use it. Very frustrating.
Now I don't know if I'm better off trying to create my own plugin or if I give the existing plugin a second try and maybe try to enhance it.
What I want is someone to please provide some sample working code to get this going.
Upon inspecting the vue-quill package.json file I noticed it depended on an old version of quill :
"dependencies": {
"quill": "^0.20.1",
...
}
Since I was getting fragment errors from that build I decided to take the original code to suit my needs. At this point, you can copy this modified component and use something like vue-cli to use it.
I can't give you precise steps on vue-cli because my project is based on Laravel, but the idea of storing different .vue files into a components folder should be similar.
Finally, I simply use the component in one of my views :
<quill :content.sync="content"></quill>
Note : I am still fiddling around the component that I uploaded on gist, so take it as a starting point. The code is fairly simple.
I am using Mocha+Chai for a current Node.js project. My IDE is Webstorm 11.
Unfortunately, it seems Webstorm has no way of figuring out how language chains in Chai's should/expect are supposed to work. The following is commonplace:
I have tried explicitly setting both Chai and Chai-DefinetlyTyped as libraries for my project via Settings->Javascript->Libraries, but this does not resolve anything.
For the sake of tool support, I have considered dropping expect/should for assert instead, as this works perfectly. However, I very much prefer the style of expect/should, so it would be amazing to see a solution to this.
Problem is caused by weird dynamic way these chains are defined. As a workaround I can suggest using chai.d.ts:
Open "Settings | Languages & Frameworks | JavaScript | Libraries"
Click "Download..." button and select "TypeScript community stubs"
Find "chai" and click "Download and Install".