VS code's auto completing isn't working React JSX code - visual-studio-code

I want to autocomplete my code while typing in React JSX code for fister typing But that's not happening. Should I need any additional extensions for that, if yes? any preference for an extension.
If not then what should I suppose to do?

Related

How do I get imports to show up when I press ctrl+dot in javascript in vscode?

When writing JSX (or any typescript code really) if you have an available import that's not yet imported, you get a squiggly line under it and can press ctrl+dot on it and then automatically import the code as a "refactoring."
How can I set this up in Javascript? I've seen a screenshot of someone else's VSC where it is available underneath "more options" and so I'm pretty sure it's possible, but when I press ctrl+dot I get nothing.
Note: I'm aware I can press ctrl+space. However, I don't want to do this, for two reasons. (1) alt+space is pretty bad UX because if you press it in the middle of a word it continues to autocomplete even if you already had the full name there and so you are left with an incorrect tag (e.g. if your cursor was after the d in Keyboard for a component called KeyboardRow you are left with KeyboardRowRow) and (2) I want to rebind quick fix to alt+enter to match pycharm; and I want the same hotkey & UX in both Typescript and Javascript.
I haven't worked too much with JS, mainly with TS, but I have two extensions installed in my vscode that helped me a lot while coding in vanilla JS.
Path intellisense and Auto import
You can try if My Code Actions can be used to construct a Quick Fix for these types of PROBLEMS/squiggles

IDE shortcuts - intelij IDEA to VSC

In intellij Idea, I could type "psvm" for a main method, and "fori" to get a for loop, and "sout" to get a system println, is there a way to customize intellisense in visual studio code to get the same behavior?
VSCode has many extensions that provide "snippets", shortcuts for code segments like you mentioned. The C/C++ extension which you might already have installed provides some for C++, such as main for a main method and for for a for loop. If you have the extension installed, snippets work exactly like other intellisense suggestions; you can simply type them and then press enter or tab to apply them.
You can also look for other snippet extensions by searching for #category:"Snippets" in the extension section.

Is it possible to create an extension to vscode that changes the CSS of the editor?

I wish to develop an open-source WYSIWYG editor for markdown in vscode.
See the image below. I want an extension that can do something like that.
Change font-sizes for lines for titles.
Change lines indentation for subtitles.
I'm looking at the extension reference: https://code.visualstudio.com/api/references/vscode-api and don't see something that can help.
Do you have an idea how to change the CSS of the editor based on rules? in addition, If you have a link to extension that did it may help.
In other words: How a vscode extension can change css style of the editor window?
You can't change arbitrary css in the editor. See the extension guide for info about the VS Code extension philosophy and how you can extend VS Code
Two options:
Use the decorations api to change rendering of tokens in the editor.
Use a webview to implement a custom view (but don't try re-implementing a text-editor because it will be a pain and will not work like VS Code's normal editors do)

I've moved over to VSC from ST3, but there is no namespace auto finder/user to my knowledge, do you know of a plugin to achieve this?

I've moved over to VSC (visual studio code) from ST3, my only problem is there is no namespace auto finder/use to my knowledge, do you know of a plugin to achieve this?
For example, if I done a method like so in sublime:
public function getJob(User $user)
{
//nothing just a testmehthod
}
and I pressed f5 over the User It'd import it, or if I pressed f6 it's include the full namespace... Any plugin for VSC like this?
VS Code does have a 'quick fix'. In C# it will auto add using statements if they are missing for the statement under the cursor. The default keybinding is "ctrl+." according to the vscode documentation keybindings page.
Not sure which language you're using so I cannot test it locally. I don't know which languages it works for or if other plugins are needed to work for more languages.

How to have JSX validation and highlighting in .js file in VSCode?

I am trying to work on a react with flux project using VS Code. The VS Code will give errors and warnings for the JSX in the .js files. I keep the .js extension instead of .jsx as I want the intellisense from VS Code.
How can I have JSX validation and highlighting in .js file in VSCode? Or, is there a way to have proper JSX validation and keep the intellisense in VSCode at the same time?
VSCode (v1.0.0) added new way to associates files. Select language mode and choose Configure.. . To add jsx syntax capabilities and goodies in your file you can edit the file.associations.
"files.associations": {
"*.js":"javascriptreact"
}
If I understand you correctly, if you have a .jsx file extension or manually select the JavaScript React language mode, you get validation and highlighting, but no IntelliSense. If you change the language mode or file extension to JavaScript, you get IntelliSense but don't get the validation and highlighting.
To manually select a language mode, open the command palette (ctrl+shift+p or cmd+shift+p) and start typing 'language'. Select 'Change Language Mode' and then select 'Javascript'.
Unfortunately for now there is no way to have both at the same time. You'll have to wait for the language services to be updated or try to create your own extension to fill the void.