I am trying to build a VSCode extension that relies on process.env set on runtime from an application like Vue using process.env.VUE_APP_* syntax but accessing it on the extension always returns undefined.
I'm accessing it on registerCommand callback like so:
commands.registerCommand('command', () => console.log(process.env.VUE_APP_SOME_NAME));
I'm thinking that maybe it has something to do with the way it opened up a new window to run the extension when I'm testing it locally, no?
Related
I am currently investigating VS code extensions in conjunction with a code generation project. While I understand that the VS code API is fairly full-fledged to allow in-extension manipulation of documents I can't figure out how to do this outside of the extension.
Are there ways of remotely executing the vs code JavaScript APIs outside of vscode which in turn will drive the GUI.
I am trying to figure out if I can do any of the following:
Execute the API JavaScript code when through the code cli
Run a web server/socket within an extension to listen to events from external systems and execute the JS API accordingly
If not socket/rest server, should I listen to filesystem changes and react accordingly?
Basically, what are the options for remote control driving of vs code?
I've faced a similar problem with an editor extension I'm working on.
I would highly recommend listening to file changes outside of VSCode APIs. This way the majority of your code is not bound to a specific editor. I also had much more difficulty using the VSCode API called createFileSystemWatcher as it didn't capture all changes.
Upon activation, run a child process using a file watcher library. I'd recommend using chokidar - its the same library VSCode uses internally but with more extensive access to the API.
// get your workspace uri & root uri
const workspaceRoots = vscode.workspace.workspaceFolders
if (!workspaceRoots || !workspaceRoots.length) {
throw new Error('No workspace root path')
}
const workspaceRoot: vscode.WorkspaceFolder = workspaceRoots[0]
const rootUri = vscode.workspace.getWorkspaceFolder(workspaceUri);
// the action you want to trigger
const command = vscode.commands.registerCommand('YOUR_CUSTOM_COMMAND', yourCustomFunction)
// file watcher
const fsWatcher = chokidar.watch('watcher_name', {
cwd: rootUri.uri.path,
interval: 1000,
})
// listen to any add/update/delete fs events
fsWatcher.on('change', (path, event) => {
vscode.commands.executeCommand('YOUR_CUSTOM_COMMAND')
})
On any file change, it can trigger the action of your choice.
If a VS Code extension can achieve everything you are after, then the simplest approach would be to let the extension be driven externally. VS Code extensions run in a node.js environment, so they can start a http server, listen on a named pipe, or communicate with the outside world using pretty much any other mechanism.
You can also take a look at VS Code support for testing extensions, since tests also just use standard VS Code extension apis: https://code.visualstudio.com/api/working-with-extensions/testing-extension
For the development of VS Code itself, there are some automation scripts that simulate user actions. If you really need to, I believe you could adopt these script to your use case, however I can't say how much work it would be. These script also break if the UI changes. Better to go the extension route if possible
I'm working on a library that lets users run Node processes from inside another application. The library is called "max-api"; functions for sending data to the host application are exposed through a Node module and are loaded in the expected way:
const maxAPI = require("max-api");
However, the user never interacts with this module directly. Rather, when the host application launches the Node process, it intercepts the call to require, checks if the name of the module is "max-api", and provides the module if so.
This works great, the only issue is we have no way to provide type definitions for this modules. So, the user doesn't get any autocomplete or validation for functions in the "max-api" module. I was thinking of writing a VSCode extension to provide these, but I'm not 100% sure how to get started. Thanks in advance for any advice.
You could write a TS typings file (see Definitely Typed). This would be installed in node_modules/#types and vscode will automatically pick it up to provide code completion for your module.
I'm developing a VSCode extension and since it should currently only run on JS files, when I run the Launch Extension task I want it to open with a new Javascript file. I've seen this related question and have tried adding, just passing an options object as per the docs
vscode.workspace.openTextDocument({language: 'javascript'})
This is an async call so I've tried awaiting it while my extension is activating to ensure the file exists before I am able to use my extension.
If I could add this functionality to the Launch Extension task that'd be great or even if I could just have it open a file when I run my command that'll do while I'm developing on it.
Any ideas on how I can do this?
I'm not 100% sure but I believe your extension is activated only once and stays like that until vscode shuts down. Hence you cannot trigger multiple activation calls. Instead you could listen to document opening
workspace.onDidOpenTextDocument((doc: TextDocument) => {
if (doc.languageId == "JS" && doc.uri.scheme === "file") {
...
}
});
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.
In a regular emberjs app you can do
App.__container__.lookup("controller:application")
How can I achieve this is the latest version of ember-cli? I can't see any global application object to refer to.
Say you generated your app like this:
ember new kittens
Your debug statement would be:
Kittens.__container__.lookup("component:bootstrap-datepicker")
In Ember CLI when you define an initializer you can do something like:
ember generate initializer my-cool-init
And in the file: app/initializers/my-cool-init.js have something like:
export default {
name: 'my-cool-init',
initialize: function initialize(container/*, application*/) {
var foobar = container.lookup('controller:application');
// inject or preload stuff etc
}
};
http://emberjs.com/api/classes/Ember.Application.html#toc_initializers
http://emberjs.com/guides/understanding-ember/dependency-injection-and-service-lookup/
2 options
Ember Inspector Chrome extension
Use ember-export-application-global addon to expose your app as a global variable
Ember Inspector Chrome extension
Check out the Ember Inspector on the Chrome web store. It is a Chrome extension that provides debugging and inspection tools for your Ember app.
You can visually access the container, your current view hierarchy, a list of your Ember-Data store's contents, etc.
For example, if you open the inspector on discuss.emberjs.com you can see that there are 11 controllers and you can inspect each one to see their attributes. You can even send the objects to the console so you can play with them programmatically.
Use ember-export-application-global
The other way is to use the ember-export-application-global ember-cli addon package. This package sets a global variable that contains the reference to your application. This allows you to access the container the way you originally mentioned.