I am struggling with my VS Code setup in connection with the container extension.
My project structure has one project folder and several libraries on the same level (i.e. libraries are not subfolders of my project folder). The key thing is that I would like to save all config files in my project folder so the information how to bring up the project is version controlled with the project.
If I specify the workspace file as follows (using relative paths) and open the workspace file, things work fine locally.
{
"folders": [
{
"path": "."
},
{
"path": "../library1"
},
{
"path": "../library2"
},
]
}
However, when I try to bring this in my development container, I get the error message:
The workspace cannot be opened in a container. Folder c:\..\library1 is not a subfolder of shared root folder c:\..\project.
I could pull the project definition (and devcontainer.json file) one level up but then they are not under source control of my project folder.
Any ideas how to resolve this?
It seems to be a design limitation. Even if you set the workspace root of the container accordingly, it still doesn't seem to be possible to reference workspace folders outside of the folder containing the workspace definition.
https://github.com/microsoft/vscode-remote-release/issues/387
To start, we could support an open workspace command that is the
equivalent of doing "Open Folder in Container" followed by "Open
Workspace" but does not resolve these two limitations. Specifically it
would:
Look for a .devcontainer/devcontainer.json or .devcontainer.json file
in the same folder as the .codeworkspace file. Mount this folder into
the container and open the workspace. The .codeworkspace file would
only be able to reference sub-folders.
It's 2022 - now using the updated Dev Containers extension.
I have the following structure (in short):
├───deployment
├───documentation
├───service1
│ ├───.vscode
│ └───sources
├───service2
│ ├───.vscode
│ └───sources
└───workspace
├───acme.app.code-workspace
├───.devcontainer
└───devcontainer.json
acme.app.code-workspace
{
"folders": [
{
"path": "."
},
{
"name": "Service 1",
"path": "../service1"
},
{
"name": "Service 2",
"path": "../service2"
},
{
"name": "Deployment",
"path": "../deployment"
},
{
"name": "Documentation",
"path": "../documentation"
}
]
}
devcontainer.json
Nothing really of interest here. Just put in what you need.
{
"name": "Docker in Docker",
"image": "mcr.microsoft.com/devcontainers/base:bullseye",
"features": {
"ghcr.io/devcontainers/features/docker-in-docker:2": {
"version": "latest",
"enableNonRootDocker": "true",
"moby": "true"
},
"ghcr.io/devcontainers/features/kubectl-helm-minikube:1": {},
"ghcr.io/devcontainers/features/python:1": {
"version": "3.11"
}
}
}
So when you start the container, all should be fine.
The only drawback - whether the prompt is acceptable when starting the devcontainer:
This does not work if I bring the .devcontainer folder into it's own workspace folder.
{
"folders": [
{
"path": "."
},
{
"path": "../.devcontainer"
},
...
Related
I'm running a Next.JS project in VS Code. My launch.json has the following configuration:
{
// ...
"configurations": [
{
"name": "Frontend: Dev Server",
"request": "launch",
"runtimeArgs": [
"run-script",
"dev",
"--preserve-symlinks", // To debug linked
],
"runtimeExecutable": "npm",
"skipFiles": [
"<node_internals>/**"
],
"type": "node",
}
],
}
When I run this configuration from VS Code, I get an error like the following:
C:\Program Files\nodejs\npm.cmd run-script dev --preserve-symlinks
> web-client#0.1.0 dev
> next dev -p 5555
warn - Invalid casing detected for project dir, received c:\etcetc actual path C:\etcetc, see more info here https://nextjs.org/docs/messages/invalid-project-dir-casing
I know that I want VS Code to pass in the drive letter in upper case instead of lower case, but I don't see any option to set that and I tried opening the project using code C:\etcetc directly.
How can I change the capitalization of the directory that VS Code applies to the launch configuration?
Add a current working directory to your launch.json configuration:
{
// ...
"configurations": [
{
"cwd": "${workspaceFolder}",
"name": "Frontend: Dev Server",
// ...
}
]
}
This passed an upper case drive letter to Node for me. You may also want to check that VS Code is opening the folder with the right case, i.e. node C:\etcetc.
If you still have casing errors, try deleting the .next directory.
I want to copy, recursively, all files from /src with the extension .json to my /out directory. I currently copy all files in my static folder (regardless of extension) like this, in tasks.json
{
"version": "2.0.0",
"tasks": [
{
"type": "shell",
"label": "copyStatic",
"command" : "cp",
"args": ["-f", "-r", "${workspaceFolder}/src/static", "${workspaceFolder}/out/"],
}
]
}
I tried using the /**/ notation I'd seen elsewhere like this
{
"version": "2.0.0",
"tasks": [
{
"type": "shell",
"label": "copyJson",
"command" : "cp",
"args": ["-f", "-r", "${workspaceFolder}/src/**/*.json", "${workspaceFolder}/out/"],
}
]
}
But it didn't work - got an error cp: /src/**/*.json: No such file or directory
Any ideas how to do this in tasks.json? I want to deep copy so include files like
/src/foo.json --> /out/foo.json
/src/folder/bar.json --> /out/folder/bar.json
Thanks
A gulp solution is quite easy:
const gulp = require("gulp");
function copyJSONFiles() {
return gulp.src('src/**/*.json') // get all the json files from 'src' directory
.pipe(gulp.dest('out')); // move them to the workspace/out directory
}
exports.default = copyJSONFiles;
// /src/foo.json --> /out/foo.json
// /src/folder/bar.json --> /out/folder/bar.json
This file, called gulpfile.js, goes into your workspace folder at the top level. It is triggered with just the gulp command in the terminal.
The out folder will be created and the folder structure under src will be preserved within it.
As I said in my comment on October 13
"command" : "find ./async -name '*.json' -exec cp --parents {} out/ ';'",
will preserve the folder structure of the src directory (here async) but unfortunately under out/async. That is the purpose of the --parents option.
However, not using the --parents options results in just a flat folder of json files which it doesn't seem you want.
There is probably a pure script version that will flatten that parent folder removing the src folder therein. But the gulp version is awfully easy.
Complex queries can be quite hard to achieve with cp. Fortunately,find searches recursively by default, and can be used in combination with an -exec cp to actually copy these files.
The following command does the trick:
"command" : "find src/ -name "*.json" -exec cp {} out/ \;"
I have a JS project with babel configuration, and it's configured to support relative paths. Instead of doing this:
import Class from '../../../../somePath/Class';
Writing the code in a more clean way:
import Class from 'app/somePath/Class';
babel.config.js
const plugins = [
[require('babel-plugin-module-resolver'), { root: ["./app/"] }],
];
That's all great, but I struggle with navigation trough files. For example when using CMD+Click on path, to navigate to file doesn't work on relative paths.
Is there a way to support navigations for relative paths in VSCode?
UPDATE
I tried the method suggested by #rioV and add HTML Related Links configuration to my project:
myapp/.vscode/settings.json
Added the following to project settings:
"html-related-links.include": {
"javascript": [
{ "find": "import [^ ]+ from '((?=app/).+?)';", "filePath": "/$1.js" },
{ "find": "import [^ ]+ from '((?!app/).+?)';", "filePath": "$1.js" }
]
},
User/settings.json
Also have included html-related-links.alwaysShow to true in the User settings:
"html-related-links.alwaysShow": true,
"html-related-links.fileroot": [
"./app"
],
And still doesn't seem to navigate when clicking the file path.
You can use the extension HTML Related Links v0.6.0. Now the name is no longer correct because it also can show related files in other file types.
If you add the following to your project/.vscode/settings.json
"html-related-links.include": {
"javascript": [
{ "find": "import [^ ]+ from '((?=src/).+?)';", "filePath": "/$1.js" },
{ "find": "import [^ ]+ from '((?!src/).+?)';", "filePath": "$1.js" }
]
}
The imports that start with src/ are treated relative to the file root folder (most likely the workspace root). If you have a different file root you also need to modify the html-related-links.fileroot setting.
The other imports (do not start with src/) are relative to the current file.
Because you use JavaScript files you also have to set html-related-links.alwaysShow to true in the User settings or the (Multi Root) Workspace settings.
In the Explorer View Container there is a view named HTML Related Links. If you click on one of the entries that file will be opened if it exists.
From VSC v1.46 you can drag/drop views to a different location
I am trying to publish a private extension for AzureDevops on Visual Studio Marketplace. It is a .vsix package. The packaging goes well, I upload a package, but it doesn't pass a verification. I obtain the following error:
Extension validation error The task.json file was not found in
contribution xxx
And I don't know why I get this one as I have a task.json file. It is the first time that I am trying to upload a package, so I really have no idea where the problem comes from.
As Shayki mentioned that is one possible cause for the issue. Another possible issue will be the folder/path name
Make sure you will give the same name for the files as the name of the properties
"contributions": [
{
"id": "..."
"types": "..."
"targets": "..."
"properties": {
"name": "buildAndReleaseTask"
}
}
],
"files": [
{
"path": "buildAndReleaseTask"
}
]
For anyone that stumbles upon this question, the JSON file with your task configuration literally needs to be named "task.json". In your extension file, you need to give the name for each of your tasks folders, in which there must be an individual task.json file.
In the vss-extension.json you have this section:
"contributions": [
{
"id": "..."
"types": "..."
"targets": "..."
"properties": {
"name": "buildAndReleaseTask"
}
}
]
In my case the task.json was in buildAndReleaseTask folder, and the name in the properties was something else (the name you got in the error message), when I changed it to the name to buildAndReleaseTask (where the task.json exist) the error disappeared.
For the purposes of syntax highlighting and colouring and intellisense is it possible to treat other extensions (tpl, master, etc) as HTML?
I know it's possible on a file by file basis by pressing CTRL+SHIFT+P and selecting "Change Language Mode" BUT I want it to work off file extension, and not have to redo it every time I open a new file.
I also know it's possible for some languages by editing the json files in the plugins directory, BUT there doesn't seem to be one for HTML.
Update for VS Code 1.0:
There is a setting files.associations that can be used to assign file patterns to languages. For example:
"files.associations": {
"*.tpl": "html",
"*.master": "html"
}
Previous answer:
This is a commonly asked feature request and we are looking into this issue for the future.
As a workaround if you need to have a solutio now:
close VS Code
open C:\Users\<your name>\AppData\Local\Code\app-<latest-version>\resources\app\server\lib\mime.js
find the object literal knownTextMimes
for the file extension you want add the proper mime type
for example '.tpl': 'text/html'
save and restart code
Note: this change will not survive automatic updates but the hopes are that there is a better solution in the future update :)
(Tested on version 1.59.1)
It is also possible to set Associations through GUI:
Go to Settings->Text Editor->Files->Associations.
Set Item (file extension) and Value (language).
Open notepad as admin (just in case) by right clicking run as admin.
Click file => open => copy and paste C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\html in box.
select view all file types at bottom right.
Open package.json
Copy and paste
{
"name": "html",
"version": "0.1.0",
"publisher": "vscode",
"engines": { "vscode": "*" },
"extensionDependencies": [
"html"
],
"contributes": {
"languages": [{
"id": "html",
"aliases": ["pd"],
"extensions": [".pd"]
}]
}
}
replace everything with that.
save and quit
restart vs code.
I resolve the issue for my with installing Smarty Extension 1.1.1 + adding this settings into Settings.json
"files.associations": {
"*.tpl": "smarty",
"*.master": "smarty"
}
Jesse's answer is correct. I don't have enough reputation points to comment on his answer, but the path for Mac users is:
cd /Applications/Visual\ Studio\ Code.app/Contents/Resources/app/extensions/html/
Note that there will already be some extensions so instead of copying and pasting the code snippets wholesale, simply add the extension you'd like to the extensions and aliases array like so:
{
"name": "html",
"version": "0.1.0",
"publisher": "vscode",
"engines": { "vscode": "*" },
"contributes": {
"languages": [{
"id": "html",
"extensions": [ ".html", ".htm", ".shtml", ".mdoc", ".jsp", ".asp", ".aspx", ".jshtm", ".ejs" ],
"aliases": [ "HTML", "htm", "html", "xhtml", "ejs" ],
"mimetypes": ["text/html", "text/x-jshtm", "text/template", "text/ng-template"]
}],
"grammars": [{
/* "language": "html", not yet enabled*/
"scopeName": "text.html.basic",
"path": "./syntaxes/HTML.plist"
}]
},
"extensionDependencies": [
"html"
]
}