how to import mjs in vscode? - visual-studio-code

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

Related

VSCode says "Failed to run custom build command" on cbindgen, but it actually works

I have a Rust (2021) lib. It compiled fine.
I added a build.rs file with this in it:
extern crate cbindgen;
use std::env;
fn main() {
let crate_dir = env::var("CARGO_MANIFEST_DIR").unwrap();
cbindgen::Builder::new()
.with_crate(crate_dir)
.generate()
.expect("Unable to generate bindings")
.write_to_file("rush_engine.h");
}
Next, I added this to the bottom of Cargo.toml:
[build-dependencies]
cbindgen = "0.20.0"
Finally, I added a cbindgen.toml file with the contents of this:
https://github.com/eqrion/cbindgen/blob/master/template.toml
If I run 'cargo build' the .h file appears as expected and there's no errors from cargo in the terminal window.
However, VS Code has the entire Cargo.toml underlined under every word with red squiggles and there's an error message at the bottom saying 'failed to run custom build command for lib_name'.
I cannot find a solution to this (have removed everything and re-added, cleaned out target folder, etc) and though it's not breaking anything, it's kinda off-putting that this glaring error keeps showing.
Any pointers on how to solve this would be grately appreciated.
Cheers
Jase
Additional requested info:
The Cargo.toml at issue looks like this:
[package]
name = "rush_engine"
version = "0.1.0"
edition = "2021"
publish = false
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[lib]
crate-type = ["cdylib", "staticlib"]
[dependencies]
chrono = "0.4"
[build-dependencies]
cbindgen = "0.20.0"
The VSCode extensions I'm using are:
rust-lang.rust (version 0.7.8)
...that's literally it. I don't see anything else rust related in running extensions.
Something Francis Gagné (thanks!) said got me wondering and experimenting. That's how I found a solution.
The solution (for me) was uninstall the official Rust extension, then install the rust-analyzer extension. This seems to have the exact same functionality, and it's not red-squiggling my entire Cargo.toml file, too!

Source "#openzeppelin/contracts/token/ERC721/ERC721.sol" not found: File import callback not supported

