Webpack JS/SCSS-sourcemaps shows where the source originates on inspection. Actually I use Laravel Mix. Tooltips on hover in dev-console look something like webpack:///src/scss/includes/_typography.scss:124
Clicking on it, opens the source file in dev-console. I would prefer, to open corresponding line in my editor (VSCode). There must be a way, to open those webpack://-Links directly from the browser (FF usually) with an external App like VSCode?
Related
Within the explorer panel of VS Code itself, if I want to copy a file to another directory in the workspace, I can use ctrl+c and ctrl+v, but if I find a file from another application on my computer such as the native File Explorer application, first pressing the shortcut key ctrl+c and then going to the VS Code window and pressing the shortcut key ctrl+v in the Explorer panel, there is no effect.
Note that I'm not talking about copying the contents of the file and pasting into VS Code. I'm talking about copying "the file" as in the notion of the file to the desktop environment.
The workaround is the use the native file explorer, copy the file first, then open the folder opened in VS Code, and finally paste it within the native file explorer. But I find this so troublesome.
Is there an easier way to do this? Does VS Code support such functionality to paste files copied to the clipboard from a different application (not VS Code) and paste into VS Code? Is that functionality hidden behind a setting that I need to change? Or is this possible via an extension?
Vscode does dragging the filename from a native file explorer (at least on Windows) and dropping in vscode's Explorer where you want it.
You can also use your OS's Open With... functionality and then drag the tab of that editor into whichever directory you want.
You can choose Add File from File to add a file to your workspace. Or you can use New File from File to create a new file in your workspace and copy the content of the file outside to it.
At the time of this writing, this is not supported... yet!
Work to implement this is tracked under this GitHub issue: Explorer: allow to paste files from the clipboard into target folder #130036, which is a subtask of a larger issue tracking a larger effort for Better drag and drop / clipboard integration of files across applications #164.
You can give a thumbs up reaction on those issue pages to increase their prioritization (but please don't leave "me too" comments there, as such comments are considered annoying noise).
pingren (a contributor to the VS Code repository) tried to implement this and found it to be more complicated than it looks. You can read their explanation of why in their comment there. One of the difficulties stems from itegration with system keybindings and VS Code's affordance for remapping keys:
the onPaste event could only be triggered by system paste (cmd+V on macOS). Users could change filesExplorer.paste command to any keybindings. So we need to consider how to merge native paste from clipboard and VSCode explorer paste.
There's another feature-request issue (Copy paste files from native explorer to vscode #89862, created before #130036) where isidorn (another VS Code contributor) commented:
This is a fair feature request however I believe there is a Chrome limtation which is preventing us from achieving this. [...]
As for extensions that might do this, I don't know of any (but haven't tried searching intently).
Other possible workarounds:
Try dragging the file from your native file explorer application to the VS Code file explorer panel. This is confirmed to work at least on Windows and Ubuntu.
From Mark's answer (copied under CC-BY-SA):
You can also use your OS's Open With... functionality and then drag the tab of that editor into whichever directory you want.
From user103's answer (copied under CC-BY-SA), and partially mentioned in the question post already:
You can choose Add File from File to add a file to your workspace. Or you can use New File from File to create a new file in your workspace and copy the content of the file outside to it.
I would like the same functionality as for tabs in browser. I didn't find any related extension in marketplace and any command from vs code pallet.
There's nothing that exactly mirrors the "Duplicate" functionality from (for example) Chrome, but you can open the same file side-by-side (or top-and-bottom) in two editors using the "Split" functionality. Right-click on the tab and choose one of the "split" options (each will open the second copy in a different place), or refer to the answer linked below for screenshots and several alternative ways to invoke the "split" command.
How do I open the same file side by side in a single Visual Studio Code session
VS Code text editor highlights and allows to follow links, this includes local file URLs:
Ctrl+click opens the file in a new editor tab:
Is it possible to configure VS Code is some way to open the file in default program instead upon ctrl+click / follow link? (e.g. html file in web browser, mp3 in media player etc.)
Any setting, extension or different text markdown will do.
I don't think there is a default way in vscode to set open a file with default program.
However, there are extensions to deal with it. For example: Open in Application
Here's a demonstration of the feature in IntelliJ (https://www.youtube.com/watch?v=EtnI2doW6XE)?
In case the video isn't viewable, basically the user presses a key-combo, and a dialog box pops up that will reactively response and filter based on the string the user starts to type in. It will show classes and files (and much more) matching what you've typed in. I won't go in to all the details, as I'm not looking for an exact match to this functionality -- I'd be happy if it just searched based on file name for starters! Anything to prevent me from having to browse for a filename in the project Explorer to open the file in vs code when I want to switch to the given file.
I saw How do I search for files in Visual Studio Code? - for me (on Linux) Ctrl-E just shows the file I currently have open under the project explorer (useful sometimes, but not what I'm looking for).
Cmd + P opens a search bar for files (doc),
Cmd + T opens a search bar for symbols (doc),
Are you just looking for CTRL-P That brings up a file list. Which is searchable. You can then tab down and right arrow opens up that file. Enter will open a split editor on the file.
Also, if you CTR-p and then type ? you will get a list of keys you can hit such as to "Go to Symbols" and much more in your file or workspace.
And look at CTRL-R it probably does exactly what you are looking for as far as files go.
I was wondering if there is a way to see a preview of an webpage page that we are working on in a web browser directly from the Visual Studio Code editor, instead of having to click the file to make it open by the default web browser.
You can open your Visual Studio Code project in a browser window by configuring a gulp task with the node module gulp-open. Then you can run the gulp task from inside Visual Studio Code.
Here's how you might configure the gulp task:
var open = require('gulp-open');
gulp.task('browser', function(){
// Define the source to match the file you wish to open:
gulp.src('./www/index.html')
// Designate the browser you wish the file opened in:
.pipe(open('<%file.path%>', {app: 'google-chrome'}));
});
});
Since we've named our task "browser", from inside Visual Studio Code we can hit command/control P to bring up the command pallet and type task. Then start to type browser. You should see code complete for the full task as you type. Hit return and it will open the your file in the browser you designate. Once the browser is open, you can resize it and Visual Studio Code so that they are side by side. Then as you work you can refresh the browser to see your changes.
You can consult the docs for gulp-open on NPM.
Directly from the editor, there are WYSIWYG editors such as Adobe Dreamweaver, Kompozer, etc. Though these often offer a poor preview of anything beyond simple HTML and CSS (i.e. no JS, no animations, possibly different CSS support).
Using a text editor such as the Visual Studio Code Editor, Sublime Text or vim, there is no such preview function.
Ideally, you'd want to test in the browser (the browsers you'd expect your target audience to be using) to ensure you have an idea of what exactly your visitors will see.
To save time between coding and previewing, you could simply keep the window/tab open in Chrome/Firefox/Edge and refresh after saving the file in the editor.