Is there any path-autocompletion extension for Markdown in VSCode?
I tried Path Intellisense but this seems to be effective only when using (double) quotation.
I want to use autocompletion when insert images stored in local directory, e.g.:
Yes, you can make that happen by using this extension on VS Code.
Relative Path extension
Juste type ctrl (or cmd on mac) + shift + H and type your file name.
It should be built-in to vscode soon, hopefully v1.64.
New setting: markdown.suggest.paths.enabled default is true
from Commit: Add basic markdown link completions
Only normal links for now. Will add reference links later. Should
support the forms:
[](dir/file.md)
[](./dir/file.md)
[](/root-dir/file.md)
[](#header)
[](./dir/file.md#header)
The paths suggestions work similarly to path IntelliSense in CSS and
HTML files. Paths starting with / are resolved relative to the current
workspace, while paths staring with ./ or without any prefix are
resolved relative to the current file. Path suggestions are
automatically shown when you type / or can be manually invoked by
using kb(editor.action.triggerSuggest).
Path IntelliSense can also help you link to headers within the current
file or within another Markdown file. Start the path with # to see
completions for all the headers in the file (depending on your
settings, you may need to use kb(editor.action.triggerSuggest) to see
these)
-from https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_64.md#markdown-path-intellisense
For anyone else stumbling upon this answer, the Markdown All in One extension is able to perform this sort of autocomplete.
Related
I am new to using VSCode and emmet for expanding filenames, etc.
Currently, I'm working on a React project and found an issue where, for example:
I create a files named, say, myfile.jsx for my MyFile component
Realize I want the file name capitalized to match the component name, so I rename it to MyFile.jsx
When trying to use emmet to import the file to use the component in, say, my App.js it imports the old filename myfile.jsx (without the updated casing).
In other words, emmet is not picking up in the change in casing for file names.
Is there a way to somehow refresh the cache for emmet / have this update without having to restart VSCode?
Thanks!
Is there a keyboard shortcut How to make VS Code treat/reopen/reload files without extension as a certain language?
Just to be clear, here's my use case:
Sometimes I have a big JSON I need to read so I copy it in VsCode new file but since it's a new file I have to save it a s JSON extension to read it in the correct format. So my question is: Is there a way to specify the language for this new file(without extension) to open it as JSON for example?
Thank you
I found these two options:
// The following example associates all files in a folder `somefolder` to PHP:
"files.associations": {
"**/somefolder/*.*": "php"
}
https://code.visualstudio.com/docs/languages/overview#_can-i-map-additional-file-extensions-to-a-language
// The default language mode that is assigned to new files.
"files.defaultLanguage": "html"
https://code.visualstudio.com/docs/languages/overview#_how-do-i-set-the-default-language-for-new-files
Add the lines of your choice to settings.json.
Nevermind guys I found it:
The feature is called Change Language Mode.
The default shortcut is Ctrl+K M if you want to customize it here's the name of the command:
workbench.action.editor.changeLanguageMode
You can also click in the lower right of VSCODE window to change the language mode:
Are there any extensions/features in vs-code which could let me know where the current file is imported? I usually do a global search of the filename but it is time consuming when the file name is similar to any variable or there are similar named files.
You can do a right-click on every function / variable or class. Then you choose "Find all references" to show where each function / variable or class is called.
For this you do not need an extension, because it is a standard feature of vscode
- find unused exports in project:
you can use this extension in vscode to find all unused exports
+ find name references (e.g. used exports) in project:
click on name then press shift+alt+F12
NO EXTENSION REQUIRED
Yes, We can find the references of a file in VSCODE like this:
Right-click on the file and then select Find References.
VSCODE will show all the references/imports of the file.
image reference
Right-click > Go to References (Shift + F12)
There is also an extension to change the appearance of how references show https://marketplace.visualstudio.com/items?itemName=jrieken.references-plusplus
If you are limiting your search to the current open workspace / folder, you can
do a search for 'import' using the magnifying glass or pressing ctrl+shift+s
open the results in editor by either clicking the link that says 'Open in editor' or by pressing alt+enter
In the document that opens, search for the name of your module.
In this way you will discover all of the imports that involve your module, regardless of whether you have used 'import mymodule' or 'from mymodule import myfunction' or anything else. I'm specifically thinking of how I'd structure a python project, but if you are using another language, you can alter the search in a way that works for the way your language does imports.
Now my default file type of Visual Studio Code is Plain Text.
If I save a new file with name like a.in, it will save as a.in.txt. I have to change the dropdown to All Files.
I find the same problems in github: 1, 2. However, they seem not solve my problem.
This is not possible in the general case in VSCode.
The issue is that you cannot assign "no extension" to a language, and as per the links you mentioned, the All Files (*.*) option is disabled by upstream (electron).
Therefore, you will either have to remove the extension manually, OR you can create the file first (using the terminal, Explorer, an extension, etc.) and then open that existing file.
There is a way to change the default extension (but not to All Files)
Add the following line to your settings.json
"files.defaultLanguage": "<language>",
Replace <language> with the language of your choice.
Now, whenever you make a new a file, the default file language will be <language>.
A special value for <language> is ${activeEditorLanguage} which is the language of the file last opened (useful if, say, you copy a piece of code from one file to save as another).
Unfortunately, this does not fully answer the question, but provides a partial solution.
I've got a component-based folder structure in my project. It is a bunch of component-folders with one index.js file each.
Is it possible to make Visual Studio Code display the parent folder name in the file tabs? Or am I limited to seeing a bunch of tabs that all display index.js and nothing else?
You can configure Visual Studio Code to always show parent folder names in the tabs! In your User Settings, just add this line: "workbench.editor.labelFormat": "short" (other values are "long", "medium" or "default")
Result: the files init/views.js, init/routes.js and plugins/modal.js will be presented as such:
Another option is the User Setting "breadcrumbs.enabled": true which will give you an entire row of breadcrumbs showing the complete file path:
PS: To open User Settings use the File-menu → Preferences → Settings → User Settings. To view the settings in a JSON format just click the {} icon in the top right corner.
Go to the main menu File → Preferences → Settings. And search for (Cmd + F on Mac; Ctrl + F on Windows and Linux) workbench label format.
Choose the short option.
Visual Studio Code has now improved their tab-UI to resolve this issue.
When you've opened multiple tabs with the same filename, Visual Studio Code will automatically display the parent foldername in each of those tabs.
Here's an example: I've opened event.js and two index.js files. Visual Studio Code automatically decides it's a good idea to display the foldername for the index.js files :)
It pretty much solved the bulk of my problem.
I know this is too late to answer, but in case someone is looking for the file path to show on the title bar, you can follow this:
Open settings (command + ,)
Search for title
You'll see something like activeEditorShort, replace it with activeEditorLong
Save
Source:
https://medium.com/riow/vscode-show-full-path-in-title-bar-b0cb731b330
Step 1: Go to File > Preferences > Settings
Step 2: search for "workbench.editor.labelFormat"
Step 3: select medium from a drop-down
You can install the nice-index extension for a better experience dealing with index files.
However, as of now, it only works when you have more than one index file open. This can be resolved by changing labelFormat to "short", as other answers suggest.
In VSCode 1.53 you can use thees settings:
Controls the window title based on the active editor. Variables are substituted based on the context:
${activeEditorShort}: the file name (e.g. myFile.txt).
${activeEditorMedium}: the path of the file relative to the workspace folder (e.g. myFolder/myFileFolder/myFile.txt).
${activeEditorLong}: the full path of the file (e.g. /Users/Development/myFolder/myFileFolder/myFile.txt).
${activeFolderShort}: the name of the folder the file is contained in (e.g. myFileFolder).
${activeFolderMedium}: the path of the folder the file is contained in, relative to the workspace folder (e.g. myFolder/myFileFolder).
${activeFolderLong}: the full path of the folder the file is contained in (e.g. /Users/Development/myFolder/myFileFolder).
${folderName}: name of the workspace folder the file is contained in (e.g. myFolder).
${folderPath}: file path of the workspace folder the file is contained in (e.g. /Users/Development/myFolder).
${rootName}: name of the opened workspace or folder (e.g. myFolder or myWorkspace).
${rootPath}: file path of the opened workspace or folder (e.g. /Users/Development/myWorkspace).
${appName}: e.g. VS Code.
${remoteName}: e.g. SSH
${dirty}: a dirty indicator if the active editor is dirty.
${separator}: a conditional separator (" - ") that only shows when surrounded by variables with values or static text.