I've imported the Open Zeppelin ERC721 token standard into my VS Code with the Solidity extension, but see the following warnings on all my OZ import statements:
Screenshot of error
Why is this happening and what is the workaround for this warning?
What I've tried:
change default workspace compiler to localNodeModule (began to throw other warnings like on the pragma solidity line)
Example of solution I've tried
Just install the Solidity+Hardhat Extension ,this will take care of the errror.
run below command
npm install #openzeppelin/contracts
Change the import line like this
import "./node_modules/#openzeppelin/contracts/token/ERC721/ERC721.sol";
You could try this solution here, the only one that helped me.
https://stackoverflow.com/a/72241149/7537543
When you compile programmatically using solc, new syntax was introduced, which you have to include in compile.js.
// New syntax (supported from 0.5.12, mandatory from 0.6.0)
var output = JSON.parse(
solc.compile(JSON.stringify(input), { import: findImports })
);
You should have a helper function for finding imports
function findImports(relativePath) {
//my imported sources are stored under the node_modules folder!
const absolutePath = path.resolve(__dirname, 'node_modules', relativePath);
const source = fs.readFileSync(absolutePath, 'utf8');
return { contents: source };
}
Unfortunately I ran into this error too & just gave the path manually:
import "/home/ev1lclow3n/node_modules/#openzeppelin/contracts/token/ERC721/ERC721.sol";
This solved my error.
(I'm a linux user so path may differ for you)
Thanks ;-)
you have to manually guide the open zepplin import to its source file if you have it downloaded in your node modules then all you have to do is to change its path like this " ../node_modules/" and also make sure to use the latest extension of juan blanco's solidity extension and solidity and hardhat extension and if you are following a tutorial your first lines of codes would probably be import "hardhat/console.sol"; all you have to do here is to manually direct only this file to its designated place and the others would do it by themselves.
What you have to do is:
If you have "Solidity by Juan Blanco" for Truffle and "Solidity by Nomic Foundation" for Hardhdat, and if you are using Hardhat, disable the one by Juan Blanco and just use the one by Nomic Foundation, it just worked for me.
Screenshot
Make sure to create a Hardhat project (npx hardhat) and install:
npm install --save-dev "hardhat#^2.12.7" "#nomicfoundation/hardhat-toolbox#^2.0.0"
npm i #openzeppelin/contracts
Ok. That was a dumb question. Two things you have to do:
(1) Install the OZ library via
npm install #openzeppelin/contracts
(2) If you see Error HH606 (i.e. project can't compile), it's likely because The Solidity version pragma statement in these files doesn't match any of the configured compilers in your config.. Ensure that your pragma version matches the version in your hardhat config.
Hope this helps.

VScode Solidity extension - not finding openzepplin imports

I'm trying to get started with what should be a very simple Solidity contract but VSCode is giving me a hard time.
I'm using Juan Blancos solidity plugin but VSCode cannot find openzepplin imports
import "#openzeppelin/contracts/token/ERC20/ERC20.sol";
The error is:
Source "#openzeppelin/contracts/token/ERC20/ERC20.sol" not found: File import callback not supported
Even though vscode shows red squigglies I can compile successfully via hardhat compile.
If I change the path to
import "../node_modules/#openzeppelin/contracts/token/ERC20/ERC20.sol";
VScode stops complaining but then I cannot compile via hardhard, with the error being:
Source "node_modules/#openzeppelin/contracts/security/Pausable.sol" not found: File outside of allowed directories.
My VSCode settings for Solidity extension for both User and Workspace are:
"solidity.packageDefaultDependenciesContractsDirectory": "contracts",
"solidity.packageDefaultDependenciesDirectory": "node_modules"
Which corresponds to my project structure
root
|_ contracts
|_ MyToken.sol
|_ node_modules
|_ #openzepplin
I followed the instructions here and have done extensive researching but unfortunately can't get it to working.
Source "#openzeppelin/contracts/token/ERC20/ERC20.sol" not found: File import callback not supported
I had same issue. I had multiple folders added in the unnamed workspace. After removing all other folders and keeping only one project folder resolved issue for me.
Linting issues
If you see something along the lines of:
ParserError: Source "OpenZeppelin/openzeppelin-contracts#3.4.0/contracts/access/Ownable.sol" not found: File not found.
import "#openzeppelin/contracts/access/Ownable.sol";
In your vscode, these and be safely ignored. However you can also add to your settings to ignore these.
Create a .vscode folder at the root of your project.
Create a file called settings.json
Add the following code:
{
"solidity.remappings": [
"#chainlink/=/Users/patrick/.brownie/packages/smartcontractkit/chainlink-brownie-contracts#0.2.2",
"#openzeppelin/=/Users/patrick/.brownie/packages/OpenZeppelin/openzeppelin-contracts#4.3.2"
]
}
Or whatever version your #chainlink and #openzeppelin contracts need. For example:
For more information see here
Use single quotes instead of doubles.
Instead of:
import "#openzeppelin/contracts/token/ERC20/ERC20.sol";
use this:
import '#openzeppelin/contracts/token/ERC20/ERC20.sol';

Live Sass Compiler - #use causes compilation error

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.

Pylint Error: Attempted relative import beyond top-level package

Here in VSCode whenever I write the following line from . import dispatcher pylint always gives error statement saying Attempted relative import beyond top-level package.
But when I run the module using this command: python -m src.train the program runs without flashing any error. Here is the screenshot from the VSCode editor:
Does someone know who to solve this thing in VSCode?
Just add an empty __init__.py file of the folder that contains your dispatcher.py file, then all the .py files under the folder, as whole, should be recognized as a package. And the lint error should dismiss.