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
Related
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 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
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!
What is the up-to-the-minute advice on getting javascript / jQuery Intellisense in VS Code (1.4.0)? Most answers I have found use TSD, which I understand is (albeit very recently) deprecated.
I have a jsconfig.json
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true
},
"exclude": [
"node_modules"
]
}
I (in this project) have a folder structure open that contains many "websites". I have tried putting the file both at the very root level of the folder structure and at the root level of what I am currently using (i.e. that which i'll run http-server from to fire up the site). No joy.
I have had Intellisense sort of working in other projects, i.e. I can "Go to Definition", and get a method parameters popup, but I have never successfully got the "type . and see the method list" thing which is what I would dearly love!!
After a search for answers yesterday, I tried npm install typings --global, but still nothing at all.
(I am also running eslint - in the unlikely event that that makes any odds (interference?) )
What have I missed?
Typings for many popular libraries are available here, including jQuery.
VS Code can use these with both JavaScript and TypeScript.
As for your JS code, the editor cannot infer all type information due to the nature of JS, so intellisense is limited. If type safety and intellisense support is important for your project, you may consider using TypeScript.
More details on JavaScript support in VS Code.