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.
Related
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.
VSCode is built on top of MonacoEditor which doesn't support Textmate grammars and themes. But somehow VSCode made it possible. I am curious how VSCode is able to do this.
I am asking because I am making a code editor (based on Monaco) with TextMate grammar and theme support. But I am unable to understand how I can achieve it.
Though there are packages like monaco-textmate to make TextMate grammars work with Monaco, syntax highlighting is still not working properly.
TextMate grammars depend on a particular regex implementation / library called Oniguruma, which is implemented in C. Monaco however is designed to run in the browser, and the JavaScript regex engine available there is not compatible with Oniguruma. All of this is explained in detail in the "Why doesn't the editor support TextMate grammars?" section of Monaco's FAQ. It also mentions the possibiliy of perhaps eventually compiling Oniguruma to WebAssembly to work around this.
VSCode itself uses vscode-textmate for its TMLanguage handling, which has the Oniguruma library as a native dependency. VSCode can have native dependencies because it doesn't run in a browser environment.
According to monaco-textmate's readme, it is actually heavily based on vscode-textmate:
99% of the code in this repository is extracted straight from vscode-textmate
And it does use the WASM approach mentioned earlier:
monaco-textmate relies on onigasm package to provide oniguruma regex engine in browsers. onigasm itself relies on WebAssembly.
As to why syntax highlighting doesn't always work as expected with monaco-textmate... I have no idea, I expect this is simply a bug in the implementation. Perhaps wait for a response from the maintainer, the issue you linked is fairly new.
At least conceptually there shouldn't be a reason why it couldn't achieve the same syntax highlighting VSCode does, since it uses the same regex flavour.
I wrote a VS Code extension to support printing. Since all the recent issues have been concerned with issues relating to foreign character sets, it seems like I should support languages other than English.
But I can't find anything in on localisation in the VS Code API documentation. There's a section on languages but that's about parsing and syntax colouring etc for computer languages.
Is there any support or at least convention regarding localisation of VS Code extensions?
Thanks to Gama11 for pointing me at good resources.
Yes, this is possible, and there is actually a I18n sample extension for this:
https://github.com/microsoft/vscode-extension-samples/tree/master/i18n-sample
It's best if you read the readme, but the basic idea is the following:
use the vscode-nls-dev NPM package
use NLS identifiers such as "%extension.sayHello.title%" as placeholders for command titles and such in package.json
similarly, in JS code NLS identifiers can be translated with a localize() method imported from vscode-nls
have a toplevel i8n directory that contains the translations for those identifiers for the languages that are supported in <file-name>.i18n.json files
Alternatively, you could also take a look at how the C++ extension does it:
https://github.com/microsoft/vscode-cpptools/tree/master/Extension
They seem to take a slightly different approach: no i8n directory, but instead have the translations directly next to the file (package.nls.it.json, package.nls.zh-cn.json and package.nls.json with the default / English). I'm not sure if it translates anything outside of package.json / in JS code though.
The official l10n (localization) sample extension should help a lot, as the old i18n (internationalization) sample has been deprecated.
Clone it here: https://github.com/microsoft/vscode-extension-samples/tree/main/l10n-sample
I've noticed that it does auto completes CSS properties and values, but not the case with SCSS.
Check out the sass-textmate-bundle port for ST2. According to the readme,
This add-on adds syntax highlighting and tab/code completion for Sass and SCSS files. It features Zen Coding shortcuts for many CSS properties, making you look like some kind of stylesheet wizard to everyone around you. You've got to like that.
You might also want to take a look at SublimeCodeIntel. While not specifically for SASS/SCSS, it features context-sensitive autocomplete based on what you've already typed in the file, so it may be useful on top of what ST2 already provides.
Both of these are available through Package Control.
I really enjoyed defining syntax highlighting rules in Notepad++ for the various build logs and artifacts I've worked on in the past to make certain text markers pop out. I was wondering if VSCode has any capabilities to do likewise.
For reference to the unfamiliar here's the Notepad++ documentation and a live demonstration:
https://npp-user-manual.org/docs/user-defined-language-system/
How to Create Custom Language Definitions in Notepad++
Looks like there is support for something in this direction. The terminology is slightly different though and there may not be a GUI interface like Notedpad++
Declarative Language Feature
Syntax Highlight Guide: VS Code uses TextMate grammar for syntax highlighting. This guide will walk you through writing a simple TextMate grammar and converting it into a VS Code extension.
Create Custom Language in Visual Studio Code
https://code.visualstudio.com/api/language-extensions/overview#declarative-language-features
https://code.visualstudio.com/api/language-extensions/language-configuration-guide