I´m trying to get a simple TypeScript file working in PHPStorm, but sadly there seem to be some misconfiguration by default as the class keyword is not recognized properly
This is my TypeScript file:
class Test{
}
And this is the error I´m facing:
And this is my FieWatcher configuration of TypeScript
How can I get TypeScript working?
The Program options should not be node.exe (that would mean you are trying to typescript code as javascript). It needs to be tsc or node tsc(that means you want to run tsc to compile the file to javascript).
PS: this video might be helpful : https://www.youtube.com/watch?v=RWXGMug_Rmo&hd=1
Related
I'm converting a project that was built using Create React App to use ParcelJS as a bundler instead. Strangely, a dependency that I imported during development (#twilio/voice-sdk) works fine in the CRA version of the application, but I get the following error when I try to invoke the constructor in the Parcel version:
TypeError: (this._options.AudioHelper || audiohelper_1.default) is not a constructor
The package is identical between both (#v2.1.1, the latest). I'm importing using ESM syntax, so:
import { Device } from '#twilio/voice-sdk'
I trying using CommonJS syntax (require) and it still didn't work. I've dug into the compiled code, and that seems to be the issue. I imagine there are a lot of differences, but one that I've noticed is here:
On the left is the code compiled by Create React App, which does seem to be exporting something more substantial than on the left - is the export just an empty object? If so, it's no wonder I'm getting a constructor error.
Unfortunately, no amount of googling and SO sleuthing has clarified what I could do to make ParcelJS transpile this dependency properly, if that's the issue. I've tried to make the babel config for ParcelJS match CRA more closely by adding the following to a babel.config.json
{
"plugins": [
"#babel/plugin-transform-modules-commonjs"
]
}
But no luck. Any ideas from where to go from here, or is it time to switch to Webpack?
It looks like Twilio package has a problem when using Parcel 2: https://github.com/twilio/twilio-voice.js/issues/101
I am having trouble installing a module I created in Julia. I am running the Julia plugin under Visual Studio Code. If I run the file below with Ctrl+F5 I get a message
ERROR: LoadError: ArgumentError: Package Utils not found in current path:
- Run `import Pkg; Pkg.add("Utils")` to install the Utils package.
This is the file:
module demo
using Utils
greet() = print("Hello World!")
end # module
If I follow the advice on the error message I get another error message:
ERROR: LoadError: The following package names could not be resolved:
* Utils (not found in project, manifest or registry)
I also tried inserting this line:
import Pkg; Pkg.add(path="C:/Dropbox/Code/Julia/demo/src/Utils.jl")
and got this message (although the path definitely exists):
ERROR: LoadError: Path `C:/Dropbox/Code/Julia/demo/src/Utils.jl` does not exist.
The files demo.jl and Utils.jl are in C:\Dropbox\Code\Julia\demo\src\ and the demo project has been activated as can be seen in the REPL. The OS is Windows 10 Pro.
Any help will be greatly appreciated. Lots of time wasted trying to make this work.
Module and packages are not the same things. In short, packages are modules plus a set of metadata that make it easy for the package to be found and interact well with other packages. See here for a tutorial to write Julia packages:
https://syl1.gitbook.io/julia-language-a-concise-tutorial/language-core/11-developing-julia-packages
In your case, if you want to load a local module, just type include("fileWhereThereIsTheModule.jl") followed by a using Main.MyModule or using .MyModule. Note the dot... without it, Julia would indeed look for a package and to let it find your Demo or Util module you would have to either change an environmental variable or place your module file in certain predefined folders. Using include followed by the "absolute or relative position" of the module you don't have to do either.
I'm using Live Sass Compiler v3.0.0 in my VS Code and it throws a compilation error whenever I use the #use rule to import variables from another file. However, when I use the Sass command line interface (sass --watch) to compile my files, it throws no errors.
Therefore, I want to ask is this caused by a syntax error in my code or a bug of Live Sass Compiler.
Steps to Reproduce
File Structure & Code
This is the file structure of the folder called sass-test that I opened in VS Code:
sass-test
| style.scss
| _variables.scss
style.scss
#use "variables";
html {
color: variables.$primaryColor;
}
_variables.scss
$primaryColor: #ff0000;
Live Sass Compiler Output
Open style.scss in a new tab in VS Code. Then, click the "Watch Sass" button located in the bottom right of the window. Live Sass Compiler would output the following error:
Compiling Sass/Scss Files:
d:\Web Development\sass-test\style.scss
--------------------
Compilation Error
Error: Invalid CSS after " color: variables": expected expression (e.g. 1px, bold), was ".$primaryColor;"
on line 4 of sass/d:\Web Development\sass-test\style.scss
>> color: variables.$primaryColor;
------------------^
--------------------
Watching...
-------------------
Sass CLI Output
Open Terminal and run sass --watch style.scss:style.css. The compiler successfully compiles without any errors:
Compiled style.scss to style.css.
Sass is watching for changes. Press Ctrl-C to stop.
Since my code can compile successfully with Sass CLI, does it mean that my code is syntactically correct and it's caused by a bug from the Live Sass Compiler extension?
I had same/similar problem two days ago.
#use is a new directive introduced in the new official Version 'Dart Sass' and replaces '#import' which is depricated now.
The popular Extension 'Live Sass Compiler' in VS Code is not longer supported by the maintainer for some time. So unfortunately the Sass Version is not updated in that extension...
In VS Code for 'Dart Sass' I found the the Extension 'DartJS Sass Compiler':
https://marketplace.visualstudio.com/items?itemName=codelios.dartsass
Actual I just did a quick testing so I cannot report much about it. But on the first glance it is running well. But as it is another extension you may have to change some settings.
UPDATE
Additional to the above reported exentsion DartJS Sass Compiler with actual SASS version I found an actualised and actual maintained fork of Live Sass Compiler. It has been deep hidden in the searching reuslts. As it is a very popular extension in VS Code here the link to the fork:
https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass
Remark:
I played arround with both extension. Both are doing the job well and have advantages.
'DartJS Sass Compiler' has the additional possibility for more detailed output like information about sass version and watchers. And additional to included SASS version it allows to use your own SASS version if installed to your system or locally to your project. So there is no/less dependency on updates by the maintainer.
'Live Sass Compiler' runs out of the box with included sass version. As it is a very popular extension in VS Code there is a special advantage: it seems it keeps your settings in the old projects running.
I think both are good solutions.
Is it possible to make a vscode extension made of mjs files?
because I tried to make an extension with mjs files only, in order to have full es6 features without TypeScript.
But it does not run:
If I make the extension with $ vsce package it does not give any error but it makes an extension that does not work when installed: the contributions that I've put in the package.json are present but vscode shows an error popup that says
Activating extension 'my.ext' failed: Must use import to load ES Module: c:\vsext\extension.mjs.
and every command I try to run gives an error
command 'my.cmd' not found
If I run the extension on the debugger, and the breakpoint on uncaught exception option flagged, it breaks on /src/vs/workbench/api/node/extHostExtensionService.ts:88.
After further search, I noticed that this exception is generatend when the script tries to load the first mjs module.
there is something I can do in order to include my mjs library files?
I think that this behaviour could also impact the use of npm modules with mjs files.
EDIT
Found (kind of) a way using esm:
The idea is to use esm to handle es6 imports and share the vscode object between imported modules
this could seem quite tricky but when I tried to just import * as vscode from "vscode" im my mjs files, vscode complained that can't find module vscode.
so I've done the following
add 'esm' as dependency
in all the files where vscode is used, remove the import of vscode and add something like this function
var vscode; // will store vscode obj
export function IMPORTVSCODE(vscodeInstance){
vscode = vscodeInstance
}
create a init file where you require vscode (with node native require) and your main module (with esm require)
in the init file call main.IMPORTVSCODE(vscode)
on all the files A that imports a file B that need vscode, before use the exported stuff from file B, call B.IMPORTVSCODE(vscode)
for example
// init.js
const vscode = require("vscode")
const esm = require("esm")(module/*, options*/)
const main = esm("./main.mjs")
main.IMPORTVSCODE(vscode)
module.exports = main
// main.mjs
import * as other from "./other.mjs"
var vscode; // will store vscode obj
export function IMPORTVSCODE(vscodeInstance){
vscode = vscodeInstance
}
function activate(){
other.IMPORTVSCODE(vscode)
other.methodThatNeedsVscode()
}
// other.mjs
var vscode; // will store vscode obj
export function IMPORTVSCODE(vscodeInstance){
vscode = vscodeInstance
}
export function methodThatNeedsVscode(){
vscode // ...use vscode
}
My extension runs fine now!
But I think that better ideas could be found, so if somebody has some finest solutions, please share them
I'm playing around with typescript in an existing coffeescript project that uses gulp and webpack.
I noticed when there's a syntax error in the coffeescript, it will fail the gulp task and not continue with the following steps, which is the desired behavior. With the typescript loader I'm using (ts-loader), I can see error messages in the terminal, but the webpack task succeeds from gulp's perspective and continues on. I imagine this is a difference in how the coffeescript loader and the typescript loader handle errors.
For example, I can add the following typescript file:
function greet(name: string) {
return 'Hello '+name;
}
export = greet;
{
and see the error in the build:
ERROR in ./bin/arranged/webkit/hcube/dummy.ts
(8,1): error TS1005: '}' expected.
but it still continues with the rest of the build like webpack didn't return any errors.
I realize that unlike coffeescript, typescript has a lot of inter-file dependencies, which makes the ts-loader much more complex, but I feel like it should still be failing at some point. Running the typescript compiler on the command line returns the expected exit code when there are syntax errors, so I feel like the problem lies in the loader itself.
In the after-compile plugin of ts-loader should it be reporting errors to webpack differently to propogate up? Right now it looks like it just attaches the errors to webpack in the after-compile plugin and webpack just keeps on trucking (see https://github.com/TypeStrong/ts-loader/blob/master/index.ts#L398). Should the loader be raising an error in this plugin if errors are encountered? Or calling the callback differently? Or should this be handled in some other part of the loader? Again, this particular example is a syntax error, so I imagine it would be caught/raised before after-compile is executed.