Visual Studio Code - compile Javascript on save - javascript

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

Related

Angular2 no changing in browser when modify typescript file

I'm using angular2 with Visual Studio 2015.
I completely new at angular2 so I'm discovering it step by step, right now I have an app.component.ts, displaying in html file, and everything works but when I'm making changes like the content of template in the typescript file nothing's moving, I style have the older content I tried to rebuild the project, close the project and re open it, tried to disable the cache like said in a topic but nothing works, what am I missing ??
You need to compile the typescript to javascript in order to see the changes. Simply run npm tsc in your console and your script will compile.
In case you are using command line I would suggest to install #angular/cli package. If you use ng serve your app will automatically reload if you change any of the source files.

Typeahead using NPM and MVC Core in Visual Studio 2015

I've entered the brave new world of MVC core and using NPM to get various JavaScript packages. However, I've hit a problem which I'm not entirely sure what the best option to solve is. Just to set the scene, I've got a gulpfile which is copying JS from various NPM packages in my project (such as jQuery and bootstrap etc...) to the 'wwwroot/lib' folder.
I now want to add a typeahead 'autocomplete' search box to a particular view, so I added typeahead to the package.json file and updated my gulpfile to copy the additional *.js files to 'wwwroot/lib'. All fine so far, the problem is when I debug my project and open that particular page I get an error where the typeahead.js file has some code at the beginning:-
require('xtend')
I wasn't aware of this command in JavaScript, but a quick search on the internet reveals this is part of JS when run on 'node' or node.js?
I have not used 'node' before (yes, ignoring the fact I'm using NPM to get packages - I only ended up doing that due to a Visual Studio bug in how Bower works) so the question is how do I now get (this particular) typeahead to run within a browser? So I figure options are:-
1) just manually download typeahead instead - but is that not defeating the point of having all these package managers in the first place?
2) start using Bower again (don't think the 'version' bug has been fixed yet)
3) use something to 'fake' the node 'require' commands so that it will work in browser
4) something else...
I've seen a few things that may solve this problem on the internet, but I didn't want to spend ages sorting out a fix which may be the complete wrong way of doing it. Has anyone any suggestions for the best route to follow?
Scratch that, I found another typeahead package on NPM called 'typeahead.js' instead of 'typeahead' and this is just standard JS no NODE stuff. Works perfectly in browser

Keep getting "tsc.exe" exited with code 1

As soon as I add a tsconfig.json file to my Visual Studio 2015 web solution I get the above error.
Also this stops the compiler from re-generating js files even when I set "compileOnSave": true.
When I double click the error it takes me into the Microsoft.Typescript.Targets file which contains a lot of issues such as Unknown Item Group "TypeScriptCompile". In the error list these appear as warnings but they are there whether I have a tsconfig.json file or not.
Is there any way of solving it or getting more information on what the problem is?
Install these 2 NuGet packages:
Microsoft.TypeScript.MSBuild and Microsoft.TypeScript.Compiler
It updates your project with MSBuild task definition and TS compiler and solves the compilation issue
For me installing TypeScript for Visual Studio fixed it, although TypeScript was already installed globally on my machine via npm
I am using a .NET Core 1.0 project and ran into the same situation of getting a tsc.exe return code of 1. My problem was an invalid tsconfig.json. However, msbuild does not provide those details.
The easiest way to find out is to enable detailed output in Visual Studio -> Tools -> Options -> Projects and Solutions -> Build and Run -> MSBuild project build output verbosity. Change this to Detailed. After compiling, find tsc.exe in the output window to see the actual error tsc was throwing.
I had this problem as well after using some standard Angular / Typescript tutorials. The solution was as simple as to update typescript in Visual Studio.
For some reason the default is now 1.8.4. and it does not allow you to automatically update it from Visual Studio Extensions and does not say it is out of date. You just download it from here and install newest version yourself. Download link may change in the future of course.
P.S. I think the problem was caused by the fact that some options that did not exist in older compiler were used.
This worked for TeamCity build server with Visual Studio 2015 when I had upgraded a project from Typescript 1.8 to 2.3
Install package Microsoft.TypeScript.MSBuild
Update *.csproj as follows
Upgrade TypeScriptToolsVersion to 2.3 (in this case)
Remove two lines of Import Project that referred to
Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets
Note
Removing the import elements is important as they are referring to TypeScript installed in the %PROGRAMFILES(X86)% folder.
Installing the package adds import elements that reference the packages folder - making your build more portable
I had same issue and what happened in my case is that the file .ts was in the project but it was not on file system. Something like this . So removed the file from project and everything started to work again.
Move all files within C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\Typ‌​escript into some new folder (e.g. backup), then try again. This will cause MSBuild to select tsc.exe from within the appropriately versioned folder instead of using the one in the C:\Program Files (x86)\Microsoft SDKs\TypeScript.
Installing Microsoft.Typescript.MsBuild fixed the issue for me, but only if I installed the penultimate version. The current (stable) version is 2.0.6, and after I installed it, the issue persisted. When I reverted to 1.8.11, the issue went away.
I had the same issue. Fixed it by removing the following from the project file
<TypeScriptToolsVersion>2.0</TypeScriptToolsVersion>
Double clicking on one of the .ts files inside of visual studio worked for me. It then came up with a dialog box asking if I wanted to update the project to the latest version of TS. After that the project built fine and the compile error was gone.
There is need to Re-Install/Upgrade, Typescript in your system.
As i was facing same issue and after installing Typescript again got resolved the error, as tsc.exe was missing in (C:\Program Files (x86)\Microsoft SDKs\TypeScript\2.1).
We are using npm and angular-cli outside VS to transpile our typescript. I ran into the problem described above on the only dev box that had the Web Essentials extension loaded. After trying installing, and then uninstalling the MS nugets and TypeScript extension described above to no avail, uninstalling Web Essentials finally did the trick.
I was facing same issue, and the reason was, 2 developers were working on same project so when he added new .ts files into project and some angular controllers. The project was rebuilding and running as expected however when another developer tried to take latest source code on his machine and on rebuilding he was getting same error "tsc.exe" exited with code 1.
So reason was the files created/added in source control was not showing added on
developer 2 solution. Please try to check if all the .ts, .js files are up to date on both developers solution.
I had the same issue on a solution using AngularJS but without the compiler (below 2.x so not needed). I simply removed the index.d.ts from script folder and it was ok (no NuGet packages necessary)
If youre are facing this problem when updating from bootstrap 3 to 4 just delete .ts file created inside the Scripts Folder then build again.

