I'm having a go at React and I'm using Visual Studio Code IDE. The problem I'm having is that it's throwing highlighting errors when returning HTML elements in the render method. I've attached a picture to illustrate. I'm aware of the jsconfig.json file but I don't know what I should add to hide these highlighting warnings.
React files need a jsx extension for VS Code to highlight them correctly.
I attached screenshots to show. The first one is with js extension. This looks comparable to your screenshot.
Note that with the second I renamed the file to .jsx and the highlighting is correct
Related
Trying to start a gatsby+react+typescript project and VSCode will only apply syntax highlighting to the HTML in my .tsx files. The typescript code remains a single color. How do I fix this?
Note: I have no plugins installed at the moment and the highlighting works if the file type is set to .jsx
Clicking on the language button in the lower right corner and selecting typescript react fixed the problem.
I faced same problem, even "Typescript React" was selected as the language. I had to click and select the language pack version before getting syntax highlighting working.
In my case "JavaScript and TypeScript Nightly" extension was causing the problem.
I had the same problem even when "Typescript React" was selected.
I disabled all the extensions and problem solved.
Then I enabled each extension individually and I've found out "JavaScript and TypeScript Nightly" was causing the problem.
I hope this will help someone.
I solved this issue just reloading vscode as required by JavaScript and TypeScript Nightly extension, once it was reload I just double checked that Typescript react was selected and the problem was resolved.
Seems like the real problem was that the library JavaScript and TypeScript Nightly was not fully reloaded.
I use command react-native init "name project" then open vscode appear to have error message code. (image)
This is what you need to do with VS Code, observe the gif carefully
Steps to resolve error
1. Go to extension
2. Click on more (...) and select Show Built-in extension
3. Search "TypeScript and JavaScript Language Features" - yellow & blue icon
4. Click on Setting icon of extension and select Disable (workspace)
5. Click on Reload / Restart Required
If you are getting this in React Native its probably a known bug in VSCode, that when Google Flow (which competes with MS Typescript) is coded, shows errors erroneously mentioning Typescript.
Your current .js code is supposed to be preprocessed by Flow into another .js file with "proper" js.
So make sure Flow is installed and then disable the Typescript parsing support. Here's the official answer on the Flow installation webpage:
Set javascript.validate.enable option to false or completely disable
the built-in TypeScript extension for your project (see gif below)...
Otherwise, you may want to stay as is and just change your code as suggested by C2P1 on March 19, 2018 on the github issue 631
To disable the [js] parser (connected to Typescript),
In VSCode menu: File -> Preferences -> User settings, (or ctrl+,) and add the following line
"javascript.validate.enable": false,
This answer was completed after seeing Idan Dagan's answer (Not the accepted answer) here: js 'types' can only be used in a .ts file - Visual Studio Code using #ts-check
And here's an excellent albeit old page about setting up the react-native environment, from Hackernoon. (You also have the VSCode React-native-full plugin)
Just disable built-in extension for TypeScript in VSCode. On the VSCode Extensions choose "Show Built-in Extensions" and then search for "TypeScript and JavaScript Language Features", Click disable then reload the VSCode. It works for me
In VScode
Press
CTRL + SHIFT + P
Use this command
Open User Settings
copy and paste the next line in the search bar in settings
#ext:vscode.typescript-language-features
ready uncheck JavaScript validation
Helped me to resolve
To disable the [js] parser (connected to Typescript),
In VSCode menu: File -> Preferences -> User settings, (or ctrl+,) and add the following line
"javascript.validate.enable": false,
This is what you are looking for. Unfortunately I haven't Googled a proper solution but we have to disable some JS checking.
https://github.com/Microsoft/vscode-react-native/issues/631
I've solved this with a plugin for VSCode "Flow Language Support". It will control the errors of the code instead of the plug-in TS-JS (built-in plugin of VS Code). In Details of plugin, guides you how to disable the original plugin TS-JS VSCode.
instead of disabling Typescript and Javascript language features extension, you can go to the extension settings, find the option Javascript > Validate: Enable, and uncheck it to remove any warnings.
Recently I was facing an issue coding React app on Visual Studio code. Because of this issue, whenever I wrote JSX inside the render function of the React Component and saved it, it would go messed up (I mean indentation would get messy). See the pic:
This error was also showing error like:
1. Unclosed regular expression
How to solve this?
If you are using jshint plugin, remove it and install ESLint plugin.
It is a good replacement for jshint in reactJS work.
I tried several options like creating a .eslintrc file or .jshintrc file.
But it turned out that in my Visual Studio Code IDE, there was third party extensions(eslint/jslint/tslint/beautify/jsformatter etc) that were causing a big mess in my JSX code.
I had to go to the extensions and disable all the extension which could hinder in the natural process of linting and code cleaning of React framework.
(These extensions are really great. But disabling them helped me in solving this issue of mine, no offense to anyone.)
If you are facing the same issue and the issue persists event after adding a .jshintrc with content:
{
"esversion": 6
}
then consider disabling the third party extensions.
Hope my answer helped.
the extension that did it for me was...
jshint
dbaeumer.jshint
Dirk Baeumer
as #abhay-shiro says, disabling a few extensions will usually resolve the issue.
I had the same problem, but it was "beautify" extension which was causing the error, I uninstalled it and installed prettier. It fixed the problem.
I solved this issue by disabling show syntax errors checkbox in visual studio 2015.
Tools -> options - > text editor -> javascript -> intelliSense -> general -> show syntax errors(disable)
Visual Studio Code now supports JSX on 0.8 version, but looks like the only way to activate it is with a .jsx file extension. It is not on the list to change the language mode manually, the nearest option is JavaScriptReact, but it doesn't parse the JSX tags.
I'm in a project with a lot of .js files with JSX and I can't change it.
Is there any other way to use JSX syntax without the .jsx extension?
Change your user settings or workspace settings as below:
// Place your settings in this file to overwrite the default settings
{
"files.associations": {
"*.js": "javascriptreact"
}
}
Note: You might need to restart VSCode.
I would feel the below is the easiest way of formatting the code
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.
I could do it, but "not React JS files" are also show with JavaScriptReact mode.
open file C:\Program Files (x86)\Microsoft VS Code\resources\app\plugins\vs.language.javascript\syntaxes\javascriptreact.json
(probably, need to open with administrator privileges.)
change "jsx" to "js" in array "fileTypes".
restart app, close opened js files, and reopen.
Took me a while to figure this out but – JSX is already part of Emmet – which is part of VS Code. I've told Emmet to also (additionally) make JSX snippets available in regular JS files.
Just put this in your settings file:
"emmet.syntaxProfiles": {
"javascript": "jsx"
}
Although Dionys' answer works there is a better way to do this in more recent versions of Visual Studio Code.
Go to File>Prefrences>Settings and then scroll down and find "Emmet" open the tab and you should see the following text
// Enable Emmet abbreviations in languages that are not supported by default. Add a
mapping here between the language and emmet supported language.
// E.g.: {"vue-html": "html", "javascript": "javascriptreact"}
"emmet.includeLanguages": {},
So just follow the instructions and add "emmet.includeLanguages": { "javascript": "javascriptreact" } on the json at the right panel ( which will overwrite the user settings ).
There is now a VS Code extension that allows .js files to be treated as .jsx files.
Unfortunately the readme for the extension also warns:
when you install this extension you will loose all the existing language support provided for .js files
Fortunately VS Code is now very close to adopting Salsa, which means soon the js-is-jsx issue should be completely resolved.
1-Press F1 (in Visual Studio Code)
2-Type "extension" in the appearing text field
3-Pick "Extensions: Install Extension"
3-Type "ext install jsx"
4- install JS JSX Snippets
5-Restart Visual Studio Code
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.
Just install an extension:
Press F1 (in Visual Studio Code)
Type "extension" in the appearing text field
Pick "Extensions: Install Extension"
Type "ext install jsx"
Restart Visual Studio Code
Source:
https://code.visualstudio.com/docs/editor/extension-gallery?pub=TwentyChung&ext=jsx
https://marketplace.visualstudio.com/items/TwentyChung.jsx
Try using link on Mac or Linux.
ln -s index.ios.js index.ios.jsx
I opened up angular code in VSCode. At first it didn't recognize angular, so used the light-bulb to add:
/// <reference path="../../typings/angularjs/angular.d.ts"/>
But it still doesn't recognize angular and now I get an error saying that it can't find angular.d.ts.
It looks like the problem was that VSCode failed to download the file and create the directories. I googled angular.d.ts and found it on GitHub - DefinitelyTyped
I created "typings/angularj/" folders and added the file and now intellisense is working for angular :)
You don't need to add anything to your file, VS Code will add angular.d.ts to the typings folder. VSCode doesn't require the /// tag to be included in all your files, you might even confuse the editor doing this.
If you don't see the "typings" folder with the angular intellisense file you will not get intellisense and you need to repeat the light-bulb step.