When working with Visual Studio Code on Windows to develop Angular applications, I recall that if I removed an import statement, vscode would almost immediately underline in red all of the places where those artifacts were being referenced.
However, now I am working in vscode on a Mac to develop React applications, and I've noticed that if I remove an import statement, I do not get any red-underlining like I am used to.
Any thoughts as to how I can get this functionality back? I imagine its due to an Angular package I had installed on my previous workspace, that I no longer have.
#Matt Bierner gave a good advice to check instructions, but after reading it I can say that the best option is to create or modify jsconfig.json by adding "checkJs": true
{
"compilerOptions": {
"checkJs": true,
},
"exclude": ["node_modules", "**/node_modules/*"]
}
By default, VS Code only checks the syntax of JS files and will not complain about undefined variables like it does with TypeScript
You can follow these instructions to enable type checking in plain old JS files. The simplest approach is to add //#ts-check at the top of the file
I have a TypeScript project with a few real TypeScript classes, not just functions. I have 1 file per class. There are classes that depend on other classes. I can compile these whole TypeScript to JavaScript with tsc. I can also run locally the JavaScript output with Node. It runs fine. Actually I run a small test class. I don't use any third party library.
I want that a browser can run the generated JavaScript. So I tried to include the whole JavaScript output in my HTML website.
But the JavaScript does not run in a browser. I just tried to create an instance from one of the generated JavaScript class. I also copied the needed require.js file to my HTML project.
My question is: How can I configure tsc and requirejs that a browser can run my generated JavaScript?
My tsc generated require calls with relative paths. It is not a mystery that this does not work in a browser, but I don't know which variant would work. I am a bit upset, because I read so many tutorials and tried so many combinations and I am still not wiser. Many tutorials mention webpack, gulp, baseUrl and such things without showing an example that would run in a browser.
My tsc config is:
{
"compilerOptions":
{
"module": "none",
"target": "ES2018",
"removeComments": true,
"rootDir": "Source",
"outDir": "Build"
},
"exclude": [
"node_modules"
]
}
I'm using Visual Studio Code, currently working on a web project using PHP, HTML, CSS, JS. I've found the intellisense features (e.g. auto-completion and go-to definition) useful, particularly in JS. However, it only seems to scan open files, not the entire project to detect variables and functions. Since my code is split among various files with global items, is there any way (via setting or extension) to get it to scan the entire project?
See our JavaScript Docs for help getting started. You likely need to create a jsconfig.json file at the root of your workspace:
{
"compilerOptions": {
"target": "ES6"
},
"exclude": [
"node_modules",
"**/node_modules/*"
]
}
This tells VSCode to treat all JS files in your workspace (even unopened ones) as part of the same project
I am using VS Code 1.2.1 and learning how the rich editing support works for javascript. (intellisense, peek, go to definition, etc)
There are two situations where vscode does successfully load the require()-ed module, but one situation that it does not provide any rich editing support. Here is an example w/ comments:
// vscode knows about var _ because I already did
// $ typings install lodash
var _ = require('lodash');
// vscode knows about var fu, because the test.js is in project context.
var fu = require('./test.js');
// vscode is unaware of var tree, even though I copied the src into the
// project context.
// $ cp -r node_modules/tnt.tree/src lib/tnt.tree
var tree = require('tnt.tree');
console.log(tree); // ok
The last one, tnt.tree is giving me trouble. The code above does successfully build with webpack, and run OK. But vscode says the variable tree is 'any', with no additional info.
Finally, here is my jsconfig.json:
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"diagnostics": true,
"allowSyntheticDefaultImports": true
},
"exclude": [
"node_modules",
"dist"
]
}
Summary: there are no typings for tnt.tree. So I copied the module of interest (tnt.tree) out of node_modules and into a lib/ directory, to try to make vscode aware of it in the project context. But that doesn't seem to work. Any pointers would be greatly appreciated, as I am sure this is a problem I will revisit over and over when trying to learn new Js modules.
I filed a bug with the vscode team, and they reassigned it to the typescript team. So this sounds like a bug with the editor itself:
IntelliSense based on type inference not working in node_modules?
https://github.com/Microsoft/TypeScript/issues/9323
The "Compile on save" feature isn't working for me after upgrading to Visual Studio 2015. When I make a change to a .ts file in my project and save, the status bar at the bottom of the IDE says Output(s) generated successfully, but the generated .js file doesn't change.
Here's what I've tried:
adding the following to the root <Project> element in my .csproj:
<PropertyGroup>
<TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
</PropertyGroup>
checking and unchecking the "Automatically compile TypeScript files which are not part of a project" option in Tools -> Options -> TypeScript -> Project:
double checking to make sure "Compile on save" is checked in my project's TypeScript Build properties:
What am I missing?
As a side note, the TypeScript compilation step does work as expected when triggered by a regular build.
For me it was this option in tsconfig.json:
"compileOnSave": true,
"compilerOptions": { ... },
Restart Visual Studio for this change to take effect.
I stumbled upon this problem today: I fixed that by using the new "watch":true compiler option, also available through JSON in most recent TypeScript versions:
{
"compilerOptions": {
"watch": true
}
}
After doing that, I had to solve another issue related to the following error that appeared in the output window:
Object doesn't support property or method 'watchFile'
It turned out that my system was using an outdated version of TypeScript (1.0.x), despite I was sure I had a newer one that came with the Visual Studio 2015 Update 1 (1.7). If you run into this problem, you can easily check your tsc version by typing tsc -v from a command-prompt.
If it says 1.0.x or anything < 1.7, it's probably due to the fact that you have some old references in your PATH environment variable. Be sure you have 1.7 or later installed by checking inside your Microsoft SDKs folder, which is the one used by Visual Studio to install the TypeScript packages as they get updated:
C:\Program Files (x86)\Microsoft SDKs\TypeScript
If not, update accordingly. Open CPanel > System > Advanced > Environment Variables, select System Variables and click on Edit; browse through the list looking for any reference to the TypeScript folder, change one of them to make it point to your TypeScript most recent installed version (1.7 or above) and delete any other dupes. See also screenshot below:
For additional details, read this post on my blog.
Solution:
For me, and I am quite sure this is also the case for others, this was due to a mistake in the tsconfig.json.
You need to add "compileOnSave": true. But in the global section not inside compilerOptions.
Wrong:
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"compileOnSave": true
},
"exclude": [
"node_modules",
"wwwroot"
]
}
Correct:
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5"
},
"compileOnSave": true,
"exclude": [
"node_modules",
"wwwroot"
]
}
Best regards,
Anders Both
Basechat.
This issue seems to have been resolved with the most recent update to the TypeScript Language Services extension.
See this answer for instructions on how to apply this update.
With typescript 2 you have to delete "outDir": from your tsconfig. Fixed the bug for me in visual studio.
In my case, I had installed Visual Studio Community 2015 along side VS 2012. I had been using Web Essentials for typescript in 2012 which appeared to conflict with 2015.
Uninstalling Web Essentials in 2012 fixed the issue for me.
Not sure if this will help anyone.
I though I was having issues compiling, but it was compiling on save. I just didn't have my solution explorer toolbar toggled to show all files.
The file was there, just waiting impatiently to be added to the project.
In project properties -> "TypeScript Build", you can also simply just uncheck "Do not emit outputs if any errors are reported." Having it checked seems to deactivate transpiling on save, where there is an error or not.
The "compileOnSave": true, wasn't working for me. I finally figured out that Visual Studio doesn't honor the "compileOnSave": true, value if it is defined in another .json file that you're extending. It has to be in the root in order for it to work.
locate the file i.e. C:\file.ts in your terminal/cmd and type
tsc file.ts -w // watches for file changes and converts on save
Check if you have the TypeScript version installed which is configured in the project. Somehow I received no warning that I don't have TypeScript 3.7 installed, but the compile-on-save feature stopped working silently.
Once I installed TypeScript 3.7, it was working again.
Exact same problem here.
I am using Visual Studio 2015 update 3 and TypeScript 2.9.2.0. In tools/options/projects and solutions/external web tools, I upgraded $(PATH) to the second position.
With all these configurations, compileOnSave: true doesn't work for me. The workaround solution is open a command line, run ng build --watch on the side and let node take care of auto compilation
I had a similar but not the same issue in Visual Studio 2019
My project was set up to use TypeScript 2.9
I had TypeScript 3.8 installed, and the code did compile, but wouldn't compile on save
I installed the older version, TypeScript 2.9, restarted VS and then it burst into life