I've the following snippet in my index.js
class App extends Component {
render() {
return ( <div style = { styles.app } >
Welcome to React!
</div>
)
}
}
The code works, but every time I save (ctrl+s) visual studio format the jsx like that:
class App extends Component {
render() {
return ( < div style = { styles.app } >
Welcome to React!
<
/div>
)
}
}
How can I solve this? thanks
In the end what did the trick was changing the file format from JavaScript to JavaScript React on the bottom toolbar.
I'm publishing it here for future reference since I didn't find any documentation on this topic.
In addition to the above. If you click 'Configure File Association for .js' you can set all .js files to Javascript React
change vscode preferences settings > user settings below:
"files.associations": {
"*.js":"javascriptreact"
}
You can prevent VSC from incorrectly formatting your JSX by adding an association in your settings.json
Code > Preferences > Settings
In the settings window search for associations, click edit in settings.json and then add:
"files.associations": {
"*.js": "javascriptreact"
}
Alternatively, saving the file with a .jsx extension resolves this in vscode.
I had the same challenge and I am hoping to discover a better way of handling this issue in vscode.
I noticed your suggested work-around has to be done each time you open the react file with an extension of .js
Open the Visual Studio Code Settings. Refer the image below to see how to navigate to the settings.
Once the settings tab is open. If you want to make the settings changes for all the projects then select the User sub tab, if only for current project then select the Workspace sub tab.
type "file associations" in the search text box and press Enter.
Click on add item.
set Item : *.js
set Value : javascriptreact
Above changes will start associating all *js files in the project as javascript React files.
Next open any .js file in your project and right click and select Format Document. If you have multiple formatters then associate your favorite formatter. I have used Prettier to handle my formatting.
Install Prettier (if not installed by default) and try to add this to your user or workplace settings:
"prettier.jsxBracketSameLine": true
Do not put linebreak between return and the returned JSX expression.
Trigger autoformat (Alt+Shift+F) and check if works.
I struggled with this but finally found a solution. This is my settings.json
{
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"workbench.startupEditor": "welcomePage",
"window.zoomLevel": 1,
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html"
},
"editor.formatOnSave": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"editor.wordWrap": "on",
"editor.tabSize": 2,
"editor.minimap.enabled": false,
"workbench.iconTheme": "vscode-icons",
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"beautify.ignore": [
"**/*.js",
"**/*.jsx"
],
"prettier.jsxSingleQuote": true,
"prettier.singleQuote": true
}
I added
"beautify.ignore": ["**/*.js","**/*.jsx"]
Make sure you dont have multiple javascript formatters enabled in your current workspace. (You have to disable the rest of them for your current workspace).
react-beautify mostly does the magic but fails if you have some other JS formatter/beautifier already installed.
In my case, I had react-beautify and JS-CSS-HTML Formatter extension installed. I had to disable the JS-CSS-HTML Formatter for my current workspace.
Here is what worked for me-
I clicked on the Language mode (Javascript React) at the bottom of the screen
Then chose the Configure React Javascript Language based setting option
Then changed the javascript react default formatter to prettier as shown in the pic.
That pretty much did it for me after I saved the React file.
I just added all the combinations mentioned above.
added this
"files.associations": {
"*.js": "javascriptreact"
}
added this also
"beautify.ignore": ["**/*.js","**/*.jsx"]
Deleted additional js formatting
installed prettier
turn ON prettier and formatting
You can install an extension like react-beautify that helps you format your jsx code.
It is found here
This extension wraps prettydiff/esformatter to format your javascript, JSX, typescript, TSX file.
I had to disable the JS-CSS-HTML Formatter extension in VSC. only solution to this problem
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
include :
JavaScript
TypeScript
Flow
JSX
JSON
CSS
SCSS
Less
HTML
Vue
Angular
GraphQL
Markdown
YAML
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
I had similar problem, then I found out it was caused by 'beautify' extension. After I uninstalled the extension, everything is working fine.
After reading many great suggestions and workarounds, I discovered that I could simply place my mouse arrow down over the bright blue horizontal bar at the bottom of VSCode editor window - right click - which opens a popup list window - and deselected = "Editor Indentation".
You can double click JavaScript in the Status Bar at the bottom of VSCode, and then change the format from JavaScript to React (Choose React in the Select language mode to associate with '.jsx')
add this in your .js code,
/* prettier-ignore */
Related
So I started learning React from this (https://youtu.be/Dorf8i6lCuk?t=1946) tutorial and got stuck trying to save a file. The video recommends getting prettier and I did and then when I save the file it auto-formats code into something that doesn't work.
eg:
as per the suggestion a jsx file:
as per suggestion 2: already in Javascript React:
As per the suggestion in the solutions:
Try going to settings > Extensions > uncheck - Enable/disable checkbox. Or Remove all together.
Change code to: (Notice the differences in my code to yours, your div tags are open and return does not have the divs wrapped in ().
function App() {
return (
<div>
Hello!
</div> //this was giving you the error before
)
}
export default App
I'd also double check your version of react that you are running.
If the version is different from the Tutorials, this could cause issues.
This might help:
Prettier's format on save messes up .jsx files
Following #AlexB801 's advice I have fixed the thing. It turns out you must NOT change the extension to .jsx but only change the formatter. Attaching an image. Also another thing to be noted here is that this was not an issue with Prettier. like so:
On codesandbox.io, how can I configure Prettier so that it doesn't change the line breaks?
Also, how can I deactivate specific ESLint rules. For example, I would like to turn off the react-hooks/rules-of-hooks rule.
A newly created eslintrc file seems to be ignored in my ES201x project.
You can easily configure the formatting behaviour of your Sandbox by adding the prettier config file in the following way:
Create the file .prettierrc in the root folder of the Sandbox.
Using the JSON syntax add the formatting rules you want to the file.
For example to change the the line wrapping which I guess annoys most of the people, set the printWidth value:
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": false,
"singleQuote": true,
"printWidth": 25
}
Save the file and reload the Sandobox page.
Next time you save any of the files the code will be formatted following the rules you had set in the .prettierrc.
Other:
It seems to be necessary to reload the Sandbox page for the settings to take place. After re-opening it, the file .prettierrc will be shown as the UI and not file.
To add new formatting rules, open the file .prettierrc showing as the UI and click on Open file in editor and add the rules you need.
Here is the list of Prettier config options you can set in .prettierrc.
To enable/disable Prettier formatting do following:
Cmd + Shift + P --> Select Preferences: Open Settings (UI) --> Search for Editor: Format on Save --> Disable/Enable the option .
Enjoy!
I couldn't find a way to prevent prettier from removing line-breaks so I just turned off the on-save setting. It doesn't come up too often for me, so it's easy enough to pretty up code in an editor.
I'm hunting for a way to override the eslint rules too
And when i am saving this file with Ctrl+s even using prettier and other javascript extension snippets in visual code i am getting this deformed code which is showing errors
And Showing error as:
JSX element div has no corresponding closing tag.
JSX element Navbar has no corresponding closing tag.
JSX element NavbarBrand has no corresponding closing tag.
Identifier expected.
> expected.
The problem is you've installed Beautify as well as Prettify both in your Vscode. Beautify is causing this problem. I tried removing beautify and it worked like a charm. Just remove beautify and use prettify and it will work absolutely well.
Change your file extension to .jsx so the formatter knows that it contains markup
Click 'javascript' in the bottom - right
Then it will come a search bar.
In there you need to search react
Then select the first search result.
DONE
Another variant: change your settings to:
P.S: Change language to JSX in Visual Studio Code
{
"files.associations": {
"*.js": "javascriptreact"
}
}
That way you can either keep your extension as .js
change language mode to javascript react [the language mode should be javascript react as circled] https://i.stack.imgur.com/DDQUH.jpg
You may have installed a formatter that not suit for html+js code snippets.
uninstall (not work whether disable) it and set the default formatter in vs code.
The way I learned to do it is:
The problem is probably that you are using a .js file but intend for it to run React.
Now naturally, Vs code would identify this by itself if you saved it as a .jsx, but you don't want that.
Simply click on the bottom right on VS Code Editor where it says Javascript.
You will see an option to Select the language Mode, here you can search for JavaScriptReact and select. That's it. This should solve your problem.
1 Disable all extension
2 And select the language mode is JavaScriptReact
[see pic is here ]
[1]: https://i.stack.imgur.com/uOwiT.png
type the following commands before creating a new app:
npm install -g create-react-app
npx create-react-app myapp
cd myapp
npm start
I have the following table which uses the datatables plugin for pagination, sorting and exporting.
Everything works great except the check mark in my html is not exported with the pdf, yet it is with excel. I want to get this working because I am going to remove the checkbox element in favour of clicking the table cell and toggling whether the check mark is present. I really want to avoid using 'Y'/'N' as indicators in any part of the table/exports.
Has anyone come across this issue before or can offer any light, my instinct tells me it's something to do with the character encoding in PDF export library, but I don't want to go just go in and start editing library files because this issue (may)will be repeated if I ever need to upgrade the lib. In addition, I'm not totally sure what to look for.
HTML
Excel
PDF
While writing a PDF, use unicode string for check mark exactly as below:
✓ followed by ;
like
<table border="2"><tr><td><Check mark: </td><td>✓</td></tr></table>
PROBLEM:
jQuery's Datatables uses pdfmake library for its eporting in PDF.
pdfmake uses only one font 'Roboto' as it's text font and as it so happens its char-set doesn't support the '✓' symbol.
You can have a look at all the characters 'Roboto' , pdfmake and subsequently Datatables supports here: https://www.fontspace.com/font-charmap/21071
This information was found at: https://github.com/bpampuch/pdfmake/issues/1478
SOLUTION:
You can change the font that Datatables uses when exporting to pdf using pdfmake to something that support the character symbol '✓'
create a new vfs_fonts.js file containing your font files
Create the examples/fonts subdirectory in your pdfMake code directory, if it doesn’t already exist.
Copy your fonts (and other files you wish to embed) into the examples/fonts subdirectory.
Run npm install (from the pdfMake directory) to ensure all prerequisites modules are installed.
Run gulp buildFonts to create a new build/vfs_fonts.js (you can update gulpfile.js to change the base directory path or to add an alternative config for the buildFonts task).
Include your new build/vfs_fonts.js file in your code (in the same way you include pdfmake.js or pdfmake.min.js).
The above buildFonts action embeds all files from examples/fonts (into a local key/value variable pdfMake.vfs) - not only fonts. Which means you could put images in there, run gulp buildFonts, and reference them by filename in your doc-definition object.
include this newly created font file in your document
<script type="text/javascript" src="./pdfmake-0.1.37/vfs_fonts.js"></script>
add your fonts to pdfmake
pdfMake.fonts = {
Arial: {
normal: 'arial.ttf',
bold: 'arialbd.ttf',
italics: 'ariali.ttf',
bolditalics: 'arialbi.ttf'
}
};
Add your font to the Datatable
buttons = [
{
customize: function (doc) {
doc.defaultStyle =
{
font: 'Arial'
}
}
}
]
Some helpful links:
DataTables & PDFmake - question on how to set a new font to the datatable
https://datatables.net/forums/discussion/51827/how-i-change-font-family-in-pdf-export - datatable community question on how to change the font family.
When I use Aptana in Eclipse, I like the Cobalt theme for my Javascript. However, this theme ends up making my SVN diff-ing nearly impossible for my Java files, because the background is dark blue, and the text is black in the compare editor.
I've look all over the preferences in Eclipse, and can't figure out a way to only use the Aptana Cobalt theme for editing my Javascript files.
Here are the things I've tried:
- I've made the Aptana JavaScript editor the default for ".js" files
- I've made the default for ".txt" and ".java" the normal editors (non-Aptana, whatever they are)
- I've tried setting the theme, and making sure that General > Appearance > Colors and Fonts still has all the defaults
- I've verified that if I changed the theme to something with a white background, my diff-ing editor gets changed and becomes readable
What else can I do?! I just want to use Aptana for Javascript, not my default diff theme.
I had the same problem. No idea wether it has been resolved yet, but I found a temporary solution which might help. I changed the default editor for Javascript in Preferences > General > Editors > File Associations. When you select ".js" from the upper list, you'll see all the possible editors in the bottom list. I made "Javascript Source Editor" my default editor. This editor uses the default theme settings.
There currently isn't a way to achieve this. I would suggest to create a JIRA ticket at http://jira.appcelerator.org/browse/APSTUD.