VS Code keybind for quick formatting a selection on HTML - html

I recently switched from Brackets to VS Code and I can't find a specific keyboard shortcut that I used regularly on Brackets, and I can't custom create it because I don't know how to correctly describe the command to the program.
On Brackets I used to use the keyboard shortcut Shift+Ctrl+A and with a few lines selected it would let me format the complete selection. It opened a one-line command screen on the bottom and it would let me add up different tags for HTML for example. Let's say I had a few paragraphs that I needed to format into an ol, once selected I would simply type: ol>li* in the command screen and it would automatically format the whole selection.
English is not my first language so sorry if the explanation is kind of weird! I've been searching for a solution to this for some days and I'm getting nowhere.
Things I already tried/worth noting:
Installed the Brackets keymap extension (I went through all of the keybinds and couldn't replicate this)
Checked VSCode keybinds list.
I, unfortunately, uninstalled Brackets and can't take a screenshot of the thingy. I am regretting this so much already. I should have been more aware of the keyboard shortcuts and whatever extensions I had installed.
Maybe it has to do with an extension that I'm forgetting to install?

Related

can't work with vscode python django html autocomplete features not working

first I created a project to work with django, but when I add index.html to it it doesn't autocomplete! When I type, nothing comes up, I also get an error like "This extension is deprecated because it is no longer maintained".
"!" in the html files of my codes.
When I put the tick I wanted autocomplete but it didn't happen and I searched a lot and couldn't find any result. I would be glad if you help.
Here is the following method for doing what you what to do.
open your vscode.
Go to setting and search emmet language in the search bar find it include the language and add a specific language.
After doing this save it and your vscode is ready to go.

How to align code, in PhpStorm / Intellij, using tabs (and not spaces)

I'm trying to setup PhpStorm, so I can simply press: "Reformat Code" ( Option CMD L), before each save - and then it'll make everything look right.
But I have this case, where I don't know how to make PhpStorm make the code right.
This is the code:
As you can see, then indentation is with tabs, but the aligning of the characters are with spaces.
I want it to look like this:
It would be cool to get the solution. But it would be even cooler to be able to figure out, how I could have found the solution myself.
Further info / idea: There is a Php Codesniffer from Squizlabs implemented. So I can fix is automatically by running a sniff fix-command. It would be pretty cool, to be able to automatically setup PhpStorm's Code style settings, to correspond with Squizlabs styles, without having to gradually tune the settings one thing at the time. But I haven't found that functionality.
Solution attempt 1: Read through all Settings >> Editor >> Code style >> PHP
I couldn't find anything that resembled this.
Solution attempt 2: Disable .editorconfig
I've read quite a bit about .editorconfig and it doesn't have these nitty-gritty functions here (as aligning equal signs).
But to make sure, I tried disabling it. Didn't make a difference.
Solution attempt 3: Search setting for 'align' and 'formatting'
But I didn't find anything useful. :-/
Solution attempt 4: Update PhpStorm
I was on PhpStorm version 2022.2.1.
I tried updating to PhpStorm version 2022.2.4.
This is still in progress.
Please show what you have at Settings (Preferences on macOS) | Editor | Code Style | PHP, specifically Tabs and Indents tab.
Checking Use tab character option with unchecked Smart tabs should do just that.
https://www.jetbrains.com/help/phpstorm/2022.3/settings-code-style-php.html#php-specific-formatting-settings-for-tabs-and-indents
(Pro tip: you can copy-paste your code sample in the preview area and start changing the options; the IDE will apply the changes live on the provided code sample instead of the default one.)

What is this options bar in PhpStorm called?

I have this weird bar that shows up on some of the pages that I am working on in PhpStorm that is really annoying, as it often blocks what I am trying to work on. I can't move it or remove it. Does anyone know what it is and how to get rid of it?
This floating toolbar appears in Markdown files (not sure about any other file types, at very least I see it only there).
I see 3 icons only (in current stable PhpStorm 2022.2.3 version), which may depend on the features used (e.g. I have Diagrams plugin disabled):
Text only mode
Split mode: text + rendered preview
Rendered mode only (HTML preview)
https://www.jetbrains.com/help/phpstorm/markdown.html#preview
The other 2 icons visible on your screen MIGHT be for:
Visualizing diagrams for the Mermaid and PlantUML languages (I do not have them in any of my files so cannot check it. But it should be that).
https://www.jetbrains.com/help/phpstorm/markdown.html#diagrams
Pandoc Converter for HTML, Microsoft Word, and PDF formats (not using it myself).
https://www.jetbrains.com/help/phpstorm/markdown.html#convert-markdown-files
...it often blocks what I am trying to work on. I can't move it or remove it. Does anyone know what it is and how to get rid of it?
It is displayed in the top right corner where it is hard to cover anything.
I see no options anywhere to remove it. But you can "convert" it into the permanently visible toolbar instead if you prefer:
Help | Find Action...
Type registry to locate and invoke Registry... entry.
Once in the Registry, locate ide.text.editor.with.preview.show.floating.toolbar entry there (just start typing, the speed search works there)
Disable it (make sure it's saved) and restart the IDE. Now it will look like this (a fixed bar instead of "annoying floating" one):

Replace HTML text displaying on webpage using Chrome without installing a chrome extension

I am trying to find a way to replace certain text on the webpage without the use of chrome extensions.
For example, I want the text 'dogs' to replace with 'doggos' each time the web page detects the word dogs. Is it possible to do this without the use of Chrome Extensions? How can I write such a script and can this run in the backgroun?
Thanks all!
Use Chrome Dev Tools
If you want to use chrome, but not a chrome extension, you want to use the console in the Chrome Dev Tools. Running a script for a website on the Chrome Console is a solution to your question, and is shown below, but it will disappear when you refresh the page.
Replacing String Literals in the Body
To replace all instances of dogs with doggos in the HTML body, you would walk the document tree as documented by this SO question.
Applied to your question, the result is below:
Further Reading
You may also want to check out javascript with Regular Expressions, which are more powerful than a simple string replace. If you want this running in the background, you should look at Mutation Observers to check whether the DOM has changed.

Visual Studio Code Not Auto-Close Tags in HTML

So version before 1.30 worked fine, and did close the Tags in .html file, but as of 1.30 update I can't finish and then try to close it with
I have tried to delete config.json file, also tried to turno on every possible option for auto-close and auto-complete tags in options, but nothing worked.
And Sublime it's working fine. I downloaded plugin to transfer Sublime confing into Visual Studio Code but without success. Hope you can help me out, since i've been trying to fix this problem 3 hours now.
I had the same problem, then I noticed that my select language mode was something like Django HTML. Solved after changing it.
You might have opened a file before that changed the language mode. So first, check the language shown at the bottom-right of the VS Code window (status bar), then follow the steps bellow.
Go to settings (or edit the settins.json file) and search emmet.includeLanguages, then press add item under Emmet: Include Languages. input the language you are using in item field and html in value field.