When i type in "x", my text editor, atom.io, suggests "xxx". If i select it, it simply displays
<!-- XXX: -->
What does it mean or stand for?
This is a snippet provided by Atom. More about snippets: http://flight-manual.atom.io/using-atom/sections/snippets/
More about the meaning of XXX: What is the meaning of #XXX?
It's caused by the "autocomplete" feature in Atom. To turn it off, go to Atom -> Preferences, select "Packages" on the left, scroll down to "autocomplete-snippets" and click the Disable button.
This will disable the autocompletion of all "snippets" but auto-completing of things like variable names etc will still work.
Related
When I open the curly brackets in CSS and hit enter, it just jumps to the next line like this:
body {
}
It doesn't add a new line with an indentation like it used to, I tried looking through the setting and trying everything but couldn't get a result.
I want it to look like this when I press Enter:
body {
}
What you need is a VSCode plugin called "Prettier".
It can be downloaded in the "Extensions" section of VSCode,
or downloaded from this link: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
You can try the following:
Check if you have set your default formatter to prettier
You can check the box to Format On Save or ;
Autosave: There are are currently 4 options available -:
a) off
b) afterDelay
c) onFocusChange
d) onWindowChange
To anyone who is facing this problem in VSCode. This feature is not related to any extension, not Prettier or any other extension. What you have to do to fix this bug is:
Go to the settings
Search for Folding Strategy and choose the Auto option
Then enable Folding
It adds that indentation in both HTML and CSS
What is the equivalent Atom Indent Guides like the one Bracket has showing vertical lines connecting matching beginning/opening and ending/closing brackets or keywords?
Atom supports "Indent Guides" and even names it the same, you can access the configuration by choosing Settings View: Open from the Command Palette
or by pressing Ctrl-, (Control + Comma). Scroll about two-thirds of the way down and there is a checkbox to toggle the Indent Guide on or off:
When enabled they look like this in the editor:
Also found an "improved" package in Atom if Atom's indent-guide isn't cutting it.
https://atom.io/packages/indent-guide-improved
Repo seems to be updated.
UPDATE: show indent guide option is now under Editor tab, in settings.
Screenshot:
Haha. I encountered this issue today too. If I understand your question correctly, you want to know how to enable this feature?
Go to preferences/settings and then scroll down and check 'show indent guide'.
Example
There seems to be a lack of formatting settings for vscode.
I want to be able to format html such that my html shows up as:
<div attrib1=value1
attrib2=value2
attrib3=value3>
Content
</div>
This is one functionality that I'd really love to have!
VSCode added a way to do this now.
You can edit your settings.json (ctrl+shift+p) and then add the following for the desired effect:
"html.format.wrapAttributes": "force-aligned"
--or--
"html.format.wrapAttributes": "force"
force-aligned will also add indents to align it with the attribute on the line where tag was opened.
Visit this link for more details or updates.
My extended html was being limited by the "Prettier: Print width" setting, I thought I'd put a random value as 0, but then all the tags start breaking the attributes. So he put 10,000. This solved my problem.
There are differnt "formatter" extensions, but one I found does a decent job of this exact formatting that you are looking for.
It's called "vscode-tidyhtml".
https://marketplace.visualstudio.com/items?itemName=anweber.vscode-tidyhtml
Click on the Extensions icon on the left hand side
Search for and install "vscode-tidyhtml", reload Visual Studio Code
Hit the "F1" key, and then type "TidyHtml", hit enter
It should format HTML so that attributes are on different lines. I am not sure if it works well for other file types.
I know this is late, but I came here searching for an answer too. As #adi518 mentioned, the vscode automatic formatting for this might not be a great idea.
So, to do it where you'd like it, this extension might help:
https://marketplace.visualstudio.com/items?itemName=dannyconnell.split-html-attributes
You should open the settings.json file (shift+cmd+p for mac) and click on Open Preference: Open Settings (JSON)
add the following line at the beginning of the JSON file:
"html.format.wrapAttributes": "force-aligned",
In case formatting still does not work (this is a different issue), search for HTML and add the following lines
"[html]": {
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
Close and Open vscode then format by using (option+Shift+F)
My problem is simply that some of the Emmet snippets and abbreviations get overridden by the Sublime Text 3 default tags - for example, when I type 'link' and press TAB I don't end up with:
<link rel="stylesheet" href="">
as stated in the Emmet documentation (https://github.com/emmetio/emmet/blob/master/lib/snippets.json).
Instead I get:
<link rel="stylesheet" type="text/css" href="">
This which is the Sublime Text 3 default. The same goes for 'img' and a few other useful tags, and now I'm wondering: why is that and what can I do "fix" it? I want the Emmet snippets to have "first dibs", and not the other way around.
Open Preferences -> Package Settings -> Emmet -> Settings-User and add the following content (it should be empty upon opening it for the first time):
{
"remove_html_completions": true
}
Save the file, then restart Sublime.
For a look at all the options you can customize, open Preferences -> Package Settings -> Emmet -> Settings-Default. If you see anything that you'd like to change, copy the setting to Settings-User, making sure there's a comma , at the end of each line except the last one.
Just for the record I want to convey that I've finally found the solution to my problem. It would seem as if Emmet has this built in setting where you can specify in which scopes you want your code editors' defaults to override Emmet, and as a default this is set to "text.html". Hence what I needed to do to resolve my issue was just to change this setting to none by simply typing
{
"disabled_single_snippet_for_scopes": ""
}
In the Emmet user settings. Cheers!
It’s pretty hard for Emmet to play nice with native Sublime Text snippets due to lack of API. But Emmet tries to guess what you want to do as much as possible.
By default, when you type something in ST that matches native snippet you’ll likely see an autocomplete popup with snippets proposals. Which means you’ll likely want to expand native snippet by pressing Tab key. On the other hand, most Emmet abbreviations doesn’t look like predefined snippet, e.g. you won’t see autocomplete popup when typing abbreviation.
Thus, Emmet doesn’t expand abbreviations by Tab key when autocomplete popup is visible. It seems like a decent solution for native snippets problem (ST API can tell if popup is visible). I’m pretty sure in your link example there was autocomplete popup visible.
For hardcore Emmet users it’s possible to disable this behaviour and force Emmet to always expand abbreviations by Tab, event if autocomplete popup is visible. To do so, go to Preferences → Settings-User and add the following option:
"disable_tab_abbreviations_on_auto_complete": false
See https://github.com/sergeche/emmet-sublime/blob/master/Preferences.sublime-settings#L29
What is the "overlay" in ST and how can it be used? (please indicate default key bindings)
It's just a generic interface element which pops up a list of options and a field for searching them. Examples of overlays include the command palette (Ctrl+Shift+P) and Goto Anything (Ctrl+P).
Do you talking about command which by default binded to "ctrl+;"?
As far as i know it works like find(ctrl+f), but overlay can search for one word only.
For example we have this file:
Someone correct my english pls
If we will use find command we could look for more than one word like "my english".
But if we gonna use overlay we could to search for "my" or "english" only.
We can't search with overlay for "my engligh" cuz here is more than one word.
Sublime Text can read settings from multiple configuration files.
The default order is described here.
Packages/Default/Preferences.sublime-settings
Packages/Default/Preferences (<platform>).sublime-settings
Packages/User/Preferences.sublime-settings
<Project Settings>
Packages/<syntax>/<syntax>.sublime-settings
Packages/User/<syntax>.sublime-settings
<Buffer Specific Settings>
The latter configuration files override ("overlay") the former, allowing you to have more specific settings for certain programming language, project, etc.