I have 2 question about the edit visual studio code.
1. when I include a js file in my html as <script src="hey.js"></script> and use it in my js code after like hey.speak() the editor says 'cannot find name 'hey'.
when I create new function and calling this function afterward when it shows me the function's argument why it says "any" on every argument it takes ? when In real the current function expects to get a function (in a callback case)
I'm trying to arrange my project code, and I'm trying to follow the wornings. thanks (:
VSCode doesn't load <script> tags referenced in HTML automatically. If you open the referenced file by yourself (e.g. in an editor to the side), global symbols should get picked up.
This is definitely a nice feature request, you can ask for it at the VSCode User Voice Website.
In the meantime, you can configure the linting settings of JavaScript, to ignore undeclaredVariables, for example.
You should be able to include
/* global hey */
to the top of your script, then VS Code (and other linters) will know that you have an undeclared global the you will be importing.
Related
I am hoping to confer on a strategy for a flutter web app (as can ignore mobile cases here) to get chrome extension info for a Polkadot.js wallet from the Polkadot browser extension.
My first thought is to use dart's JS library and use the Polkadot extension JS package and then try and pull the info from there. However, I'm not sure how to properly use this in flutter as it is a whole package full of dependencies, not just a single JS file. Also it is in TS not JS. Any thoughts here?
Eg., I need a JS file to be able to call this; and for flutter to in turn call the JS file:
import {
web3Enable,
} from '#polkadot/extension-dapp';
By writing out a "bridging" layer, you can do it easily.
Firstly, create a normal javascript (or typescript) application (nothing related to Flutter). You should be able to happily use the polkadot lib in your js/ts code without any problem. You may need to learn a bit about how to develop js code normally (e.g. you can depend on polkadot using npm, etc).
One small thing is that, you should "expose" some object publicly in your js/ts code. For example, your code may look like window.myFancyFunction = function() { call_some_polkadot_function(); }. Of course you can do more things like exposing other functions/objects/...
Then, you can bundle this normal js/ts application into a .js file. This is still very normal for js/ts developers and should have nothing special to deal with here, and you still do not need to touch Flutter at this stage.
Next, load this single-filed .js file when you are loading your Flutter Web application. You may simply do this by editing your Flutter Web's html file and add <script src="my_single_filed_js_mentioned_above.js" />. Notice that, when loading this script, it simply sets window.myFancyFunction and does not do anything more. Still very trivial here, should have no problem.
Lastly, in your Flutter Web code, i.e. Dart code, call that window.myFancyFunction function. For example, Flutter Web : How to run javascript using dart js says you can do import 'dart:js' as js; js.context.callMethod('myFancyFunction', ['some arguments']);
Can I get the list of the available scopes for snippets?
Is there any native functionality that would control what files to create and where?
Snippets are scoped to languages and introduced to VS Code as global or local to a workspace. Languages can be contributed to VS Code by exceptions. Typically by declaring a language in the package.json, adding a syntax and snippet files. Update:
Here is the guide how to add a snippet to any language via your extension. If you follow the guide and add a snippet to the current workspace, you will notice that the file with extension .code-snippets gets created under the .vscode folder in the workspace. Therefore you can enumerate all such files using the vscode.workspace.workspaceFolders and fs.readDir APIs.
vscode.workspace.workspaceFolders!.forEach(workspaceFolder => {
const snippetFiles = fs.readdirSync(path.join(workspaceFolder.uri.fsPath, '.vscode'))
.filter(el => /\.code-snippets$/.test(el));
});
Similarly, the global snippets get added as .code-snippets files into the user profile folder - on Windows it looks like this: C:\Users\currentUser\AppData\Roaming\Code\User\snippets\*.code-snippets. Both locations you can scan for *.code-snippets files as well as programmatically add such files to those folders.
Here is the documentation how to add snippets to a scope via a file. There does not seem to be any public API to enumerate all such snippet files in a programmatic way.
But if you want to retrieve list of the languages in the screenshot you posted, use this API:
vscode.languages.getLanguages()
It could help if you explained what are you trying to achieve. Do you want to find where a particular snippet is coming from to change it? Do you want to add a snippet to a language in this list? Or to a language that is not on this list?
I'm looking to create a vue-cli 3.x plugin that generates extra files in the project when invoked and templates these based on configuration info entered by the user.
It's rather easy to collect this information from user prompts but it'd be much nicer if users could put this info into some sort of configuration file and have the plugin read it from there.
I understand vue-cli now uses a vue.config.js file on the project level and ~/.vuerc on a more global (preset) level. However, it doesn't look like my generator function would have access to either one of those files.
"The entire preset" should be passed as the third argument to the function when invoking the plugin with module.exports = (api, options, rootOptions) => {} in ./generator/index.js, rootOptions is undefined.
Sililarly, the use of vue.config.js is discussed in the documentation when talking about service plugins, but there's no mention how to use it in a generator function.
Am I missing something obvious here or is there really no officially sanctioned way to do this? Nothing stops me from reading vue.config.js in my function, but this feels hacky. And I wouldn't even know how to find out which preset was used to create the project.
So your problem is that you can't find ~/.vuerc?
I had the same issue and I found the solution here.
The solution is to use the command line
vue config
to see .vuerc, and then use
vue config --delete presets.yourPresetName
to delete your preset.
As well, if you can't type in your preset name in the terminal because it contains a space or an apostrophe, you can use
vue config --edit
to open .vuerc with a text editor and just edit it there
For example, I have an ajax request and it returns <script src='buggy.js'></script>.
Problem is, it doesn't show up in sources or resources panel. That means I can't do all the cool stuffs like adding breakpoint and inspecting the elements as they run.
I could only see the source of the js file under the Network panel.
Is there anyway to make chrome add them to the sources panel?
Or how do you guys go about debugging dynamically added scripts?
Using Canary.
I was having the same problem, and I found a workaround that is better than the deliberate exception. It does still require changing the code as opposed to just setting a breakpoint inside the chrome dev tools.
I tried using the "//# sourceURL=dynamicScript.js" that was suggested as a workaround by the OP, but it still wasn't showing up for me unless it already existed in my tabs from a previous time when it produced an exception.
Coding a "debugger;" line forced it to break at that location. Then once it was in my tabs in the Sources panel, I could set breakpoints like normal and remove the "debugger;" line.
Please refer to https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-dynamic-javascript
(Original link is broken-- archived link below)
http://web.archive.org/web/20141016164821/https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-dynamic-javascript ("Breakpoints in Dynamic JavaScript").
When I dynamically load a snippet of html containing javascript via AJAX, I cannot see that content in the source tab in the developer tools window in Chrome 22.0.1229.94. Tellingly, I went here
https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints#js_dynamic
This page shows an example developer tools window which is out of date. There is a button on the page to load a dynamic script and it does not show up in the source tab when you do.
As a work-around, I have found that adding
debugger;
to the script and reloading it will cause it to pause in the dynamically loaded code, but unfortunately, all the line numbers are greyed out and you can't set any breakpoints within the debugger.
Am I missing something here or what?
Thanks,
Rob
When you use a library or javascript code that you have loaded it dynamically, you can use the phrase
//# sourceURL=foo.js
at the beginning of your javascript code that foo.js is the name that will be assigned it. debugger will show it with that name.
This is true in chrome, and I think in firebug too.
In this case you can place a breakpoint in the dynamically loaded javascript code.
Possible duplicate of:
Is possible to debug dynamic loading JavaScript by some debugger like WebKit, FireBug or IE8 Developer Tool?
Don't know if this works or not in chrome (This definitely doesn't work for me now, may be in the past).
//# sourceURL=foo.js
Working Solution
For your dynamically loaded script via ajax to appear in your chrome source tool, you need to add the following line at the start or end (I prefer) location of your script file:
//# sourceURL=foo.js
And your script with name foo.js will appear at the left pane of source tab under (no domain) dropdown
->localhost
-- source/src
->(no domain)
-- foo.js
Alternatively you can add the below line in your script anywhere between the scripts.
debugger;
In chrome, you can use " debugger; " statement to break at a statement when debugger panel is open. Chrome will simply ignore this if the debugger panel is closed.
This will help stop your script in debugging mode and you will see your script in source (debugging) panel with name like VM****.
Hope this helps.
You can use //# sourceURL. Chrome doesn't seem to be supporting //# sourceURL for inline scripts. However, it does work on eval expressions. This article gives more details about naming eval blocks and naming of any anonymous functions in your code.
Instead of using eval, you can try embedding a script tag or JSONP may be.
Varunkumar Nagarajan
for me it happened on nodejs project.
i restarted server and open in new tab my app and tada!..
Alternatively, to fix this problem you can open developer tool in a seprate window by clicking the icon. Now reload your script, and it will shown in script tab as expected. I know this is not a solution but a work arround.