Electron (Atom-Shell) Run unix command from link in page

I am trying to learn Electron (Atom-Shell) but I am finding it pretty tough to find documentation for it...
I am simply trying to figure out how to create a link with in index.html, and have it open a terminal window or run some sort of program.
I learn languages by learning specific tasks as I need them in a program, so that is why I am asking so then I can utilize the technique used in other ways in my programs.
Thank you for helping.
Well, essentially Electron is just a customised version of a Chromium browser that comes packaged with Nodejs and some really cool packages that basically allow you to run the custom browser as if it was a native platform application. Because of that creating an Electron app is very similar to creating a web-app that has a Nodejs back-end.
So to get started with a simple "Hello World!" app, you can just run the following npm...
npm install electron-prebuilt --save-dev
Once the npm is installed you'll need three files to run an Electron app.
A package.json file
A javascript file (default is main.js)
An html file (default is index.html)
See this GitHub repo for a quick copy/paste version of each and more detailed instructions: https://github.com/mafintosh/electron-prebuilt
after that you're ready to simply run your app...
$ electron .
Finally, one way to open a terminal window would be to use an onclick attribute in your html to trigger a child_process, found here, in a function.
That's it! You should be able to edit your html and javascript files as you would for any web-app, and take advantage of the added features that Electron provides.
I'd also check out these resources for more info:
A Quick Start intro to how Electron works -- https://github.com/atom/electron/blob/master/docs/tutorial/quick-start.md
The Atom discussion forum (Because Atom was built with Electron, and is made to be hackable, the community is quite active) -- https://discuss.atom.io/c/electron
A cool repo to keep up with the latest info. It includes links for apps that currently use Electron, tutorials, videos, and more --
https://github.com/sindresorhus/awesome-electron
I hope that helps!

Typescript command line compilation without NodeJS

I was looking over Typescript and was a bit confused about how you could build your js files from the ts files via the command line.
It implies in the documentation that you can do it easily through nodeJS, which would be great if I wanted a dependency on nodeJS... So is there any way to compile it via the command line without having nodeJS or visual studio?
This may seem crazy to some, but I would just put a build script step to output the javascript at the end if possible then package it into my release, as I tend to do most of my javascript development with RubyMine and don't want a dependency on nodeJS or Visual Studio for my build server.
If you install the TypeScript Tools without Visual Studio installed on the machine, tsc.exe and its dependencies will still get installed.
You can also just xcopy deploy tsc.exe (I don't have a definitive list of its dependencies, but it's pretty straightforward to figure out, or just copy everything that gets installed to the SDK folder) to a build server. The only thing unexpected you would need is msvcr110.dll, which you may or may not need to copy to tsc.exe's path.
The link in Ryan's answer is now heavily outdated and if you use it will generate a TS1005 error.
Here's what you want https://www.microsoft.com/en-us/download/details.aspx?id=55258 and it is still put in the same Program files x86 / Microsoft SDKs directory, and for me at least was not added to my path.

Categories

Resources