Related
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
It seems Emmet is supposed to work with .jsx files too, but I cant get it to work in atom. My divs are not expanding, nothing happens when i press tab. I've tried restarting Atom, disabled all other user packages and it works perfectly with html documents. Should Emmet work with .jsx out of the box or are there configurations needed?
Open Atom -> Preferences -> Packages -> Emmet
Scroll down a bit and you'll see a note about this particular issue. From there you just need to grab the correct context, which in my case was source js jsx and add it to your Keymap configuration.
# Auto expanding for emmet #
'atom-text-editor[data-grammar="source js jsx"]':
'tab': 'emmet:expand-abbreviation-with-tab'
OR (with a more relaxed selector)
# Auto expanding for emmet #
'atom-text-editor[data-grammar*="js"].not:[mini]':
'tab': 'emmet:expand-abbreviation-with-tab'
As of the latest version you can hit cmd + shift + e. I assume for windows or linux it would be ctrl + shift + e (Although I have not verified windows and linux one)
I'm trying to use Aptana Studio 3 instead of phpEd. But I'd like to have the code coloring like in Dreamweaver. I made these changes in phpEd, but I can't find where to change it in Aptana.
Also, I installed the jquery bundle, but I can't to get it working...
Thanks for your help.
Preferences:Aptana:Themes. Figuring out what keyword corresponds to what display object can be a bit tricky, but it is all there.
There's actually a ticket already filed to add a theme that matches Dreamweaver: https://aptana.lighthouseapp.com/projects/35272/tickets/1508-create-dreamweaver-color-theme
I'm looking at it now, but I'm running into some internal bugs (namely https://aptana.lighthouseapp.com/projects/35272-studio/tickets/2357-scope-selectors-with-portion-prefix-match-arent-matching-properly) that I need to fix before I can finish. In any case it should be in Studio 3.0.2 and hopefully I'll fix it today and it'll be in tomorrow's nightly (here's how to get nightly builds: http://wiki.appcelerator.org/display/tis/Changing+the+Update+Type).
As for editing themes yourself, you can see the current scope at the cursor by doing Commands > Bundle Development > Show Scope. Then use scope selectors that match that sort of scope (we adopt Textmate's scoping/theming rules: http://manual.macromates.com/en/scope_selectors)
Could you finally get your theme?
If you want to create your own theme then first go to: Window->Preferences->Aptana Studio->Themes
To create a new theme just click on the "+" sign next to the themes
list.
To add elements to your new theme right click the text in your
editor and click Commands->Bundle Development->Show scope.
Copy the last section you see to the right of the hint window that
appears.
In the themes elements list click the "+" located at the bottom of
the dialog box (next to "Scope selector")
Give a friendly name to your new element.
Assign foreground/background colors to your new element.
Paste the element's scope in the "Scope selector" input box (make
sure your new element is selected, if not, click on it).
I created a theme for PHP, CSS, HTML, JS and XML editors, similar to the old aptana 2 colors. If you want to get it you can write me to jgarcias.cr at gmail dot com.
Cheers.
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