A few times in vscode extension development vscode has automatically added information to the extension's package.json that obviously seems related to development and debugging that extension.
Note: that the Marketplace Released version of the extension is also installed in the same workspaces used for debugging in the extensionHost. Could that be the issue?
The following fields were automatically added to the extension's package.json:
"identifier": {
"value": "ArturoDent.find-and-transform",
"_lower": "arturodent.find-and-transform"
},
"isBuiltin": false,
"isUserBuiltin": false,
"isUnderDevelopment": true,
"extensionLocation": {
"$mid": 1,
"fsPath": "c:\\Users\\Mark\\find-and-transform",
"_sep": 1,
"external": "file:///c%3A/Users/Mark/find-and-transform",
"path": "/c:/Users/Mark/find-and-transform",
"scheme": "file"
},
"targetPlatform": "undefined",
I missed looking for these changes and published the extension to the Marketplace and it understandably causes problems for users. The extension never loads for example, probably looking in that location from my development machine.
I do a lot of extension development and have only seen this info automatically added a few times.
Is there a way to prevent that info from being added? Or change my workflow so it doesn't happen again?
A closely related issue was reported at vscode extension test run modifies package.json after 1.67.0, where extra metdata was being written to package.json without warning and causing all kinds of problems.
The current SO question above here had nothing to do with running tests (as in the github issue) but only with debugging and was quite sporadic and difficult to make recur - but the same metadata was being written to package.json.
I have filed a new issue on this: Extraneous data written to package.json while debugging an extension that writes to package.json
Related
I'm developing a VSCode extension (package.json) and I get the "Error: Cannot find module 'vscode'" whenever I run it.
I've already tried running
npm install
and it did not help.
When I run
node ./node_modules/vscode/bin/install
I get "Error installing vscode.d.ts: Missing VSCode engine declaration in package.json.".
Remove the "vscode" dev dependency. No idea what that is for.
Your package.json is out of date, and is still using a deprecated definition. This has been changed, if I remember correctly, a couple of years ago.
You should update your dependency to something like
"devDependencies": {
"#types/vscode": "^1.73.0"
...
}
And don't forget to update the engines entry as well, to reflect the minimun VS Code version your extension will support.
"engines": {
"vscode": "^1.73.0"
},
Hope this helps
I'm not sure what it is yet, and I'll be back if I figure it out, but I'm assuming this is expecting to be run in VS Code, and I'm not doing that. I'm trying to create an LSP client outside of VS Code, and I think thats the rub.
I was trying to debug a chrome extension on VSCode, and in that attempt I noticed that breakpoint is not working on the scripts (e.g. background.js); So I googled and I took a look some posts and tried some, and finally I have no idea to identify what's wrong.
The .vscode/launch.json on my chrome project
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:8291",
"runtimeArgs": ["--load-extension=${workspaceFolder}"],
"runtimeExecutable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"webRoot": "${workspaceFolder}",
"breakOnLoad": true,
"sourceMaps": true,
"sourceMapPathOverrides": {
"*": "${webRoot}/*"
}
}
]
}
Initially I didn't have the webRoot, breakOnLoad, sourceMaps, sourceMapPathOverrides properties but after reading the doc and a post (below the link) I added these.
The post I referred: Solve “Breakpoint ignored” with Visual Studio code (vscode 1.19+) Chrome debugger | by Ananto Ghosh | Frontend Weekly | Medium
Also I noticed that I have the vscode-chrome-debug extension which is deprecated and recommended to be uninstalled, I did uninstall. (So made sure not to happen any further tricky issue)
The file tree on the project:
├── .vscode
├── background.js
├── bookmarklet.js
├── content.js
├── dialog.html
├── dialog.js
└── manifest.json
Now type F5 key to run the project, chrome opened, opening dev tools and navigated to the source tab and checking if there is the project files showing correctly... no there is not any. (and so of course breakpoint does not work yet as I could expect)
In my mind (since the SO terms, this is not a question and you don't need to answer):
What the hell is sourceMaps? Do I need to create that sourceMaps thing manually before F5 or such? If so where the heck is the doc?
What is the URL localhost thing for? I'd like to ensure that just specify that with a port is enough, right? Or do I need to launch a server or something before the F5 run? What in the world is that server thing then.
So, what's wrong with the project/launch.json?
you asked
*What the hell is sourceMaps? Do I need to create that sourceMaps thing manually before F5 or such? If so where the heck is the doc?
The answer to the first.
Even though JavaScript does need to be compile it usually is. Compilation is the process of removing white space and using other code optimisation other trick to make your JavaScript faster and smaller but this make readability. A sourcemaps does what it sound it map the compiled code to the compiled source.
The answer to the 2nd.
Yes and no. You do need to make the source map if you are compiling the javascript your self but this is usually done with webpack,esbuild, or what ever compiler you are using. If the package is compiled for you might have to going look to where you got the script from the should have the compiled version somewhere.
The answer to your last the doc should be with the compiler you are using.
I get this warning when opening a fresh-new NativeScript (Angular) in VS code.
The below 1 extension(s) in workspace recommendations have issues: telerik.nativescript (not found in marketplace)
Should I ignore the warning or delete telerik.nativescript in the extension.json while I develop the app?
I have also been getting this notification wondering what it was after creating a new NativeScript Angular project. It seems like NativeScript is trying to recommend their NativeScript extension in VSCode https://nativescript.org/nativescript-for-visual-studio-code/.
I don't have this recommendation or extensions.json file on my older projects so I'm sure you can delete the file/recommendations and decide for yourself if you want to install their extension without affecting your project.
{
"recommendations": []
}
I think that this extension was probably renamed from "telerik.nativescript" to "NativeScript.nativescript" because in my case:
I was having the same problem described above "not found in marketplace"
I had an (old) nativescript extension already installed on my system (probably installed a year ago)
The VSCODE was kind of confused... checking the installed extensions was pointing me to the new one, but at the same time was telling me that it was not installed!?
Solution:
VSCODE: Extensions: NativeScript => [Unistall] followed by a [Install]
Source Code: "recommendations" changed "telerik.nativescript" to "NativeScript.nativescript"
Now everything seems to be in order.
Just to add some more detail, the file that needs to be changed in your NativeScript projects is ".vscode\extensions.json"
The code needs to be changed from:
{
"recommendations": [
"telerik.nativescript"
]
}
To:
{
"recommendations": [
"NativeScript.nativescript"
]
}
#antseq is correct that the extension was renamed from "telerik.nativescript" to "NativeScript.nativescript".
I am currently developing some custom VSCode extensions and would like to have separate optional extensions that build on a core extension. Currently it is a bit of a hassle to develop these congruently and I am currently aware of the following options:
1) Develop the extensions separately with separate debug instances
The downside here is that until the extensions is published or moved to your ~/.vscode/extensions folder the two extensions have no knowledge of the development versions of each other, making the debugging and rapid additions quite difficult.
2) Move extensions into ~/.vscode/extensions folder
The downside with this is that there is constant window reloading, sometimes it can be tricky to know when the main process has fully loaded the updated version and it has definitely been less convenient than the experience when developing one extension
3) Merge the two extensions into one extension
This makes debugging and rapid feature builds easier, but goes against some of the original modularization i was hoping for, so i haven't switch to this as of yet.
My question is, is there a better way people have found to accomplish this apart from the above 3 options i'm aware of? I've combed quite a bit through google, forums, and the vscode docs looking for options or other people hitting the same situation but haven't found anything as of yet.
From the VSCode docs, it appears that --extensionDevelopmentPath "might" support multiple paths somehow, but i have yet to find anything conclusive or with examples of that to get it to work.
One method that I have used is to pull in the 'core' extension in as a submodule into a subdirectory, for example, .dependencies. Remember to npm install the 'core' extension from within its directory.
Then I would adjust your package.json on the working extension to use the following scripts:
"scripts": {
...truncated for brevity...
"compile:core": "tsc -p .dependencies/{dep-folder}"
"compile:me": "tsc -p ./"
"compile": "npm run compile:core && npm run compile:me"
...truncated for brevity...
}
Finally, add the following to your launch.json which will override VSCode's default extension folder to your .dependencies folder.
"args": [
"--extensions-dir=${workspaceFolder}/.dependencies"
"--extensionDevelopmentPath=${workspaceFolder}"
]
I want to use the css linter "stylelint" on my VScode text editor.
I downloaded the plugin and install it, then I make the "css.validate": false. But i don't have any box that show me error on my CSS files. What can I do ?
If you're getting started with stylelint for the first time, there are two key steps to enable it in Visual Studio Code:
turn off Visual Studio Code's built-in CSS linter and turn on the stylelint extension
create a stylelint configuration object and turn on some rules
You can complete the first step by following the extension usage instructions, mainly changing your Visual Studio Code settings to:
{
"stylelint.enable": true,
"css.validate": false,
"scss.validate": false
}
And the second step by following the configuration documentation on the stylelint website. I believe the quickest means to get started is:
install the recommended config into your project using npm:
npm install --save-dev stylelint-config-recommended
Create a .stylelintrc file that extends the recommended config in the root of your project:
{ "extends": "stylelint-config-recommended" }
This config turns on just the possible error rules. It is a sensible config to start with and build upon. There are over 150 rules built-in to stylelint. You can choose to turn on and configure as many, or as few, as you like to meet your linting needs.
For anyone seeing this and trying to lint other file extensions; note that by default, the extension validates only CSS and PostCSS files.
In order to validate file extensions such as SCSS, you would need to explicitly state so in .vscode\settings.json:
{
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"stylelint.enable": true,
"stylelint.validate": ["css", "scss"]
}