Prevent Web Essentials JsHint "ko is not defined" warning when using Knockout - visual-studio-2013

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.

Related

Visual studio suppress error on undefined SASS variable

I'm trying to suppress a specific error that is related to a SASS file in Visual Studio. I'll mention that everything works great, the CSS file is generated exactly as the SASS files should generate it, and even with this error on VS, so I think maybe it's a bug on VS.
Basically what I'm doing is that I have 2 SASS files that I declare some variables in them as settings for another SASS file that contains some mixins that work according to the settings file that provided in the context.
For exmaple, these are the 2 files for the settings:
_settings-ltr.scss
$bi-app-left: left;
$bi-app-right: right;
_settings-rtl.scss
$bi-app-left: right;
$bi-app-right: left;
And this is the file that uses those settings:
_mixins.scss
#mixin padding-left($distance) {
padding-#{$bi-app-left}: $distance;
}
#mixin padding-right($distance) {
padding-#{$bi-app-right}: $distance;
}
Now, basically the error says that the variable "$bi-app-left" is undefined (and "$bi-app-right" as well), and I'm really not defining these variables in the "_mixins.scss" file, I pass them to the context in some other SASS file, like this:
site.scss
#import '_settings-ltr.scss';
#import '_mixins.scss';
And it works great, except that error from VS:
My Question
How can I disable this error specifically, without disabling other SASS file errors?
This is because of how the VS SCSS editor resolves variables. It does so from the perspective of the file being edited; because the SCSS editor instance for _mixins.scss does not know how the imports are resolved in site.scss, it doesn't have a way to resolve this reference. If _mixins.scss had an #import chain up to the _settings-ltr.scss (or -rtl), then it would be able to resolve the variable and the error wouldn't be shown.
Similar feedback has been raised here as well. It would be worth opening a new feedback item to better describe the scenario (and also what you're using to compile SCSS, e.g. if you're using WebPack) so the team can prioritize this as a design change. It won't get addressed right away, but we do take the number of feedback items into account for prioritizing the backlog. (And I'd love to have more ammunition to make this feature a priority...)
Currently, there isn't a way in VS to disable a specific SCSS error. This could be another feature request, but it would be a low priority to implement.
I have activated intellisense for files declared elsewhere by referencing the main file (i'll name it mainfile at my example) that imports all the other using /// <reference path="./../mainfile" />.
The code should change depending on the nesting of the mainfile (replace with the name of your own starting file that imports everything else).
Also the difference between the scss file you are adding it. For instance for two folders deep ./.. for three ../.. and so on.
Another example. I usually name my starting file main and all scss files are two - three folder deep.
../../main
./../main
Sadly i did not find a dynamic way to reference the path based on unknown members of files. Also that line has to be added to every single file.
The solution above offers intellisense which sorts the error and you can see the values on hover, go to definition etc as well.

Transfer javascript code in html files to typescript files and link them to the views

I need some suggestions to transfer javascript code in html files to typescript files in Visual Studio 2015.
Right now, I have 4 HTML views, where I want to take out the javascript code and convert it to the typescript files. The views are:
Travel.cshtml,
Hotel.cshtml,
Tpa.cshtml,
Passengers.cshtml
Every view contains html code + razor and a javascript section.
I'm trying to create 4 typescript files and link them to the view. As the image shows, I have created the files in a folder called "pages". For now they are all just empty :)
How can I link those pages to the representative views, so that the
Travel.ts file is linked to the Travel.cshtml file?
Some may ask, why am I doing this? .. I'm doing this to get clean html files with no javascript in, so its easier to read. Also I need to learn the typescript syntax which is a little difficult for me.
Hope someone can help.
Valid javascript code is valid typescript code. So to get started, you can use your existing javascript code inside your typescript files.
Every time you save your typescript file in visual studio, typescript compiler will be compiling this file and generate the corresponding javascript file with the same name as of your typescript file name, provided you do not have any errors in your typescript file.The generated file will be in the same location of where you have your typescript files are. If you want to see those, you can enable the Show All files option in solution explorer.
You will not include the typescript files in your pages, instead we will use the generated js files. So in your case, in your Hotels view(Hotels.cshtml), you can include it like
#section Scripts
{
<script src="~/Content/Scripts/Pages/Hotels.js"></script>
}
Or if you want to bundle it, Add a new bundle in your RegisterBundles() method.
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/hotels").Include(
"~/Content/Scripts/Pages/Hotels.js"));
// Other bundles goes here
}
And in your view, use the bundle path
#section Scripts
{
#Scripts.Render("~/bundles/hotels")
}

