The tutor of my video tutorial compiles javascript/react on save with his VS Code editor. Mine dont.
How can I config VS Code to do this?
Remark:
I find solution for typescript "Visual Studio Code - compile on save", but suggested solution does not work for me.
#added information:
the project is created with create.react-app. npm start opens chrome, and compilation errors are then shown in Chrome's DEV-Console, as noted by Shishani . My tutor has the code compiled on VS Code Terminal console. This offers a quick check of the code compilation before I go to webbrowser, to check for errors there, which seems to me much more intimidating with it's long callstacks.
If you create your React project with create-react-app, and then start it with npm start, it compiles automatically on save. Also, if it's not a React project, but just JS/HTML/CSS, you can open your project with the "Live Server" extension in VSCode, and it will update your page every time you save a file in your VSCode workspace.
You can even do like I do, and enable constant autosave, with the AutoSave: afterDelay setting in VSCode (if you dare), and then set the save delay to a super small number (mine is 2ms) so you don't even need to hit save anymore (go to File>Preferences>Settings>[Search "Auto Save"]).
If you have created react project using there official cli tool (create-react-app) then on saving js files it gets re-compile. This is because they are using webpack bundler behind the scene.
If you have created normal html or js files without any such cli tools then it won't work directly, You have to use some kind of bundler with dev-server support to do it.
Parcel! is a great bundler to use without configuration
I am using vsCode for my development and due to the odd nature of my environment I have an api that I can't physically access, currently i'm writing up manual .d.ts files that will act as a psuedo sdk to provide intellisense information and hopefully, linting. Issue is eslint in vscode doesn't seem to want to read those files when telling me what variables are undefined, i'm also not entirely sure how to set that all up correctly?
Update:
I believe I solved the issue, by putting, //#ts-check at the top of my javascript file, and using the reference path inline xml tslint seems to start working, giving me linting based on my type declaration files. Also using checkJs: true in your tsconfig.json works as well.
It sounds like you're simply trying to get VSCode to do interactive type-checking, and give you intellisense, for a Typescript-based project.
If that's correct, you shouldn't have to do ANYTHING special.
I installed John Papa's "Angular Essentials" extension, which happens to include Typescript support. Althought I would recommend this, there are a million other VSCode Typescript extensions freely available; most any of them should also do what you need.
I would also install the Chrome Debugger extension, if you haven't already done so.
Q: Does that help, or do you have specific questions that I haven't covered, or specific problems/issues with things you've already tried?
Please see the edit below
I have used the following package as a base for my VS Project ->
https://github.com/AngularClass/angular2-webpack-starter
Everything worked nicely in Visual Studio code, I then tried to convert it to a Visual Studio 2017 Project (node.js web)
Now some problems appeared
VS seems to install TypeScript definitions into a special folder C:\Users\MyUser\AppData\Local\Microsoft\TypeScript\node_modules\#types
Additionally I included #types/node in my package.json which resulted in the appropriate node_modules folder.
now VS complains with error code TS4090 (Conflicting defintions for 'node').
Is there a possibility apart from deleting the folder in \AppData to tell VS which #types it should use?
The whole integration of TypeScript isn't really clear to me...
Does MSBuild recognize an existing tsconfig.json? or would I have to configure it in in the project-file as seen here?
EDIT
I just noticed that I was actually editing a .js file.
As soon as I changed the extension to .ts every warning and error vanished.
I also got many typescript errors (like TS2307, can't find module '#angular/core') before changing the extension from .js to .ts
The file just did an import (from node)
import * as fs from 'fs';
Could anyone explain why I got this errors?
Why a JS files causes 200+ typescript errors (some don't even seem related to the import from above)?
EDIT2
the errors which occur are
TS2403 - Subsequent Variable declarations must have the same type.
TS2300 - Duplicate identifier 'PropertyKey'
TS4090 - Conflicting definitions for 'node' found (paraphrasing: found in ./node_modules and C:\Users\MyUser\AppData\Local\Microsoft\TypeScript\node_modules\#types
All the errors are caused by d.ts files in C:\Users\MyUser\AppData\Local\Microsoft\TypeScript\node_modules\#types or C:\Program Files (x86)\Microsoft Visual Studio\2017\Enterprise\Common7\IDE\CommonExtensions\Microsoft\TypeScript\lib.es6.d.ts
like Bowden Kelly noted, this seems the cause for this problems seems to be the definition files MS put in here C:\Users\MyUser\AppData\Local\Microsoft\TypeScript\node_modules\#types, as soon as I install my own definition files in ./node_modules VS finds both definitions (if present) when editing JS files.
So the solution would either be:
doing it the MS Way
somehow exclude MS Directory
This is a BUG related in https://github.com/Microsoft/TypeScript/issues/14565
I was able to eliminate the errors by enabling
For JavaScript, try to uncheck/disable the "new JavaScript language service" under Tools > Options > Text Editor > JavaScript/TypeScript > Language Service. This seemed to help me when I opened random JavaScript files and the error window would go crazy.
Regarding the Angular 2 errors (cannot find module #angular/core), if there is a tsconfig.json in the project directory both Visual Studio and the TS compiler will use that. If you close an reopen the solution everything on the TypeScript tab of project properties should be disabled.
Once you know tsconfig.json is working, if you are using TS 2.x the compiler should find and use the types that come with angular 2 under node_modules/#angular/core/index.d.ts, unless you have a setting in tsconfig that overrides this like types: [].
I have still not been able to figure out 100% what is going on in Visual Studio Errors window since I still get sporadic unjustified errors (I know this because I can still compile). I do know that the Visual Studio TypeScript Language Service is what controls errors and intellisense in the Visual Studio IDE and it is tied to a specific version of TypeScript (2.1 in VS 2017). The errors have always caused problems in both VS 2015 and now VS 2017 also. I think it comes down to the inner workings of the extremely undocumented TypeScript Virtual Projects, for which I have still not found a purpose.
These links are useful reading:
http://blog.angular-university.io/typescript-2-type-system-how-do-type-definitions-work-in-npm-when-to-use-types-and-why-what-are-compiler-opt-in-types/
http://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types
https://github.com/Microsoft/TypeScript/issues/14540
The definition files installed to C:\Users\MyUser\AppData\Local\Microsoft\TypeScript\node_modules\#types are used for giving JavaScript IntelliSense only. If you have TypeScript in your project or a project configured with a tsconfig.json, you need to fetch your own .d.ts files and store them in your project. Luckily this project comes with all the .d.ts files you need already in the package.json a simple npm install should do the trick.
I can tell you that the conflicting definitions with 'node' are likely due to having 2 copies of the node.d.ts file. If you manually installed one yourself, on top of the one included in the projects package.json, then you'll get those errors.
I'm not certain about the TS errors you are getting in your JavaScript file. Can you show me an example of one of the errors and a snippet of the code causing it?
Also you probably don't want integration with MSBuild as this project is already setup to run with npm scripts + webpack. You should check out this plugin: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.NPMTaskRunner
Finally I don't think you want to be inside a Node.js web project. For this project, you are probably best off just opening the folder in VS. To do that just use File > Open > Folder... and navigate to your root folder. This will give you all the editing tools you need without any MSBuild or VS project structure. Considering this project wasn't designed to take advantage of any of those features, it'll probably be easier just to ignore them for now.
Please let me know what other issues you run into.
FYI, this has been fixed in Visual Studio 17.2 🙂
I want to work with Senach Ext Js in a Website project in VisualStudio 2013.
The problem: VisualStudio respectively WebEssentials throws warnings like:
JsHint (W117): 'Ext' is not defined.
Here is the situation as it looks today:
The project is exactly what Sencha Cmd produced for me.
At the moment I want only a Website project and no server sided code involved (therefore I did not make a MVC or Web API project).
I know that there is a way to define some global symbols in each JavaScript file for JsHint, but I want to get the intellisense working too. So I am looking for the correct configuration for both use cases: WebEssential JSHint Warnings and Intellisense.
Maybe both problems need to be addressed separately. That would be fine too.
Is my directory structure correct (just took what Sencha Cmd built for me)?
How to address the problem to make intellisense working?
(How to avoid Webessential JavaScript warnings (it seems most or all of them are JsHint)?)
Update: Related question:
Enabling JSHint Support for Ext.js in Intellij Idea
Update:
"An _references.js file in any other location than
“~/Scripts/_references.js” will be just like any other JS file and
won’t be used for global intellisense. Even putting the file in the
root of your web project will not work as well."
Source: http://gurustop.net/blog/2012/03/03/javascript-js-intellisense-auto_complete-in-visual-studio-11-beta-the-web-_references-js-file/
still not working when I have the _references in a new "Script" folder:
So it seems like the final answer was to add a file called ~/scripts/_reference.js and then include a line to reference Ext JS in there. This enables Visual Studio to index the Ext JS source for Intellisense. For example:
/// <reference path="../ext/ext-all-debug-full.js" />
More on the Intellisense and _reference.js:
http://msdn.microsoft.com/en-us/library/bb385682.aspx
Note that due to the size of the Ext JS codebase, Visual Studio might take a few minutes to complete the indexing process and for Intellisense to start working smoothly.
I want to write an HttpHandler that compiles CoffeeScript code on-the-fly and sends the resulting JavaScript code. I have tried MS [JScript][1] and IronJS without success. I don't want to use [Rhino][2] because the Java dependency would make it too difficult to distribute.
How can CoffeeScript be compiled from .NET?
CoffeeScript-dotnet
Command line tool for compiling CoffeeScript. Includes a file system watcher to automatically recompile CoffeeScripts when they change. Roughly equivalent to the coffee-script node package for linux / mac.
CoffeeSharp
Includes a command line tool similar to CoffeeScript-dotnet as well as a http handler that compiles CoffeeScripts when requested from an asp.net site.
SassAndCoffeeScript
Library for Asp.net mvc that compiles sass and coffeescript files on request. Also supports minification and combination.
Manually Compile With IronJS
IronJS is a .NET javascript interpreter that can successfully load the CoffeeScript compiler and compile CoffeeScript.
Manually Compile With Node.js
Get the node binaries and add the bin directory to your path. Write a node.js script to load the CoffeeScript compiler and your CoffeeScript files and save the compiled javascript.
CoffeeScript is now fully supported by Chirpy:
http://chirpy.codeplex.com/
You specifically said that you wanted to write a runtime compiler, so this may not be exactly what you are looking for, but if the main point is to have a way to generate the javascript result, the Mindscape Web Workbench is interesting. It is a free extension for Visual Studio.NET 2010 and available in the Extension Manager. It gives Intellisense, syntax highlighting and compiles to JS as you write. I am just getting started using it but looks promising. Scott Hanselman talks about it here. It also supports LESS and Sass.
I've managed to compile CoffeeScript from .NET using IKVM, jcoffeescript and Rhino. It was straightforward, except that the JCoffeeScriptCompiler constructor overload without parameters didn't work. It ran OK with a java.util.Collections.EMPTY_LIST as parameter.
This is how I did it:
Download IKVM, jcoffeescript and Rhino.
Run ikvmc against js.jar, creating js.dll.
Run ikvmc against the jcoffeescript jar.
Add a reference to the jcoffeescript dll in Visual Studio. More references may be needed, but you will be warned about those.
Run new org.jcoffeescript.JCoffeeScriptCompiler(java.util.Collections.EMPTY_LIST).compile() in your code.
The next step would be to create a build task and/or an HTTP handler.
Check out the new coffeescript-dotnet project, which uses the Jurassic JavaScript implementation.
Since the CoffeeScript compiler now runs on Internet Explorer, after a couple of recent tweaks, it should be good to go within other MS-flavors of JavaScript as well. Try including extras/coffee-script.js from the latest version, and you should be good to go with CoffeeScript.compile(code).
I tried running the bundled extras/coffee-script.js through Windows Based Script Host (or just wscript) and it didn't report any issues. I then added this line:
WScript.Echo(CoffeeScript.compile('a: 1'));
at the end of the file and run it through wscript again and it printed the resulting JavaScript correctly.
Are you using COM objects? Can you share some more of the code responsible for initialising the MScript object reference?
CoffeeScript in Visual Studio 2010
It's Chirpy's fork (chirpy is a tool for mashing, minifing, and validating javascript, stylesheet, and dotless files)
"OK, I think I got it working on my fork, based mostly on other peoples' work. Check it out:
http://chirpy.codeplex.com/SourceControl/network/Forks/Domenic/CoffeeScriptFixes"
from http://chirpy.codeplex.com/workitem/48
I don't have a direct answer, (I hope you find one), but maybe take a look at the following to see how it might be done.
Jint - JavaScript interpreter for .NET
Using IKVM to compile Rhino would get rid of the Java runtime requirement.
jcoffeescript. I haven't looked at jcoffeescript, but I think it depends on JRuby and Rhino. You could possibly IKVM.NET this as well.
IronJS now supports CoffeeScript and is generally faster than the other .NET JS engines:
I have a blog post about wiring the two together here:
http://otac0n.com/blog/2011/06/29/CoffeeDemo-A-Simple-Demo-Of-IronJS-Using-CoffeeScript.aspx
My main editor is VS 2010 and I love the WorkBench extension. it's nice it auto compiles to js everytime you hit save on your .coffee file, also introduces you to SASS which I had read about but never got around.
They offer a pay version to that will autmaically shrink/minify your js and css files as well, since your.coffee and .scss are your source files anyway.
I'd encourage all VS users to go ahead and install this especially if you run VS 2010.
The only knock, and someone please correct me or enlighten me, is that with .coffee syntax it's not highlighted the way say html, js, c# code is. it might be because I am using a color scheme from http://studiostyl.es/ and for the record http://studiostyl.es/schemes/coffee- just shares the name coffee no special syntax highlight support for coffeescript that I am aware of. but no reason not to start using the workbench addin today!
Okay workbench website claims: syntax highlighting so again maybe it's the studiostyle.es i chose.
I know this is old but I came here to answer a very similar question: How do I get my CoffeeScript to compile using Visual Studio 2012 Express? Note that the free Express version does not allow any extensions so I could not continue to use the Mindscape Workbench extension that had served me well for quite some time.
It turns out to be very easy. Just use NuGet to install the Jurassic-Coffee package and off you go.
One advantage of using this package over mindscape workbench is that you can reference your coffee directly from the script tags in the html. It minifies and caches the compiled JS so you only do work if the requested coffee file has changed.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="home.coffee"></script>
</head>
The mindscape workbench allows you to bundle together different coffescript files which is very handy for modularising your coffeescript. You can also do this using Jurassic Coffee by utilising the #= require statement to include other coffee module files, for example:
#= require Classes\GridWrapper.coffee
class UsersGrid
constructor:->
#grid = new GridWrapper()
I think having the #= require staement in the coffee file is actually cleaner and clearer than the mindscape workbench approach, which kind of hides all this behind their interface so you forget easily what dependencies you have.
Note
There is one potential gotcha. The Nuget installer will put in an httphandler entry into your web.config that may not be compatible with IIS Express integrated managed pipeline mode.
You might therefore see the following error:
An ASP.NET setting has been detected that does not apply in Integrated
managed pipeline mode.
To fix this just remove the handler shown below.
<system.web>
//other stuff
<httpHandlers>
<add type="JurassicCoffee.Web.JurassicCoffeeHttpHandler,JurassicCoffee" validate="false" path="*.coffee" verb="*" />
</httpHandlers>
</system.web>
You could simply write a port of it to C#. I have ported Jison to C# (which is the underlying project that makes CoffeeScript run). I would think it may be a bit different, but both Jison parsers work the same.
I have not pull requested it back yet to Jison's main architecture, but will be doing so soon.
https://github.com/robertleeplummerjr
Instead of shelling out to CScript you could shell out to Node.js (here are self-contained Windows binaries)
I've tried to compile the extras/coffee-script.js file, unmodified, to jsc, the JScript.NET compiler for .NET, and I got many errors. Here are the noteworthy ones:
'require' is a new reserved word and should not be used as an identifier
'ensure' is a new reserved word and should not be used as an identifier
Objects of type 'Global Object' do not have such a member
Other errors were caused by the above said errors.
You might also want to check out jurassic-coffee, it is also a coffee-script compiler running the original compiler in jurassic.
It features sprocket style "#= require file.coffee" or "#= require file.js" wich can be used to keep .coffee files modular and combined right before compilation as well as embedding .js files.
It sports a HttpHandler with file watchers for .js and .coffee files that keeps track of what .coffee files needs to be re-compiled and pass through to the compiled *.js files for the rest.
jurassic-coffee is also available as a Nuget package
https://github.com/creamdog/JurassicCoffee
I've done an HttpHandler that uses Windows Script Host behind the scenes: https://github.com/duncansmart/LessCoffee and works great (it also compiles *.less files).
It's on NuGet: http://nuget.org/List/Packages/LessCoffee
It's based on this simple wrapper: https://github.com/duncansmart/coffeescript-windows
I wrote an inteructive shell using v8.
https://github.com/mattn/coffee-script-v8
This work as single executable file. (Don't use external files)
It can't use require(). But enough to learn coffeescript.