[drakonkat]

There is no formatting profile for jsx code? because for now the normal formatting of jshint installed with the react package make jsx code not working.

Example:
<Text> Hello World </Text>

Become

<
Text
> Hello World <
/ Text
>

There is another way to make the formatter works? [I used the jshint [bulti-in] provided by the extension pack for react]

[Brian Fernandes]

We were trying to reproduce this bad formatting, but were unable to do so – mostly it’s only the JSX indentation that is corrected, or it is left entirely alone – the formatting never breaks the code.

I was not sure about what you meant by “formatting of jshint installed” – as the JS Hint extension is not supposed to be formatting code.

Perhaps we have misunderstood your case – can you please explain whether you are explicitly formatting the code (using the context menu, or Ctrl + Shift + F shortcut) or is the code being automatically formatted on save or applying some fixes?

[drakonkat]

Hi,
i will try to update image and screen to explain the problem. I have installed eclipse and codemix from 0, with react pack, after that i have imported a react sample project.
Now i will attach the image before formatting and after, and the formatting configuration which i have tried. Yes the formatting is made with ctrl+shift+F, on save or from formatting menu i have tried all and have the same problem.

Attachments:

You must be logged in to view attached files.

[Brian Fernandes]

Thank for the screenshots – that really helps us understand the points you were making.

1) Though I cannot see it in your screenshots, it would appear that these files are being opened in the JS editor, and not the React editor. What are the extensions you have used for your files – are they .js or .jsx?

You can confirm the editor being used by right clicking the file and choosing Open With – does the editor show up as JavaScript :: CodeMix or JavaScript React :: CodeMix?

2) We noticed that if the files are opened in the JavaScript :: CodeMix editor, then the formatter does destroy the code as you described. Please note that while a CodeMix editor is in use, the formatting settings you are pointing to will have no effect, as these settings affect only the Eclipse JavaScript editor – we will try to make this more clear in the future.

You have a couple of options – I’m assuming your files are named .js and are opening in the regular JavaScript editor. Unfortunately the only way to reliably open them in the JavaScript React editor is to rename them to have a .jsx extension. Once opened in this editor the formatting will be fine, you should also have access to other react specific capabilities. I would recommend this option.

The other option would be to disable the Beautify extension, which is responsible for the bad formatting when opened in the JavaScript editor. You can do this from Help > CodeMix Extensions and clicking the check to the left of the extension name to disable it. You could install the Prettier extension for better formatting in such a case.

Do let us know if this helps.

[drakonkat]

Hi,
i opened the file in the Javascript React :: CodeMix editor as you suggest using the “OpenWith” command, but i have the same result, i will attach the screenshot, as soon as possible i will try to disable Beautify, do you have a guide to disable it?

Attachments:

You must be logged in to view attached files.

[drakonkat]

UPDATE:
I have tried to unistall Beautify but give me error, that i have to unistall react code pack but i need it to develop with react. And i have tried to work with a jsx file but i have the same formatter error. Maybe i’m using a wrong version of Eclipse? I want really use react-native/react inside eclipse but this formatting error make codemix unusable. The Eclipse version is the last take from the official site

Attachments:

You must be logged in to view attached files.

[Brian Fernandes]

You could just disable the Beautify extension by clicking the yellow circle with the check, please see the attached screenshot, hopefully that makes it clear.

Can you tell me how you associated JS files with the React editor (the React editor does not normally show up in the Open With list for JS files) – there are different preferences that you can change to make it appear, but would like to know exactly which setting you used.

Thanks!

Attachments:

You must be logged in to view attached files.

[drakonkat]

Sure i can, i just make right-click on the file->Oper with…->Others… then was opened to me the attached screeenshot. I hope it is clear, on the bottom there is a checkable voice for all js file “Use it for all ‘*.js’ files”.

Attachments:

You must be logged in to view attached files.

[drakonkat]

I have just tried to disable Beautify, and seems to work now the formatter. So thank’s i will try now to use it for my project and i hope to give a good review to the software and buy it if is fully usable

[Brian Fernandes]

Appreciate the info, and I’m glad it’s working now – thank you for confirming.

We were able to replicate what you just said, the Beautify extension changes its behavior based on the file extension – if it’s js it seems to treat it as standard JavaScript, if the extension is jsx it works correctly. Any reason why you’re using the js extension?

Do let us know if you encounter any other issues with CodeMix, we’ll be happy to help.

[drakonkat]

I use js just because standard project created with react-native init create js file, and i continue to use this extension. I think it’s useful for people which migrate from VSCode to Codemix IDE to know this little workaround to resolve formatting problem in “Beautify”.
Thank’s for the help i hope will be improved the react-native intregration in code-mix, and maybe new features

[Author]

Posts