With the basic Sublime Text 2 build, I am getting CSS value autocompletion only when I type the first letter of the value, as seen in the image below.
However, I've been watching the Tuts HTML+CSS web tutorials (here is an example video), and his Sublime Text build shows all possible CSS for a given attribute. Below is a screenshot from the linked example video.
My question is what setting or package allows for the display of all possible CSS values for a given attribute?
No additional packages or specific settings were needed to solve this issue. The Ctrl/Cmd+Space keyboard shortcut natively displays all possible completions.
Try different plugins through Package Control.
Specifically trying these may work for you:
CSS Completions
Emmet CSS Snippets
CSS Extended Completions (requires ctrl/cmd + space)
There is no package needed in Sublime Text 2 to display all possible completions, e.g. all possible values for a CSS property, but LaceLafontaine's answer is no longer current. Cmd+Space doesn't work on Macs, partially because it's a shortcut for a spotlight search.
Currently the shortcut to display the completions in OSX is Ctrl+Space. I believe it's the same for both Mac and PC. The issue was discussed here: https://github.com/processing/processing/issues/2699
Linux Users
For me it worked when I config using this:
"auto_complete_triggers":
[
{
"characters": ": ",
"selector": "source.css",
},
],
And then you use Space as trigger.
There is an additional space before every value, but Minify or HTML-CSS-JS Prettify will delete all these spaces
Related
Yes, I know, according to someone's criteria this is more readable.
In our case it is NOT and we have programmed like this for years and we do not want to change it.
How can I disable that when I add a CSS property with auto-completion, it puts a space after the colon?
If I write, for example "flo", and I press enter to fill the "float" property, visual will put "float: ;" and I want it to write "float:;".
I have to remove space every single time and it's really struggling.
Thank you.
Search, configuration etc... NOTHING WORKS
You should be able to do what you want. You are looking for an emmet preference. See Emmet Preferences: v1.16 Release Notes:
There is supposedly support for the css.valueSeparator, see also GH Issue: Emmet Preferences support.
So you should be able to do this in your settings:
"emmet.preferences": {
"css.valueSeparator": ":",
}
The default for css.valueSeparator appears to be : , see Emmet Preferences.
BUT, it doesn't work for me for some reason - seems like some completion option is not respecting the css.valueSeparator setting. So you may have better luck - or need to file a github issue on this.
Generally new to web design and watching some tutorials on creating some backend for a project, getting really tired of writing out the manually, I see youtubers do .classname and then the class with the div appears, but for some reason it isn't working for me? Any help would be appreciated.
Also, would it be easier to switch to Sublime, my buddies think that it is the way to go.
Cheers.
Go to settings
Go to emmet under the Extensions section.
Click on 'Edit in settings.json'.
Write the following inside the 'emmet.includeLanguages' tag. Otherwise, paste the whole statement.
"emmet.includeLanguages": { "javascript":"javascriptreact" }
Save the settings.json file.
Those videos are likely using emmet. VS Code includes built-in support for emmet completions in html files. For example, typing .classname in an html file will trigger an emmet suggestion that expands to <div class="classname"></div> when you accept it
If you do not see this working:
Make sure the document is in the html language mode
Try manually triggering suggestions after .classname using ctrl+space
Make sure you have not disabled Emmet
I tried everything written in the answers but it wouldnt work, I had to do the following;
go to settings in the bottom left, search for 'emmet'
scroll down to and tick:
'Trigger expansions on Tab'
then it works by typing .divClassName + Tab
Check out this Cheat Sheet for VSC:
Cheat sheet for VSC
Ensure that VScode recognises your file as HTML5 or CSS file. In my case I had emmet enabled, but while I could get emmet abbreviation in a CSS file, they wouldn't work in an HTML file. The issue was that I also had Django template extension installed and the file had Django template code as well, hence VScode considered the file as Django template file, not HTML. You can check this the status bar at the bottom of VScode. Once I changed the file from Django template to HTML by clicking on Django Template in the VScode status bar, emmet started working.
The above answers didn't help me because VS code already came with Emmet installed, but I was missing the information on how to actually trigger it.
For an html element
Type the element e.g. div, h1, whatever, then press tab to complete it
For a class
Type the class name beginning with a dot then press tab to complete it.
For example type .myclass and hit tab and you'll get <div class="myclass"></div>
Note: if your class has spaces, use a dot in place of the space (e.g. for "my great class", you should type ".my.great.class" and hit tab)
Source
This information is from here
Tried mentioned thing from emmet vs code document
go-to .vscode >> settings.json
add line "emmet.triggerExpansionOnTab": true
it worked for me for reference : Emmet in visual studio code
I'd like to know if there is any way to activate auto indent a CSS file in visual studio code with the shortcut ALT+SHIFT+F?
It's working fine with JavaScript but strangely not with CSS.
Yes, try installing vscode-css-formatter extension.
It just adds the functionality to format .css files and the shortcut stays the same Alt+Shift+F.
Beautify css/sass/scss/less
to run this
enter alt+shift+f
or
press F1 or ctrl+shift+p
and then enter beautify ..
an another one - JS-CSS-HTML Formatter
i think both this extension uses js-beautify internally
Wasted an hour finding the best option.
Just putting it together, for easy reading and choosing one them.
Notes:
CSS and SASS/SCSS/LESS are all related
HTML, Javascript, Typescript, JSON - VS code is already formatting
CSS and related - VS code is not formatting as of today
Options:
To format css/sass/scss/less:
Prettier
All css related supported, and not others, I choose this, it works great.
To format JavaScript/TypeScript/CSS:
Beautify css/sass/scss/less
but, already JS, TS are supported by VS code
To format JS, CSS, HTML, JSON file (wraps js-beautify)
JS-CSS-HTML Formatter
but, already JS, HTML, JSON are supported by VS code
To format CSS
CSS Formatter
but, only CSS supported, not all the related - not maintained 6+ months
To format:
Press Alt + Shift + F in VS Code, after installing Prettier.
I recommend using Prettier as it's very extensible but still works perfectly out of the box:
1. CMD + Shift + P -> Format Document
or
1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Selection
EDIT: Prettier has become vastly more popular and standardized since I first posted this answer. It has gone so far as to even be used directly in the build flows of most modern frontend projects. I strongly encourage users looking to format their code use the Prettier VSCode extension, which tries to use the same settings configured by said build flows.
After opening local bootstrap.min.css in visual studio code, it looked unindented.
Tried the commad ALT+Shift+F but in vain.
Then installed
CSS Formatter extension.
Reloaded it and ALT+Shift+F indented my CSS file with charm.
Bingo !!!
There are several to pick from in the gallery but the one I'm using, which offers considerable level of configurability still remaining unobtrusive to the rest of the settings is Beautify by Michele Melluso. It works on both CSS and SCSS and lets you indent 3 spaces keeping the rest of the code at 2 spaces, which is nice.
You can snatch it from GitHub and adapt it yourself, should you feel like it too.
Maybe a little bit late to the party but this might help users using prettier. Just add this line to the setting.json file.
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
Save and all should be good now
Go to Files menu -> Preference -> Extentions
Then type CSS Formatter wait for it to load and click install
Install HookyQR.beautify extension. It will beautify your javascript, JSON, CSS, Sass, and HTML in Visual Studio Code. It is the most use extensions for this purpose
Beautify (Github) & Prettier (Github) are the best plugin for web development in Visual Studio Code.
To format the code in Visual Studio when you want, press:
(Ctrl + K) & (Ctrl + F)
The auto formatting rules can be found and changed in:
Tools/Options --> (Left sidebar): Text Editor / CSS (or whatever other language you want to change)
For the CSS language the options are unfortunately very limited.
You can also make some changes in: .../ Text Editor / All Languages
I find it tedious to manage very large style sheets in Sublime Text 3.
Some of my stylesheets are about 2000 lines of code. I am trying to figure out how to navigate more easily within the stylesheet. I already know about bookmarks and the brilliant search function, but another way would be to hide/fold all code and show comments only. Tis way it would be easier to find the correct place you want to go to.
So is there a way to hide all code below a comment? This would be something as the opposite of Fold Comments
I know Hugo proposed the classic "fold all" solution here. But I would like to hide absolutely all code and display comments only.
For example:
/*******************************************************************
Description 1
*******************************************************************/
Hide/fold all code between here...
...
...
..
.
.
/*******************************************************************
Description 2
*******************************************************************/
You can fold everything, which is not a comment by opening the console ctrl+` and write view.fold(view.find_by_selector("-comment")).
This searches all regions with the selector - comment, which means everything except comments. Afterwards these regions are folded.
If you want to create a keybinding for it, just create a plugin. Open Tools >>> Developer >>> New Plugin and paste:
import sublime_plugin
class FoldEverythingExceptCommentsCommand(sublime_plugin.TextCommand):
def run(self, edit):
regions = self.view.find_by_selector("-comment")
self.view.fold(regions)
Afterwards add this to your Key Bindings - User to add a keybinding for the command:
{
"keys": ["ctrl+alt+shift+f"],
"command": "fold_everything_except_comments"
},
You can use the arrows in the far left of the text editor. Sublime has the line number listed down the left and beside those numbers are tiny arrows.
I'm currently trying to learn Sublime Text 2, and so far I'm very impressed. But there are some things that I need compared to what I used for editor before (Microsoft Expression Web).
When I had a HTML file and had a class for a div or something. Then I wrote fx:
<div class="classname"></div>
Then I could CTRL + click on the classname, and it would instantly take me to the CSS file where this class was located, and to the line where it was, and I was able to edit it right away, instead of going into the CSS file and make a search.
Is this possible in Sublime Text 2 as well, or...?
Thanks in advance.
Unfortunately, there is no built in feature that does what you require.
But luckily there is a dev who created a plug-in, that does exactly what you want.
Take a look here: Goto CSS Declaration
In addition to the "Goto CSS Declaration" plug-in, that No Reply linked to in their answer, you can press ctrl+P, which let's you jump around in files.
Unofficial Documentation for more details