VS Code Intellisense for JS files without *.d.ts - javascript

In VS Code, how do I include js files for Intellisense/autocomplete, without compiling them in Angular, and without creating definition *.d.ts files for each of them?
I have an Angular 4 (actually Ionic 3 which uses Angular 4) project where I'm trying to use VS Code as an editor, but Intellisense for JavaScript files only seems to work for the current file in focus and not for other JS files in the same project, unless I include the files (which are in the path "www/js/*.js" ) in the compiler options in the tsconfig.json file:
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"www/js/*.js"
],
The problem is, I don't want to include those files in the compile, since they're already referenced in the index.html template. When I compile with them, I get errors. I only want to include them in Intellesense, not compile them. Any way to achieve this, WITHOUT creating *.d.ts files for each of them?
Currently my workaround is to just use a different editor (Adobe Brackets) when editing my js that I don't want compiled, so that I can use the Intellisense of Brackets (which works very well), but I'd prefer to just use VS Code editor for everything if possible.
Thanks in advance!

After more research combined with lots of trial and error, I was able to find that adding a jsconfig.json file to my www folder (it didn't work correctly when I put it in my root folder alongside the tsconfig.json file), with the following contents, then it seemed to at least make Intellisense work between the js files, though I still haven't been able to work from the ts files to the js files. Here is the contents of my jsconfig.json file:
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"allowSyntheticDefaultImports": true
},
"include": [
"js/*.js"
],
"exclude": [
"node_modules"
]
}
I hope this helps someone else who comes across the same problem.
If anyone finds a way to get the Intellisense to work for the js files, while working in the ts files, please post an answer here. Thanks!

Related

VS Code refactoring in JS doesn't seem to work in unopened files

When trying to refactor function names, variable names, or class names within all files using F2 (as shown at https://code.visualstudio.com/docs/editor/refactoring#_rename-symbol), I only seem to have success when those other files are open in the editor. If they're closed, VS Code won't rename those instances. Am I missing something?
Before rename with files closed:
After rename with files closed:
Before rename with files open:
After rename with files open:
I tried looking into settings for refactor or replace, but didn't find anything that wasn't enabled that obviously should be. If I successfully rename something when a file is open, undo it, then close the file and re-attempt the refactor, it fails again.
EDIT: I submitted this as a bug to the vscode team on github: https://github.com/microsoft/vscode/issues/146120
Thanks to Andrii Dieiev on Github.
https://github.com/microsoft/vscode/issues/146120#issuecomment-1079793615
Adding a basic jsconfig.json file is enough to ensure all files in our project are interpreted as part of the workspace:
{
"compilerOptions": {
"module": "commonjs",
"target": "es6"
},
"exclude": ["node_modules"]
}

How to configure to run typescript output in browser?

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"
]
}

Project-wide Intellisense in VS Code?

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

Why is VS Code javascript intellisense dependent on the files I have open?

I have a project using .js and .es6 files (Rails, though I don't think that matters) on which I'm trying to use VS Code's javascript intellisense per these instructions. I have a jsconfig.json file:
{
"include": [
"app/assets/javascripts/**/*",
"vendor/assets/javascripts/**/*"
],
"compilerOptions": {
"target": "ES6",
"checkJs": true
}
}
at the root and all the javascript is in the folders mentioned in the include section. I've also created a globals.d.ts file at the root.
If I open globals.d.ts in VS Code and then run Typescript: Restart TS server, VS Code recognizes those global variables in javascript files. However if I then close globals.d.ts and run Typescript: Restart TS server again, VS Code does not recognize the globals. This also happens with global variables created in other javascript files. For example, say Class.es6 defines a class. I only get intellisense for the class if I have Class.es6 open in VS Code.
I'm not sure first why my setup isn't working, and second why it would ever depend on which files I have open at the time in VS Code.
Since you explicitly specified include, only those included files will be part of your javascript project. You also need to put global.d.ts in your include if you want it to be picked up

add typings to javascript project

I'm using closure library, but vscode doesn't understand the goog.require statements so intellisense is kind of useless.
I found typings at https://github.com/teppeis/closure-library.d.ts, and this works if I add a /// comment to the top of the file.
But it's going to get really annoying to add this to every single file in my project. Is there some way I can configure vscode to automatically reference this for all the javascript files in the project?
Try creating a jsconfig.json file at the root of your workspace:
{
"compilerOptions": {
},
"exclude": [
"node_modules"
]
}
This creates a project that will include any .js and .d.ts files in your workspace. You can also explicitly manage which files are part of a project using the files or include jsconfig options: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Categories