How can I change the priority for different auto completion options in CSS/LESS files?
Example:
When I quickly enter "dib" followed by tab, that should be converted to "display: inline-block;" as configured in the CSS Live Template settings.
But unfortunately, PhpStorm decided it would make more sense to convert the shortcut to "drop-initial-before-adjust" instead... (see attached screenshot)
Is there a way to change this behavior?
Enabling "Fuzzy search among css abbreviations" in the Emmet settings does exactly what I wanted.
This is the default :
<div class="container"></div>
Is there any setting to let it become
<div class='container'></div>
when you press tab?
Editor > Code Style > HTML
I think you might be looking for Code Style Settings.
There is a drop down under "Generated Code" for String literal type: Single Quotes.
Change that.
You may also want to change it for JavaScript as well as Zhe points out, that is in the Punctuation tab.
That is correct but the path is now (IJ 14) :
Editor | General | Smart Keys | XML/HTML
The option you are looking for is :
Add quotes for attribute value on typing '='
I know that this isn't the answer you really want, but I don't think it can be altered.
You can switch it off completely though, under Editor | Smart Keys | XML/HTML there is is an option for adding quotes automatically that you can remove.
Update, years later - changing your mind.
If, like me, you happily applied these tricks and got yourself set up to use single quotes in your HTML and then like me, realized you wanted to change back you might find that you could fix it for HTML but not for XHTML.
For a year or more I have had this problem. I do a fair bit of JSF/XHTML and this was killing me. There is no code style in IntelliJ for XHTML and the XML code style (naturally) does not allow single quotes so this is not configurable there.
Changing the Setting back worked fine in HTML but had no effect in XHTML. I was forced to exit IJ and edit the code style configuration manually. For me, in OS X it was in
~/Library/Preferences/IntellijIdea2017.3/codestyles/<your code style>.xml
There directly under the root element, I found the HTML_QUOTE_STYLE option :
<code_scheme name="[REDACTED]">
... some things snipped ...
<option name="HTML_QUOTE_STYLE" value="Single" />
If you change that "Single" to "Double" then you will be back to double quotes in your JSF.
It's possible however that I am the only idiot that had this problem.
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
I'm having some issues with IntelliJ 13 and autocompletion when editing CSS. Normally to set margin: I used to type: mar Tab.
Now, with the new version, I get max-resolution instead:
I had originally assumed it was due to the new Emmet functionality, but I've already switched it off and the issue still occurs:
Anybody experiencing anything similar?
There was a preselection bug which has been fixed in IDEA 13.1, please try its RC from http://confluence.jetbrains.com/display/IDEADEV/IDEA+13.1+EAP. There, the live template must be preselected if its exact key is entered in the editor.
If you don't want to see these live templates at all, you can go to Settings | Live Templates and disable the whole Zen CSS group.
Type: m Tab instead, you may find the results to your liking.
In my case helps me something opposite.
I checked the Live Templates > Zen CSS and after this, I can use snippets like bdrs(border-radius) etc from Emmet.
When I'm working with CSS, I'll often test in a browser - say, Chrome - right click an element, click Inspect Element, and edit the CSS right there. The use of arrow keys to change things like margin and padding makes lining things up super easy.
It's not too hard to then take those changes and apply them to the CSS file, but it would be cool if I could just right click the selector in the inspector and select "export" or "copy", and have the contents available in my clipboard.
Does something like this exist?
I have found the answer to this, at least as of Chrome v14.
While in the Elements section, just click on the "filename:linenumber" link next to the CSS rules. The CSS file that shows up will contain all of the modifications.
This place exactly:
In Chrome, you can right-click a CSS file in the Sources tab and click "Local Modifications"
This shows you all of your local changes. Each revision is timestamped and you can rollback to any previous revision.
See the Live Editing and Revision History section of this tutorial.
Firediff is a Firebug add-on that tracks changes done in Firebug. It logs everything you'll do in the HTML pane (great) but also your brief use of the Web Developer Toolbar extension (not so great), say Shift-Ctrl-F to obtain a font-size information in px.
I have seen a Firebug extension in Chrome but didn't test it, I use Firediff with Firefox.
In Chrome there is also the Changes tab in the console drawer that displays all the modifications of CSS. It's not an export, but at least it is very convenient to quickly grasp what has changed.
I built a Chrome extension that does exactly this.
It's called StyleURL - it takes whatever CSS changes you made in Chrome Inspector and outputs valid CSS as the diff: https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp
Here's an example where I added "padding-bottom: 50px" to this page:
It's open-source and on GitHub too: https://github.com/Jarred-Sumner/styleurl-extension
Both Firefox and Chrome support this feature now, but worth to note that in some platforms if not all Chrome does not show it by default, you need to enable the "Changes" view to see it (in my Kubuntu Linux 20.04 it wasn't by default), here is how you can enable it: go to the "Customize and Control DevTools" button in the Developer Tools bar > "More tools" > "Changes", then the tab will appear at the button:
In Firefox there is no need to enable it, but if you come from the Chrom* world may be hard to find it. Just check the last section in the right at the "Inspector" tab:
I've suggested this product on SO before (I'm not affiliated with them in any way).
http://www.skybound.ca/
Excellent product. Sounds like exactly what you're looking for and much more.
EDIT: Several other answers here have mentioned Google Chrome's ability to link to your local files (which is very very cool). Check out the other answers!
If you edit external CSS, then you can drag its latest revision out of the Resources panel into any text editor that supports DnD (see http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/, the "Persisting Changes" section for more detail.) You can also revert your CSS changes to any earlier version of the stylesheet resource (in the right-click popup menu of any stylesheet revision.)
As mentioned by cloudworks, the answer to this has changed. This can now be accomplished rather well by the Chrome DevTools Autosave extension. This tool tracks CSS and JavaScript changes made within the Chrome Developer Tools console, and saves them back to local files. For instructions to install and setup the extension, please refer to the guide written by #addyosmani on his blog, here.
There is also a handy screencast which details the extension rather well.
With Workspaces you can have your CSS saved as you type them in your inspector (in Chrome). The problem is that every change is automatically saved and there's no way to disable this feature, as pointed in http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ and Disable automatic saving of CSS changes in Chrome Developer Tools.
My in-beta-soon product LIVEditor does this exactly.
To let you understand it easily, you can think of Firebug's inspector is embedded into your text editor.
That way you don't have to make the changes manually again in your code editor after you tweaking it using Firebug or Webkit's developer tools.
If you're using the Firefox stock dev tools you can edit the css directly in the tools dialog - click the CSS viewport button (that's the button at the top with the {} symbol) and edit your css directly. It will update in realtime in the browser and when you're done just copy-paste it directly into your css file. Nice!
To add an answer for Safari specifically — it's kind of possible.
When you edit CSS in the Styles section in the Inspector for an existing CSS file, you can hit Cmd-S to re-save the entire file with the changes. However, if you're using a meta language like Sass / preprocessor / generating your CSS with bundling etc, I don't think this really solves that problem, though it may be possible with CSS source maps.
When you edit CSS at the top of the Styles section, under Style Attribute to add inline styles (not tied to an existing CSS file), it doesn't seem possible to easily export all of those changes. For now, I'm just copying and pasting the overrides manually for each element.
The official Apple docs are a little dated but found here: Web Inspector Tutorial - Editing Code to Change Your Webpage.
In Chrome, in the css inspector you can click and hold the + button, then choose to add your changes to the inspector-stylesheet. It's not as convenient as directly editing in your css-selectors, but what you write will all be in inspector-stylesheet.css