I have the following two files and a jsconfig.json file in a directory.
/** myclass.js **/
class MyClass {
constructor() {}
myMethod() {}
}
/** test.js **/
/** #type {MyClass} */
let test;
The jsconfig.json file looks like this:
{
"compilerOptions": {
"module": "es6",
"target": "es6"
},
}
If I use the above code as is, I get method suggestion in the test.js file. However, as soon as I try to export out the MyClass class definition from myclass.js (by adding for example export default MyClass; on the end of that file) auto suggestion stops working, and IntelliSense does not recognize the MyClass class anymore.
I presume that this is a jsconfig.json issue, but I can't figure out why is this happening.
I am using Visual Studio Code v1.46.1 and I have the ESLint v2.1.5 extension installed on it.
Related
I am making a chrome extension using manifest v3.
I am trying to import my script files into the background.js.
I am using the second method described here
I have thus this in manifest.json:
"background": {
"service_worker": "background.js",
"type": "module"
},
On a simple script with no other dependency:
in myscript.js:
export function myFunction() {
console.log("In myFunction!")
}
and in my background.js :
import { myFunction } from "./lib/myscript.js";
myFunction()
In that simple case, it works fine.
However, if I try to add another dependency in myscript.js from myscript2.js, like this:
myscript2.js:
export function mySecondFunction() {
console.log("In mySecondFunction!")
}
and myscript.js (same directory as myscript2):
import { mySecondFunction} from "./myscript2.js";
export function myFunction() {
console.log("In myFunction!")
mySecondFunction()
}
In that case, it doesn't work anymore and I get the error "Service worker registration failed".
What should I be doing to fix this issue?
Problem
I use Visual Studio Code and use IntelliSense with JsDoc comments.
I have two modules with class declarations:
/**
* This is Foo class
*/
export default class Foo {
constructor() {}
}
and
/**
* This is Bar class
*/
export default class Bar {
constructor() {}
/**
* Init Bar from Foo
* #param {Foo} foo instance of Foo
* #returns {Bar}
*/
static initFromFoo(foo) {
return new Bar();
}
}
Class Bar use Foo as param for the method initFromFoo but IntelliSense doesn't understand that #param Foo is referred to class Foo and don't work properly and says that foo:any,
https://imgbbb.com/images/2019/09/24/image517c0ec9d1027ac9.png
How can I make IntelliSense work well?
What I have tried
Import ./foo into ./bar- this makes IntelliSense work well but I don't need this import I need just reference to the type definition.
Add reference to another file like in TypeScript /// <reference path="./foo"> - no effects
Create jsconfig.json file with the next content:
{
"compilerOptions": {
"target": "es6",
"allowSyntheticDefaultImports": true,
"checkJs": true
},
"exclude": [
"node_modules"
]
}
no effects too. It just highlights error Cannot find name 'Foo'.ts(2304)
P.S. It looks like IntelliSense limitation that related to ES6 modules. Because if I remove export/import from both files IntelliSense work as expected
https://i.ibb.co/CPL1gJC/image.png
https://i.ibb.co/xmXqzSk/image.png
P.S.S. Sorry for links to images my repo is too low for image posting.
It is possible to import type by import(path) statement.
For example:
/**
* Init Bar from Foo
* #param {import('./foo').default} foo instance of Foo
* #returns {Bar}
*/
static initFromFoo(foo) {
return new Bar();
}
OR
/**
* #typedef {import('./foo').default} Foo
*
* Init Bar from Foo
* #param {Foo} foo instance of Foo
* #returns {Bar}
*/
static initFromFoo(foo) {
return new Bar();
}
P.S. It is hack only for Visual Studio Code. It isn't valid JsDoc.
I'm stuck with a class not available issue.
I got the next composer.json file under my extension:
{
"autoload": {
"psr-4": {
"Vendor\\MySitepackage\\": "Classes/"
}
}
}
Now I got a EXT:my_sitepackage/Classes/Rendering/VideoRenderer.php class whose namespace and name class is right.
Under my ext_localconf.php, I do this:
<?php
defined('TYPO3_MODE') or die();
(function () {
........
/** #var \TYPO3\CMS\Core\Resource\Rendering\RendererRegistry
$rendererRegistry */
$rendererRegistry = \TYPO3\CMS\Core\Resource\Rendering\RendererRegistry::getInstance();
$rendererRegistry->registerRendererClass(\Vendor\MySitepackage\Rendering\VideoRenderer::class);
........
})();
However, when I flush the cache, I get the next error:
[ InvalidArgumentException ]
The class "Vendor\MySitepackage\Rendering\VideoRenderer" you are trying to register is not available
I checked all name classes and everything seems right.
Should I make a composer dump-autoload inside my extension to load the info class? Even if I do that, it says Generated autoload files containing 0 classes.
I feel a bit confused why this error is shown.
if this extensions is not loaded via composer, its composer.json is ignored. You must place the psr-4 info of your sitepackage extension to the root composer.json. don't forget to adopt the path which will be something like public/typo3conf/ext/my_sitepackage/Classes
Best explained with an example:
some-class.js
function SomeClass() { /* ... */ }
SomeClass.prototype.doSomething = function() { /* ... */ };
export function createSomeClass() {
return new SomeClass();
}
index.js
import { createSomeClass } from './some-class';
/**
* #param {SomeClass} someClass
*/
function foo(someClass) {
someClass.doSomething();
}
var someClass = createSomeClass();
someClass.doSomething();
This code leads to errors in VSCodes TypeScript checker and won't provide code completion for the class inside foo:
An alternative would be to export the class constructor and import it in index.js which gives me full code completion but adds a warning due to the unused import of the class:
What I also don't like about this solution is that it "leaks" the class to the outside which is not necessary otherwise due to the createSomeClass factory.
Is there some way to have full annotations & code completion without the unused import of the class?
I cannot seem to annotate a class so that its methods are know to the WebStorm editor.
Here is the example:
/**
* #class my class
* #constructor
*/
function MyClass() {
this.aPublicField = "foo"
var aPrivateField = "bar"
this.aPublicMethod = function() {}
var aPrivateMethod = function() {}
}
/**
* #param {MyClass} aClass
*/
function doSomething(aClass) {
aClass.aPublicMethod() <----- "Unresolved function or method"
}
The Java-like syntax should be correct.. I guess. Am I doing something wrong in the annotations?
Documentation seems to be correct and code highlights fine for me in WebStorm 6.0.2a and the latest 7 EAP. I think your problem can be related to issue WEB-7548. We considered the word following #class tag to be the class name and properties were attached to the wrong class, so as a workaround now you could move class description somewhere from #class tag, or as a better alternative download latest WebStorm 7 EAP.