I have a problem in Visual Studio, more specifically with a react project. I don't get tooltips and autocomplete doesn't work, and autoimport doesn't work either. Also native functions of react are not displayed. For example, when you type useState, nothing is imported and no tooltips come out. What is the reason for this and how can it be corrected?
function App() {
return (
<div classname="App">
<Hell ??
</div>
);
}
export default App;
Component is not imported here
function App() {
return (
useStat ?!
<div classname="App">
<Hello/>
</div>
);
}
export default App;
Function hints not coming out
VS Code now handles this natively via a jsconfig.json and the JavaScript Language Service.
Create the file jsconfig.json at your project root and make sure to set checkJs to true:
Creating a JS Config file, allows Visual Studio to treat the folder as an Explicit Project. Without it, JS files opened in VS Code are treated as independent units, and there is no common project context between any two files.
Here you can find more info.
Related
I am experiencing problem in VS 2022 in Blazor complex project. After moving Blazor components to different namespace/folder the components are not functional any more. My component does not 'recognize' other Blazor components anymore. For example custom component MudTable from MudBlazor namespace:
I would like to be able move Blazor components easily as simple classes.
Sometimes it helps to specify the same namespace in razor file to match namespace in partial code behind class, but sometimes I end up creating component (razor and cs files) with different name (copying the same code). This is very time consuming. I am not able to reproduce the described bug in Simple Projects. I have tried to reproduce the issue but it works fine (with minor VS bug) as described below. I will keep trying to reproduce the issue on Sample project.
Please find below scenarios working fine:
Simple scenario working fine
Steps to reproduce the issue:
Create Blazor Server App
Create folders
Components
Components\Sub1
Components\Sub2
Add new Razor component e.g. MyComponent1.razor to folder Components\Sub1
Verify that <MyComponent1\> works on some page. Eg. add lines to Index.razor:
#using BlazorApp1.Components.Sub1
<MyComponent1 />
Move MyComponent1.razor to folder Components\Sub2
Update Index.razor:
#using BlazorApp1.Components.Sub2
<MyComponent1 />
It works fine
More complex scenario with minor bug
Create Blazor Server App
Create folders
Components
Components\Sub1
Components\Sub2
Add new Razor component e.g. MyComponent1.razor to folder Components\Sub1
Add behind the class to 'MyComponent1.razor.cs' to folder Components\Sub1:
using Microsoft.AspNetCore.Components;
namespace BlazorApp1.Components.Sub1
{
public partial class MyComponent1:ComponentBase
{
}
}
Verify that <MyComponent1\> works on some page. Eg. add lines to Index.razor:
#using BlazorApp1.Components.Sub1
<MyComponent1 />
Rename folder Components\Sub1 to Components\Sub1Renamed.
Visual studio does not display any error and project can be compiled/started. Code behind is even displayed 'linked' to razor file:
This seems as a VS bug to me.
When project is started Component1 is invisible on Index page, because component 'BlazorApp1.Components.Sub1.Component1has no visual code defined, because it has only non-visual definition 'behind the code'. The file 'Component1.razor' with visual is not used at all because it is in unused namespaceBlazorApp1.Components.Sub1Renamed`
Update Index.razor:
#using BlazorApp1.Components.Sub1Renamed
<MyComponent1 />
When project is started, Component1 is visible on Index page (but I assume that no code behind is processed)
Do you have any hint, how to make it work for blazor components ?
I am going thru this article here which talks about using the Razor template for Xamarin forms. I am however unable to find such a template in Visual Studio. The closest I came to was a nuget package. I don't think I can use that if I am to follow the example in the article above. Has anyone found any such problem before or can this only be done on Xamarin studio?
Why would they not make a provision for Visual Studio as well!
Just tried to use a razor template inside a Xamarin.Forms PCL and stumbled over the missing template. But then I followed the advice in the comments and it worked without any problems.
Add a new class (or whatever you want) to the portable project and name the file RazorTest.cshtml.
Replace the content of the new file with a skeleton like this:
Adjust the namespace and bind to your own ViewModel:
#using RazorTestNamespace.ViewModels
#model RazorTestViewModel
<html>
<body>
<h1>#Model.Title</h1>
</body>
</html>
Go to the class properties, find the CustomTool property and type in RazorTemplatePreprocessor. Then VisualStudio magically creates the belonging RazorTest.cs file with the code-behind.
Build the HTML when needed:
Inside the ViewModel:
RazorTest razorTest = new RazorTest { Model = razorTestViewModel };
string html = razorTest.GenerateString();
I am using visual studios 2015 to write react code. I am trying to understand ReactJs.net as well.
When I made my app.js folder and put this code in
import React from 'react';
const App = () => (
<div>
<h2>User List</h2>
<UserList />
<hr />
<h2>User Details</h2>
<UserDetails />
</div>
);
export default App;
everything is underlined and I see this message
"EcmaScrpit6 feature. Your current language level is EcmaScrpit5"
How do I change so I don't get this message anymore?
Old post but here's the answer since this issue does arise now and then: This is a ReSharper error that results from scanning your Javascript code. If you place the cursor over the code with squiggly red lines under it and press alt-Enter to bring up the ReSharper context menu, you will be offered the opportunity to 'Change to ...', whatever the feature you are using requires, e.g. ECMAScript 2015 or whatever. Make sure you do not exceed whatever you have configured in your Typescript config (tsconfig.json) compiler options and double-check browser compatibility before you change to a new higher ECMAScript level in your Javascript code.
If you want to manually manage what ReSharper complains about, Click Extensions/ReSharper/Options in Visual Studio to bring up the ReSharper options dialog. Scroll down to Code Editing->Javascript and click Inspections. You will see a drop-down with the label 'JavaScript language level:' there. Select whatever ECMAScript level you want there and save the settings. Done.
On an ASP.NET MVC 5 project using bundling and minification, I have a Javascript view model that I populate in the .cshtml file. The view model references knockout via ko, which works fine. However the JsHint output that comes from Web Essentials reports warning W117, 'ko' is not defined for each reference to ko.
The .js files each look like this:
/* exported MyViewModel */
function MyViewModel(viewModel) {
self.someValue = ko.observable(); // JsHint warning on this line.
...
}
The .cshtml files each look like this:
...
#section Scripts {
<script>
ko.applyBindings(new MyViewModel(ko.mapping.fromJS(#Html.Raw(Json.Encode(Model)))));
</script>
}
How do I keep the benefits of the "not defined" warnings generally, but avoid these false warnings?
From your Web Essentials menu, choose Edit global jshint settings
Scroll to the bottom of the .jshintrc file and add this:
"globals" : { "ko": false} // additional predefined global variables
This will prevent jshint from complaining about ko but will still warn you about other undefined symbols.
Note that you can also do this on a per file basis by putting this comment at the top of your javascript file.
/*global ko*/
The new Web Essentials is able to read the .jshintrc from the parent directories as well.
Select the Edit global JSHint settings (.jshintrc) from the Web Essentials menu.
Copy the file contents into a ".jshintrc" file in the solution folder.
Edit the file as required (e.g. add the ko as a global variable)
This way the .jshintrc can be added to version control to share it with all developers without having to edit the global JSHint settings on the individual workstations.
I am trying to get Jquery intellisense working in Visual Studio 2010.
I've looked around on StackOverflow and tried adding this to my view:
#{
/// <reference path="/Scripts/jquery-1.5.1-vsdoc.js"/>
}
That's not working.. I've got it working by adding the same script tag to each view but this is less than ideal since i want to keep all my scripts in one place at the bottom of my layout page.
Add the <script> tags to each view inside an #if (false) { ... } block.
The IDE will still see them, and provide IntelliSense, but they won't do anything at runtime.