Customise RTLCSS config for VS Web Essentials 2013

Visual Studio Web Essentials has the ability to auto-generate a Right-To-Left variant for CSS files.
This will automatically change CSS properties such as padding-left to padding-right.
However it also does other things such as changing file names from "right.png" to "left.png".
Web Essentials uses RTLCSS to do this which I know can be configured to turn some of these features off.
There is no obvious option in Visual Studio to be able to config RTLCSS through Web Essentials.
I know that Web Essentials is consuming RTLCSS via NodeJS using the following file:
C:\Users{username}\AppData\Local\Microsoft\VisualStudio\12.0\Extensions{webessentials}\Resources\nodejs\tools\server\services\srv-rtlcss.js
I could update the following line in this file to add custom options, however this would be specific to my machine and not the MVC solution I'm using:
var config = configLoader.load(null, path.dirname(sourceFileName), { options: { minify: false } });
Is there a way I can configure RTLCSS for Web Essentials specifically for my MVC Solution?
For example I know Web Essentials allows Solution specific settings via a WebEssentials-Settings.json file. Can I customise this file to use a version of the srv-rtlcss.js file which I could include in my MVC solution?
Configuration can be set using one of the following methods:
Put your config into your projects package.json file under the rtlcssConfig property.
Use a special file .rtlcssrc or .rtlcssrc.json
To edit the global RTLCSS settings, open web essentials menu then select "Edit global RTLCSS settings (.rtlcssrc)"
This will create the default configuration for you and place it in C:\Users\{username}, To make these settings local, create a copy of .rtlcssrc and place it in your project.

How to combine TypeScript output into multiple files in VisualStudio

I'm working on a web application which contains multiple SPA (AngularJS) applications, the front end code is TypeScript. I like the VisualStudio feature which combines JavaScript output into one file as I don't want too many JavaScript files. Is there a way to configure it so it still combines the files, but creates a few of them, one per SPA, let's say on folder basis?
I'd preferably like it done by VS, without any external tools.
Thanks
You can for sure. Currently, there are two options which are widely accepted (sorry for lay-out, markup does not seem to love me):
ASP.NET Bundles (in Visual Studio by default, .\App_Start\BundleConfig.cs - for more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862):
bundles.Add(new ScriptBundle("~/bundles/modernizr")
.Include("~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap")
.Include("~/Scripts/bootstrap/3.0.0/bootstrap.js",
"~/Scripts/respond.js"));
gulp-concat (external, but quite easy to implement):
/** bundle and uglify app JS output files. */
gulp.task('bundle-app-uglify', ['compile-app'], function () {
// concat and uglify source scripts
gulp.src(config.allAppJsFiles)
.pipe(uglify())
.pipe(concat(config.appBundleNameMinified))
.pipe(header(config.libraryHeaderTemplate, {
organization : config.libraryOrganization,
url: config.libraryUrl,
license: config.libraryLicense,
version: config.libraryVersion,
currentDate: new Date().toISOString()
}))
.pipe(gulp.dest(config.bundleFolder));
});

Typescript breakpoints not hit when debugging in WebStorm 7

I am using Typescript SDK 0.9.1.1 and WebStorm 7. I have a .ts file with a file watcher transpiling its .js and sourcemap files. I also have an HTML file that looks like this...
<!DOCTYPE html>
<html>
<head></head>
<body>
<p id="output">5</p>
<script src="HelloWorld.js"></script>
<script>
var u = new Utils();
document.getElementById('output').innerHTML = u.plusOne(5);
</script>
</body>
</html>
The plusOne function simply takes the number (in this case, 5) and returns that number plus one. My page, javascript and Typescript work fine, because the page says "6" when loaded.
I can set breakpoints in the .js file and they are hit (showing me the Typescript file's equivalent line) but if I set breakpoints in the original .ts file they are not. I've searched for this issue but my problem seems different from others' - I am running locally (not remotely) and I am setting the breakpoints in WebStorm, not Chrome's debug view.
In WebStorm, the Scripts tab shows only the .js and .html files. Should I be seeing more here? If that's the problem, how do I fix it? I've opened the debug configuration but I don't see a way to add the .ts file there.
To those of you that got here via Google:
All I had to do was make sure that sourceMap was set to true in my tsConfig.json like so:
{
...
"compilerOptions": {
...
"sourceMap": true,
...
},
...
}
Turns out this is due to an open bug in WebStorm. In practical terms, the workaround is to reload the HTML page from the browser (which is NOT the same as rerunning the HTML page in debug mode from WebStorm). If you do that then the breakpoints in the .ts file will be hit.

Resources