How to create NPM, Javascript Project in VS2015 - javascript

I always see in tutorials, that they have a "special npm reference", which I have not.
All what I can see is the "normal" references (.net assemblys). I also do not find any pure "Javascript" Project type.
I am on Update 3. Do I need something special to make this work?
I have a package.json and Gulpfile.js in my project and compile LESS with it successfully, but don't see this references.

The NPM integration/JavaScript project type isn't included in the base install of Visual Studio. For these features to be available, you'll need the Node.js Tools extension - if I recall correctly, there's a shortcut to do this in the New Project wizard in recent versions of VS.

Related

Visual Studio Code - compile Javascript on save

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

Visual Studio 2017: js file causes many typescript errors

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 🙂

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.

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.

How do I install JSLint on Ubuntu? [closed]

Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
How do I install JSLint on Ubuntu?
I downloaded the source jsl-0.3.0-src.tar.gz from http://www.javascriptlint.com/download.htm and then extracted it to a dir called jsl-0.3.0 on my Desktop. I then moved it to /usr/local/bin which I have read is my PATH. I also want to mention that I have Rhino 1.7 installed already.
When I try to run jsl from terminal I got the following message:
No command 'jsl' found, did you mean:
Command 'jls' from package 'sleuthkit' (universe)
Command 'js' from package 'rhino' (main)
Command 'sl' from package 'sl' (universe)
Command 'fsl' from package 'fsl' (multiverse)
jsl: command not found
So I how do I properly install JSLint?
How to install JSLint on Ubuntu:
Install nodejs (includes npm, the Node Package Manager):
sudo apt-get install nodejs
Install node-jslint. either globally:
sudo npm install -g jslint
or locally, and include it in $PATH:
npm install jslint
and add this line to your.bashrc (adjust version number as appropriate)
alias jslint='~/.npm/jslint/0.1.8/package/bin/jslint.js'
Here are the instructions I followed to have jslint working on Ubuntu 10.10/Vim 7.3 (and Mac OS X).
EDIT
So, I've just spotted a mistake in the given link. Here are the correct steps (assuming you have already downloaded and unpacked the archive to your desktop:
$ cd /path/to/jsl-0.3.0/src
$ make -f Makefile.ref
$ cp Linux_All_DBG.OBJ/jsl /usr/local/bin/jsl
At that point you can open a new terminal window and type $ jsl to display a quick help or invoke it from Vim or directly on a file in the terminal.
END EDIT
/usr/local/bin is not your "PATH", it's only one of the many directories that can be part your PATH environment variable. $ echo $PATH will tell you what these directories are and thus where you can put the jsl executable. You can also put it in another place and add an alias to your .bashrc.
Why do you expect to be able to run jslint from rhino?
You said you just copied the source to /usr/local/bin. You need to compile it. Follow the build instructions in the README.html
Unix
Use 'gmake -f Makefile.ref' to build. To compile optimized code, pass BUILD_OPT=1 on the gmake command line or preset it in the environment or Makefile.ref. NOTE: Do not attempt to use Makefile to build the standalone JavaScript engine. This file is used only for building the JS-engine in the Mozilla browser.
Each platform on which JS is built must have a *.mk configuration file in the js/src/config directory. The configuration file specifies the compiler/linker to be used and allows for customization of command-line options. To date, the build system has been tested on Solaris, AIX, HP/UX, OSF, IRIX, x86 Linux and Windows NT.
Most platforms will work with either the vendor compiler or gcc. (Except that HP builds only work using the native compiler. gcc won't link correctly with shared libraries on that platform. If someone knows a way to fix this, let us know.)
If you define JS_LIVECONNECT, gmake will descend into the liveconnect directory and build LiveConnect after building the JS engine.
To build a binary drop (a zip'ed up file of headers, libraries, binaries), check out mozilla/config and mozilla/nsprpub/config. Use 'gmake -f Makefile.ref nsinstall-target all export ship'
As for your question about the difference. It says on the download page that one is written in JavaScript itself.
We all stand on the shoulders of giants. I would like to especially acknowledge Douglas > Crockford's work on JSLint. This lint is itself written in JavaScript and is an
interesting and rather sophisticated script. Crockford's ideas about good coding
practices served as a springboard for many of these lint rules.
Look at your "jsl-0.3.0/src/README.html" file. This says:
1) You have a "source package". You need to "build" it (with a C compiler), then install your build.
2) This is more than just JSLint. It's an entire Javascript engine. Per the README:
This is the README file for the JavaScript Reference (JSRef, now
better known as SpiderMonkey) implementation. It consists of build
conventions and instructions, source code conventions, a design
walk-through, and a brief file-by-file description of the source.
JSRef builds a library or DLL containing the JavaScript runtime
(compiler, interpreter, decompiler, garbage collector, atom manager,
standard classes). It then compiles a small "shell" program and links
that with the library to make an interpreter that can be used
interactively and with test .js files to run scripts. The code has no
dependencies on the rest of the Mozilla codebase.
3) Here is Douglas Crockford's original JSLint page:
http://www.jslint.com/
4) And here is a a good example of how you might use JSLint locally, on your own PC:
http://code.google.com/p/js-ria-tools/wiki/JSLint
5) You say you already have Rhino - good. In Google, you'll find many obsolete links to www.jslint.com/rhino. Here's why - along with links to current Rhino-related info:
http://hustoknow.blogspot.com/2011/02/jslint-and-rhino-support.html
'Hope that helps!

Categories

Resources