I am developing a VS Code extension that offers auto completion and hover information about my custom web components library.
I am using Custom Data Extension API to do that, but I have found that the only allowed contribution point are HTML and CSS, and that's a problem for me as I want to make my extension work in JSX files that uses my components in their React version (for instance: <MyComponent> instead of <my-component>)
I have not been able to find if this is possible, or so far, it seems not to be.
Any idea if this is supported by the current VSCode API?
Originally answered by Simon Chan on Github
Usually providing completions for JSX is by writing a TypeScript definition file. The documentation is at https://www.typescriptlang.org/docs/handbook/jsx.html#intrinsic-elements
This file is usually distributed in an NPM package. I can't remember the rule for loading ambient definitions #mjbvz. Maybe it must be a #types/X package, otherwise the user has to edit their tsconfig.json or adding a /// <reference in their source files.
If you want to go the hard way by creating a plugin for TypeScript server that provides custom completions, I can only say it's not impossible. The related contribution point is typescriptServerPlugins: https://code.visualstudio.com/api/references/contribution-points#contributes.typescriptServerPlugins.
Related
This might be a trivial question but why isn't jsx and tsx on github's recognized languages list? Is it because they are simply extensions of js and ts? If so why don't they show up when you look for all javascript files?
You can see jsx listed as one of the extension of Javascript in the syntax highlighting GitHu support of github/linguist
As Reacts itself defines JSX:
It is called JSX, and it is a syntax extension to JavaScript.
We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.
So yes, those Javascript/Typescript extension are part of the same base language as far as GitHub search is concerned.
I am totally new to creating extensions in VS Code, and all the official examples of extensions are written in Typescript/Javascript, which I have no experience with. Is it possible to create VS Code extensions in other languages, such as Python or C++?
If so, could anyone point me to any resources to get me started?
It is possible by creating a C++ module for Node.js, which can then be loaded like any other node module. Of course, some glue code written in JS or TS is necessary to register the extension and translate calls to/from vscode.
I've gone this way in my ANTLR4 extension, but gave up eventually, because of the troubles I had due to incompatible dependencies (you have to make sure the extension uses the exact same V8 version, which was used to build the underlying Node.js used by vscode, on all supported platforms).
This situation might have change, I don't know, but with that in the background I don't recommend it.
If you want to add support for a new language in vscode you can also write a separate language server, as is mentioned in the linked SO answer. For other type of work, I'm afraid, you have no alternative to use.
No, as #rioV8 said, since VSCode is an electron app and runs on Javascript.
Goal
I want to have a webview, that embeds the native editor (see image).
The embedded part does not need to have a tabbing-feature. It would be enough to have the editor object, that I fill and update manually per Javascript.
Question
Is that possible? How would I do that?
Background
I want to show various file contents within my own webview. These contents should be editable and have all functionality, that the vscode editor has (e.g. syntax highlighting, multiple cursors, intellisense,...). At best, also 3rd party extensions should work within them.
I don't want to start implementing the whole editor again, so I'm searching for a way to embed the editor.
It is not possible to embed the native editor that comes with VS Code. The extension API simply does not support it.
The closest you can get is to import the code of the editor into your webview. The editor is called Monaco and is available via the npm package monaco-editor. It supports most (or all?) of the features offered by VS Code editor, such as IntelliSense.
However, since this editor would be unaware of the installed VS Code extensions, themes and configuration options, it will behave differently than native editors. You might be able to improve the user experience by manually propagating configuration options and themes, but this would require a significant amount of work and might not be possible for other things, such as support for language servers or third party extensions.
I'm developing an extension in VS Code to add language support for OpenSCAD (Script-based 3D modeling program). Currently, I have been working on a way to open / preview a file in OpenSCAD from VS Code, which I have been able to do successfully using my own preview manager.
My issue is that I want to add configurable naming formats when exporting an OpenSCAD file that use environment variables similar to those used in the tasks.json file. More info can be found here: https://code.visualstudio.com/docs/editor/variables-reference. As an example, taking the file test.scad and the export configuration ${fileBasenameNoExtension}.stl would export to the file test.stl.
Additionally, I want to add a custom variable, ${#} that would evaluate after all other variables as a unique version number to avoid duplicate exported files. Using the example file: test.scad and the export configuration, ${fileBasenameNoExtension}_${#}.stl, the extension would export to the file test_1.stl for the first time. Then, seeing that test_1.stl exists, it would export to test_2.stl, and so on. I implement similar functionality in all of my exporting utilities, so it is important I can implement it here.
Now that the intro is done, on to the actual question: To anyone who knows more about the VS Code API than I do, in order to best get the functionality described above, should I implement environment variable evaluation into my custom preview manager or reimplement the preview manager I have using tasks? Because I have already implemented my own preview manager that I am happy with, I would prefer to do the former. However, I have been unable to find any functions in the VS Code API that will evaluate the environment variables in a string. Is there a typescript function to evaluate environment variables in the API that I have missed?
If re-implementing this functionality using tasks is a better way to achieve my goal, would I have to sacrifice the control I have in my preview manager, such as being able to selectively kill open previews and dispalying active exports?
Or, is there a compromise that could use all of the power from tasks without losing any functionality I've already developed?
Link to branch of my extension's repository: https://github.com/Antyos/vscode-openscad/tree/PreviewModel
is it possible to create a new editor that includes custom markup? I went through the docs and couldn't find any extension to get it done.
My requirement is to develop an interactive graphical editor (with SVG) to manipulate text content in a file. I want to use third party css/js libs to implement the markup of the editor and at the same time using VS Code APIs fetch/update content of the current file, fire/listen to VS Code events, etc.
Extensions have very limited ability to manipulate the editor's UI. It seems to me that you have two choices:
If you need this capability to be unified with the editor, you will almost certainly need to fork VSCode.
If you don't mind your added functionality being external to VSCode, you could create an extension with a language server that implements your UI. The language server would run in a separate process, but would still be able to interact with VSCode through the extension.