VS 2017 is supposed to understand jsx files. When I transitioned from 2015 to 2017, all my jsx files turned into a very long red underline. There where errors everywhere even though in vs2015 i didn't have any errors. I suppose that is because vs 2015 just didn't bother to "intellisense" the files in the first place, but I prefer to have no intellisense and a clean view, than have intellisense that considers everything is wrong.
I use webpack+babel to transpile and bundle my react components. When I buld with webpack everything goes fine. But the intellisense says everything is wrong.
In my web project there is a folder named 'React' under which all my react views and components are located.
When I import 3rd party components (not relative paths) vs 2017 intellisense says it can't find the modules.
But this is not happening to all files. In some files it can resolve the modules, in others it cannot.
What is going on here and how am I supposed to solve this problem?
Intellisense is broken so I had to disable highlighting syntax errors. It's better that way, but still I don't have intellisense (autocompletion, suggestions etc)
You should download react.d.ts file so Visual studio could understand them.
For example download from here: react.d.ts or I think there is a nuget package also.
Another solution is to use this syntax: var react=require('react') but you will not get intellisense this way, but at least you will get successfull build.
Related
This suddenly happened after I created a new file while working on a project. Almost all characters are simply white text (except for brackets, because I have bracket pair colorization enabled)
I already tried resetting my configurations, checked my configurations (both globally and in my workspace), and tried this extension that offers an alternative syntax highlighting (which worked, but I would prefer using the Visual Studio Code one).
I think this was caused by the extension called JavaScript and TypeScript Nightly. This was causing the syntax highlighting for .js and .ts files (.jsx and .tsx too). This was more of a bug with the latest version (currently 1.73.1).
You can disable the extension to enable the syntax highlighting.
This extension has now been updated and this issue is fixed.
What user Haneen said was correct, but instead of disabling it, you can install an old version that works just fine.
Click the cog on the bottom right → 'Install Another Version' → select an older version.
Cog at bottom right
Yes, this is exactly caused by the JavaScript and TypeScript Nightly extension.
You can disable or install another version (I recommend installing the prior version since the current version has a bug).
I am currently using the version which was released 2022-11-13.
The current version (v5.0.20221116) for JavaScript and TypeScript Nightly seems to be breaking the syntax highlighting. Downgrading to a previous version might resolve this issue.
This was resolved in v5.0.20221117 however.
Also, I deleted this JavaScript and TypeScript Nightly package, and now it works fine for me.
The module on the marketplace: JavaScript and TypeScript Nightly
I think this was caused by the extension called JavaScript and TypeScript Nightly. This was causing the syntax highlighting for .js and .ts files This was more of a bug with the latest version
As others mentioned, the two latest versions are causing issue for me, but 5.20221115 is working for me.
It was fixed with the latest update of JavaScript and TypeScript Nightly.
I'm using the the built in Debugger tool in VS code. My launch.json settings look like this:
When I add some breakpoints to my code, it doesn't stop there. Is there some special settings required when using React with Typescript? On a react projects created bynpx create-react-app it works without any problems.
You must create what is known as source maps. Without them the executing JS file has not idea where the breakpoint is in your TS file.
I am not sure on the build system being used to help any further.
Hello I'm trying to use the Visual Studio extension Quick Install Package to install packages via bower and npm. One example is angular-loading-spinner
When I give the command using the interface, I see that the package.json file is updated and or the bower.json file is updated with the package dependency, but I'm still unable to actually reference the packages as instructed in my html using the tags. No actual files are added to the project, so I feel like I'm really missing something here, or simply don't understand what this package installer is actually meant to do. There doesn't seem to be any clear tutorial on this I can find online, or any good information. It just all assumes it works fine. Can anyone please advise? Thanks]1
Mike, I'm glad to know that my answer was the correct. For future users that have the same concern, they need to look at the folder node_modules to find out all the libraries installed.
This was put in the node_modules folder as pointed out by Jonathan Brizio. The issue was that the files were hidden and had to be included in the project.
I'm new to Reactjs and I'm trying to configure VSCode for react and jsx.
The available information seems outdated...
I managed to configure reactjs in VScode.
I installed the following extensions:
Typings Installer
Typings
Babel ES6/ES7
Reactjs Code Snippets
jsx by TwentyChung
VSCode Language mode now shows "Javascript React".
What I can't get to work is react-jsx syntax highlight and intellisense.
What am I missing? Are there any instructions about jsx configuration?
Windows 10 64, VSCode 1.5.2, react files in .js
Thanks,
Enrico
VS Code supports JSX syntax highlighting and IntelliSense out of the box. It also supports features like auto-closing tags and auto imports for JSX
You do not need to install extensions. Many of the ones referenced in the question will actually cause problems and are not actively being maintained
I'm not contradicting the previous answer, but it's also worth noting that this issue is currently open because VS Code is not highlighting syntax or formatting code for text/jsx blocks inside HTML files. At the time of writing, there is a PR open (linked from the issue) which will hopefully fix the issue but it has not yet been merged.
I have VS 2013 Update 4, TS 1.4, latest WebEssentials and R# 8.
I am trying to create some AngularJS code in my MVC solution.
In installed Angularjs and angular.d.ts via nuget. I have done the same for "marked" and also jQuery installed automatically as Angular dependency.
How, none of Angular types get resolved by Intellisense. If I am trying to type "mar" in an empty TypeScript file I get this:
If I type "jque" I get this:
But when I type "ang" - nothing.
All d.ts files are in place:
Adding reference path directive does not help, although it is not required and Intellisense works perfectly fine for other frameworks. Manual typing without Intellisense support works fine and I get no compilation errors, so TSLint and tsc are ok with my code.
So, my question is - what is going on there?
P.S. Just added Knockout to test this and typing "ko" brings proper Intellisense.
P.P.S. I turned off the TS support in R# and intellisense seems to work properly. So, I would assume this is the Resharper issue.
I turned off the TS support in R# and intellisense seems to work properly. So, I would assume this is the Resharper issue
Yes. They need to update for v1.4 of typescript. You can use an older angular.d.ts till then : https://github.com/borisyankov/DefinitelyTyped/blob/1.3.0/angularjs/angular.d.ts
As basart mentioned, rather than installing EAP or turning Resharper off, you can use an older version of the file for the interim period. But I advise against adding it manually in your solution. Version 1.7.4 of jQuery d.ts and version 2.4.0 of Angular d.ts worked for me and you can use NuGet from the Package Manager command line in Visual Studio to install them.
Install-Package jquery.TypeScript.DefinitelyTyped -Version 1.7.4
Install-Package angularjs.TypeScript.DefinitelyTyped -Version 2.4.0
Make sure you select your project in the dropdown box inside the console before running the command.
I had this problem a little earlier today, where inline intellisense was flagging angular, as well as various interfaces (usually IPromise<T>) as not being found, despite having reference metacomments and the files present in my project.
Similar to the answer from #basarat, I was able to disable ReSharper Intellisense (Resharper | Options... | Intellisense | General), restart Visual Studio, and then re-enable TypeScript Intellisense. Upon re-enabling intellisense, I no longer get red squigglies.
I did this in Visual Studio 2015, ReSharper 2016.3.2, on a project that is using Angular 1.6 and TypeScript together, with no tsconfig.json file (configuration is done in the TypeScript tab of the Web project.)