VS code formatting breaks the code unexpectedly in .js files - reactjs

I am a newbie in React. I am using vscode. Whenever I save app.js file, it formats the whole code and throws errors.
I tried reinstalling vscode. I am also not using any formatting extensions. Where is it getting wrong?

As the other answer already mentioned, a prettier extension could solve the issue, but fundamentally this is because the VScode reads the program as js instead of Jsx. You can select the right language from the bottom panel as you can see from the image. So for the sake of it, I'll post how I do it as well.
Once you click that, a command pallet will open asking you to choose the language you want. Type react and choose the first option. This will clear the issues and read the program as JSX and all snippets if not working will function as well.

Until you are comfortable with keyboard shortcuts refer following steps:
Go to File > Preferences > Settings > User > Text Editor > Formatting
Uncheck format on save option.
I would also recommend using prettier extension.
Install Prettier extensions
Open any file and Right click in the content area
Click Format document with and choose prettier

Related

Autocomplete JSX html tags in VS2019

Two IMPORTANT clarifications first:
1. I'm looking for advice about VS2017/19, NOT VSCode.
2. I've looked through other threads about this. Link them if you so desire, but please explain what you want me to see in those threads.
Problem:
When I write html in a .tsx file, it does not autocomplete the html tags. (It does recognize the html tags, however - no problem there).
Attempted solutions:
1. In tools > options > text editor, I looked for settings pertaining to JSX. Under HTML I see the setting for autocompleting tags. However I do not see anything for JSX. I see typescript, but there are no settings there about jsx.
2. I've looked into creating my own legacy language service. This looks like it may work but is sort of reinventing the wheel. I can't believe it would be so hard to get autocompletion in JSX.
3. There may also be some extension I can write? I'm not familiar with writing vs extensions.
On learn.microsoft.com/en-us/visualstudio/javascript/javascript-in-vs-2017?view=vs-2019#/JSX they say "JavaScript in Visual Studio 2017 has rich support for the JSX syntax that allows HTML tags within JavaScript files." It really seems to imply that what I'm looking for exists... somewhere.
Any help is appreciated. Thanks.

Using FileChooser in Codename One

I am trying to use FileChooser in cn1.
I have followed the instructions here:
Codename One
and
GitHub
I added the extension and then refreshed my cn1libs
Once this was done I added the code sample to my code but it underlines the word FileChooser in red and gives me the error that it cannot find symbol.
When I hover over the line it asks if I want to create a field called FileChooser
Normally when I add a new lib it will automatically import it - but I do not see an import statement at the top of my code. Perhaps I need the import? If so please can someone give me the path as I do not know whereabouts the actual lib resides?
Any advice is appreciated
Thanks
Check in your project lib folder to ensure the CNFileChooser.cn1lib exists.
If it does exist, clean and build your project to see if this will fix the import.
You could also try Ctrl+Shift+i to fix import on Windows Netbeans or Cmd+Shift+i on Mac Netbeans.
Before you do Refresh cn1lib files, make sure your code is error-free (i.e no red underline). Comment out erroneous codes and uncomment them after the refresh.
Be sure to import com.codename1.ext.filechooser.FileChooser and not javafx.stage.FileChooser.
If the problem persists, kindly share your operating system and IDE details here to get further assistance.

How to customize file type '*.react.js' to syntax associations in Sublime Text?

Right now on the project we use *.react.js as type extension for JSX files for some reasons.
Is it possible in Sublime Text add custom file extension with *.react.js pattern (i.e. using dot sign in the extension)?
I know that it's possible write py script to handle it, but maybe I missed something in settings.
This doesn't directly answer your question, but I think it solves your problem. ST has the babel extension, which works great for JSX and JS files alike. You could use that for all files with .js extension and I think you'll be good.
Another reason not to go down the extension rabbit hole is that these days it's recommended that JSX files end in .js, making it even harder to differentiate. But Babel highlighter solves all.

New Gui does not accept placement "Right" on a command

I try to add a command on the new Gui with right placement but it adds automatically overflow to the .java file.
The Preview design shows it correct https://gyazo.com/eef78ee9d564c6957e62148db50e6bc4
but the simulator shows as overflowhttps://gyazo.com/a4023a18e48ee19a89bc86e294b5434f
Is it a bug?
Thanks in advance
This seems to be a bug in the GUI builder, we filed a lot of issues so please file this there too. It should work although might require you to go thru the steps again.
I would also suggest looking within the .gui file and seeing that the command generation looks correct.

this[a] has no properties in ext js

I am new to extjs. I have to display a form and and a grid in one page. Grid is showing properly. and the form field are not displaying. In script error it is showing error in ext-all.js. what may be the problem when showing "this[a] has no properties" in firefox script errors? please help me to complete this task.
This usually happens when you refer to an object/widget which is not yet being rendered (But you suppose it to be).
Use the ext-all-debug.js version of Ext to get a better error message. The Ext JS library ships with two files which contain the library (ext-all.js and ext-all-debug.js)
ext-all.js has been run through the YUI Compressor tool and has removed all whitespace, line breaks and comments. YUI compressor will also rename variable names to short versions like "a".
If you use ext-all-debug.js you will receive a better error message.

Resources