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:
Related
I've been using VSCode with React and Styled Components for about 6 months--no issues. Recently, the color picker hasn't been showing up when including any CSS properties involving color. A quick reload of the window or restarting VScode would always solve this issue..until now. I've changed the selected language to CSS, Javascript, Javascript React, and CSS (Styled Components). Nothing works.
I've tried uninstalling/re-installing styled components extensions. Nothing. I uninstalled and reinstalled VSCode, but that also didn't work.
I have this extension installed
https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components
Image of color picker not showing up next to color
Any help would be greatly appreciated.
Thanks
**EDIT: For anyone that might run into this in the future, installing this extension fixes the issue.
https://marketplace.visualstudio.com/items?itemName=AntiAntiSepticeye.vscode-color-picker
By default the VSCode will enable color picker for stylesheet files such as .css, .less, .scss and .sass
In order to have the color picker for other file types, wherever there is an valid HEX tag, also to make the valid answer more complete, there are two steps to follow,
install extension vscode-color-picker.
add following to the seetings.json of your VSCode, since by default it enables for [python,javascript,typescript]
"vscode-color-picker.languages": [
"php",
"html",
"css",
"python",
"jsonc",
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue"
]
I'm learning Javascript and up until now when I wanted to change anything in the DOM, I was using Google Chrome devtools to do that. Now I'm moving to write my code inside the JavaScript file, that accompanies the webpage, in Atom but the problem is the extremely useful autocomplete features of Chrome devtools is not available in Atom. For example when I type this code:
document.addEventListener('click', function(){
const mainHeading = document.querySelector('h1');
mainHeading.style.backgroundColor = 'red';
})
Chrome devtools is intelligent enough to suggest backgroundColor with a capital C to prevent any typing errors but the same thing doesn't happen in Atom. In fact Atom does not have any suggestions at all. I have tried installing different JavaScript plugins such as atom-ternjs or autocomplete-javascript, to name a few but none is working when you want to write the code to manipulate the DOM. Any suggestions to solve this is greatly appreciated.
Here's a quick solution using Atom Ternjs.
Navigate to the menu bar and click Packages-> Atom Ternjs -> Configure Project.
Here, select the browser option under libs
Then, just scroll down and click on Save and Restart Server.
I hope this helps.
I'm using TabNine extension now and I'm satisfied with the performance. It uses deep learning to learn and predict the variables and lines of code you might want to write based on those variables and the more lines you write in a particular project the better it gets at giving the suggestions.
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.
I have a babel text highlighting that i added in my sublime. However every time I open a new react project it defaults to javascript text highlighting then i have to reset each javascript file to get the correct text highlighting. As you can see in the lower right of my screenshot it is by default set to javascript.
The syntax that Sublime selects is based primarily on the extension that the file has.
You can select View > Syntax > Open all with current extension as... from the menu while you have such a file open to tell Sublime what syntax you want it to use for any particular extension.
If you sometimes use regular JavaScript as well, you'll experience your current problem in reverse; you will have to manually swap the syntax back to JavaScript.
Either way, the Project Specific Syntax Settings package may also be useful in this case if you use projects. It will allow you to configure per project what you want the syntax for different files to be.
What I did was to make babel(JavaScript) the default, preventing the default JavaScript by adding it as a value to ignored_packages.
To do this, open your sublime, click on Preferences > settings then paste this in:
"ignored_packages":["JavaScript"]
More details here: https://github.com/babel/babel-sublime
i am using sublime text 3 as my code editor,i have written a basic hello world example in React.but the coloring is improper on the code ,i have tried installing Babel plugin but even after that also the coloring doesn't seem to work ,as you can see the image below
Just installing it isn't enough, you have to also tell SublimeText to use it.
Either do
a) Ctrl-Shift-P, type "Babel" and select Set Syntax: Javascript(Babel)
or
b) Go to the menu and do View->Syntax->Open all with current extension as...->Babel->Javascript(Babel).
You could follow the below mentioned steps:-
Setting babel as the default syntax
To set it as the default syntax for a particular extension:
Open a file with that extension,
Select View from the menu,
Then Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel).
Repeat this for each extension (e.g.: .js and .jsx).
Setting a Color Scheme
Babel comes bundled with Next and Monokai from Benvie/JavaScriptNext.tmLanguage. Select one from Preferences -> Color Scheme -> Babel
Courtesy: https://github.com/babel/babel-sublime
This might possibly help you out...follow below steps
press Ctrl + Shift + P
Doing so, Command Palette pops up and there type : Package control . And then
select the option Package Control: install package
Now typein and select 'Babel'
Now open 'View' menu and Navigate to Syntax, Open all with current extension
as…, Babel, Javascript (Babel).