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)
Related
I have a python tensorflow script that used 2 space indent. My Atom preferences have tab set to default: 2. When I hit enter after a : Atom does a 4 space auto-indent, inconsistent with the rest of the file and with the preferences.
In fact, a fresh install comes with the default set like this:
However, if I open a new file and hit the TAB button it tabs 4 spaces. This is bizarre!
I have just started using Atom, so maybe overlooking something obvious, but this is a frustrating problem.
IT turns out there are language-specific preferences that override the general editor preferences. These are accessed via Edit > Preferences > Packages > language-python > Settings which is where the tab length was set to 4.
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
Jupyter notebooks (using IPython) print in black and white by default. By opening the developer's console, locating the relevant style file, and deleting various #media print styling options, I can print in colors. However, this is rather tedious to do.
Is there a way to set up a global configuration to override the default?
Jupyter version: 4.0.6
IPython version: 4.0
Looks like a patch just got accepted on this topic: https://github.com/jupyter/notebook/pull/3212.
It's apparently something of a hack because the offending code/template is pretty deep within a dependency. While it is being fixed by the dependency upstream, the newer version of the dependency is incompatible, so a more hack-ish patch is acceptable for now.
The fix just got accepted into the master branch of the source code, so it isn't yet available in a released version. If someone sees that it is, then this answer should be updated or a new answer submitted.
One workaround that I use:
File > Print Preview
In the preview tab, press Ctrl+A (Select All)
Print > Print selection only
Like flutefreak7 mentioned the issue is fixed.
If you are using an older version and you can't / don't want to upgrade, a workaround would be using the developer console / inspector of your browser to delete the color-set line in the media print section.
In Firefox you can solve this by:
Right click -> Inspect Element (Q)
Select the Style Editor tab
Press Strg+F and search for #media print
Delete or uncomment the line color: #000 !important; in the *:after section
Close the Inspector and enjoy printing in color mode!
I'm using ST3 and trying to create a snippet to quickly output the first child selector. I have saved the file with a .sublime-snippet extension in the Packages/User location. My snippet code:
<snippet>
<content><![CDATA[
:first-child {}
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>first</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.css</scope>
<description>first-child</description>
</snippet>
So when I type div and then the tabTrigger text, the new snippet does not appear in a list or when I press the Tab key. What do I have to do to get it working?
( Note: I've noticed that it works only inside curly braces but this is useless as it needs to work for the CSS selectors which are outside the braces! )
Unfortunately, you can’t easily combine ST and Emmet snippets in CSS due to some technical problems. As a workaround, you can create snippets right in Emmet:
http://docs.emmet.io/customization/snippets/
https://github.com/sergeche/emmet-sublime#extensions-support
There is a way and it is as follows (using a Mac with OS X):
1) Download and install Package Resource Viewer
2) Open the Command Palette within ST3 (accessed typing Command+Shift+P in Mac, or Ctrl+Shift+P in Windows)
3) Type PackageResourceViewer: Extract Package
4) Select the CSS option
5) Now in the menu go to Sublime Text / Preferences / Browse Packages (a folder window will pop up)
6) Go to the CSS folder within the Packages folder
7) Select the file named Completion Rules.tmPreferences and drag it to ST3 so that it opens it
8) One line says <string>source.css meta.selector</string>. What you have to do is to delete source.css meta.selector, so that you now have <string></string>
9) Save
10) Quit ST3 and re-open it
Now you are done and your snippet should work.
I was having a similar issue where Sublime Text 3 was not expanding my snippets in CSS, they would work with a tab inside Sass or Scss files, but not CSS. They would expand, however, by pressing Ctrl+Space (on Mac)
The above answer, updating the CSS package, broke my intelliSense (autocomplete no longer worked)
However leaving <string>source.css</string> and simply removing meta.selector fixed both issues for me
I've installed …
TextMate.Zen.CSS.1.3.1.zip
TextMate.Zen.HTML.1.3.1.zip
Zen.Coding-TextMate.v0.7.zip
… and using version 1.5.11 (1635)
HTML expansion seems to work fine. But no CSS abbreviation expands. In Google Code I didn't find an issue with TextMate and ZC CSS.
What could be the problem? Tried CMD + E and Tab
Did you try reloading the bundles?
Bundles -> Bundle editor -> Reload Bundles
Also did you select "CSS" from the filetype in the bottom left corner of textmate? Can you see "CSS Zen" in there as well?