We Keep Coding

VSCode auto imports for React Native with JavaScript

I know VSCode supports auto import for JavaScript.
For some reason, it does not work with React Native. There is even a dedicated section on the VSCode website for this. But it only answers how to fix this problem for Typescript (using allowSyntheticDefaultImports). I want it for JavaScript (ES6).
I tried explicitly setting "javascript.suggest.autoImports": true, in my settings.json but that wouldn't change anything, since true is the default anyways.
How to get auto imports for React Native with JavaScript in VSCode?
PS: This plugin (suggested in this similar question) is also only for TypeScript. Besides that, since VSCode includes auto import out of the box there should be a solution without an extension for RN and JS.

You might have the 'Auto Imports' option disabled.
In VSCode go to Settings and search for 'Auto Imports' option, it should be something like this:
Just activate it if it's disabled and you'll be fine.

Install Auto Imports VSC extension, and enable Auto-imports options(for JS) in the VSC settings (File -> Preferences -> Settings).
You may try ctrl+space (for example, after placing the cursor inside the <Text> element) and select the import element from the displayed options.

For me the issue was neither the plug in nor VSCode.
I tried selecting suggestions with library name besides it and it worked for me. i.e if I want component then I will select Componet react from the suggestion and it worked.

IntelliJ doesn't support the Bootstrap CSS classes autocomplete

I work with a Java/HTML/JavaScript/Bootstrap project. When I work in the front-end, IntelliJ doesn't autocomplete the CSS classes for the Bootstrap.
What I see over the online that the people have issues when they tried to reach the Boostrap over the online. In my case, I have it downloaded locally in the project.
Btw, I use Ultimate edition if someone is wondering. What do I need to make it work?

It seems that the path to bootstrap.min.css is not resolved as it's highlighted in yellow.
Check that the path is indicated correctly. As far as I see, your 'css' folder is in 'static' folder etc.

FontAwesome [Webpack] not loading

I'm currently developing my Cortana-App and have a big problem with FontAwesome :)
Since I recently switched to React + Redux and Webpack [Better Structure + Less Space] I had to everything new.
And now comes the problem, I can't use FontAwesome properly. It just displays a white square... I checked many topics on this [Directory Issues, not properly set up webpack-loader], but didn't found anything that fixed the problem. No errors in console of webpack, no errors in developer console.
Here's the link to my project:
https://github.com/khayalan-mathew/gymdonapp/tree/feature/react-redux
The ReactElement i use font-awesome in is:
https://github.com/khayalan-mathew/gymdonapp/blob/feature/react-redux/src/components/test.jsx
I hope somebody can help me :) If you have found the right solution please send a pullrequest or write it down below
-Mathew

There is a known issue from css-loader generating wrong file paths. This won't happen in production build, but still annoying when it render squares in development mode.
Until this issue is fixed, you can disable css-loader source map to see the font rendered correctly in development. Find somewhere in your webpack config that write css?sourceMap and change it to css.

Setting up proper React Code highlighting in Visual Studio Code?

I have been trying to find a proper way to highlight React Code in '.js' files so that it is easier to read in Visual Studio Code. The photo below shows a sample file of how a lot of it is in one color, making it hard to read.
I tried using "jsx" extension by TwentyChung and "react-beautify", but neither of them worked. Can someone please assist? :-)

Change the VS CODE color theme to Dark+ and change the language in bottom status bar to java script react. This worked for me

JSX highlighting works out of the box in VS code and JSX files are already associated with JavaScript React language mode. If you want to enable JSX syntax coloring in .js files click on the language name in the status bar and select JavaScript React language mode. You can also associate .js files with JavaScript React if you don't want to do this every time. Make sure you have the latest version of VS Code.

Disabling this extension fixed it for me. It specifically happened this day November 17,2022 3 of my workmates were having the same problem.

Just uninstall this plugin and install it again in the vs code extensions:
Name: JavaScript and TypeScript Nightly
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next

I just added this to settings.json and it worked for me, so you can give it a try.
"files.associations": {
"*.js": "typescriptreact"
}

For Me Here is what worked
Update the vscode by downloading the latest verrsion
https://code.visualstudio.com/download
2.Open Vscode click extension and search this extension
Javascript Atom Gramar
Just disable the extension.
3.Close and open vscode, now u should see colors in your jsx code.
Hope this will help some one in future

disable the extension named Javascript Atom Grammar works for me

Select Language mode as "Javascript React".
Go to Settings -> Color theme -> Select "Dark+" theme.

Click: Ctrl + K + T
Change the color theme settings to dark+(default) , it worked for me.
And select the appropriate language from bottom status bar:

VS Code highlights code via extensions, not with ESLint or Prettier, which are sometimes assumed to do the job. Out of the box, VS Code supports React and JSX natively. You can also adjust VS Code's settings.json file. Here's an example off how that might look:
{
"window.zoomLevel": 0,
// Solarized-dark theme
"workbench.colorTheme": "Solarized-dark",
// Changes the highlight color in solarized-dark, which I can't see
"workbench.colorCustomizations": {
"editor.selectionBackground": "#5b455e",
"editorBracketMatch.border": "#555",
"editorBracketMatch.background": "#5b455e"
},
// Number of spaces in a tab
"editor.tabSize": 2,
// Insert spaces when pressing Tab. This setting is overriden
// based on the file contents when `editor.detectIndentation` is true.
"editor.insertSpaces": true,
// Override whatever the files say and give me 2 spaces per tab
"editor.detectIndentation": false,
"workbench.startupEditor": "newUntitledFile",
"explorer.confirmDelete": false,
"explorer.confirmDragAndDrop": false,
"javascript.updateImportsOnFileMove.enabled": "always"
}
VS Code modifies syntax highlighting automatically, but it's not perfect. You can also adjust the detection by clicking on the auto-detected language on the right side of the bottom toolbar:

Eclipse Luna dark theme doesn't show JS properly

I downloaded the Eclipse Luna version of PDT today and switched to the dark theme. All my PHP files are now displayed with very clear syntax highlighting in the dark theme.
However, when I load my javascript files, it's impossible to see the text in the file as it's dark black on lighter black (see image). This happens only for the JS files as all of the CSS and HTML files in the project inherit the dark theme very nicely.
I've restarted Eclipse applying the theme and the issue still remains. Any idea how I can get my JS file to work with this new version?

I suggest install eclipse color themes plugin: http://eclipsecolorthemes.org/
This plugin provide dark editor support for most popular eclipse plugins (css, js, xml)

Take a look at:
https://github.com/guari/eclipse-ui-theme#syntax-highlighting-scheme-optional
and import the epf file.
This should solve your issue and similar ones, until a stylesheet for dark theme settings for syntax will be added to all Eclipse plugins packages.

You probably have the VJET Javascript IDE installed as an Eclipse Plugin. The color scheme you have looks exactly the same as what I was getting. I solved it by uninstalling this plugin. Go to Help -> Install New Software -> click "already installed" hyperlink, and see if you have it installed. Click Uninstall.
Here are some things to check to determine is this is the problem.
Go to Eclipse Preferences -> General -> Editors -> File Associations and check the default editor for Eclipse. If JVET is installed, VJET will be the default editor. If you try to switch the javascript editor to be default, it won't let you do that option. The javascript editor should be taking in the appropriate color schemes by whatever theme you have installed. I assume VJET has a fixed color schemes.
Go to Preferences -> Javascript -> Editor -> Syntax Coloring. Check if the syntax in the preview box actually matches what is displayed on your javascript file.