Using Eclipse 2020-09 (i.e. v. 4.17) IDE for Java (on Linux, openSUSE Tumbleweed), with version 3.0.38 of Mylyn WikiText plugin installed, I had the following difficulty: Although pretty much all editor/ui fonts were fine, the HTML preview of WikiText files (in particular README.md!) displayed in unreadably small fonts (my display has a very small pixel pitch). So I wanted to find a way to set the CSS of such preview pages. The Mylyn WikiText docs (at https://help.eclipse.org/2020-09/index.jsp?topic=%2Forg.eclipse.mylyn.wikitext.help.ui%2Fhelp%2FMylyn+WikiText+User+Guide.html, under the heading "Rendering Appearance") says that there should be a Preferences screen General > Editors > Text Editor > WikiText > Appearance that allows one to set this CSS. However, no such screen shows up in my installation.
The only method I was able to find for fixing this was to use an application (such as Engrampa) which is able to edit the contents of .jar files, and in my eclipse installation directory, use it on plugins/org.eclipse.mylyn.wikitext.ui_3.0.[SPECIFIC_VERSION_HERE].jar to edit the internal component org/eclipse/mylyn/internal/wikitext/ui/viewer/default.css -- I could change any css there, and upon restarting Eclipse, the changes would take effect.
However, clearly any changes I make this way will be blown away upon the next update of Eclipse or of Mylyn Wikitext. Does anyone know of a better way to set the size of the preview text? Was that Appearance pane mentioned in the docs removed? If so, what replaced it? If not, any ideas why I might not be seeing it?
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
So I was using Aptana Studio before, and now I switched to Atom.
And I got used to Aptana's errors and warnings highlighting.
For example if I forgot ; after declaration of a varible, or wrong brackets and etc...
In Atom I don't see any errors/warnings highlighting at all. Is it even possible to enable it in stock Atom, or should I download any additional packages?
P.S. I'm working with JS/JQuery/Node/PHP/HTML
Ok, looks like Linter does the job: https://atom.io/packages/linter
Im using aptana to code with meteor on windows (it has nice ota SSH/FTP editing which is why I use it). But the <template> tags are a meteor feature so it spits out warnings when using them.
Is there a nicer editor for windows to handle my files with SSH/FTP? Or even better a way to to add <template> to aptana?
The warning is specifically:
Because templates encapsulate all the html, everything gets underlined!
If you go to Window > Preferences > Aptana Studio > Validation you can go through the various validators (HTML Syntax Validator and HTML Tidy Validator are probably the relevant ones for you).
Under HTML Tidy, you can clickdown 'Elements' and change 'Unrecognized elements' from 'Warning' to 'Info' or 'Ignore'.
In the HTML Syntax Validator you can add regular expressions for errors to be ignored like in this question.
Sublime Text 2 is a nice editor for Javascript code.
Although it doesn't come with FTP support by default, but you can configure it using instructions given here.
Hope it helps.
Css code folding doesn't seem to be there any more Aptana Studio 3, build: 3.0.2.201106082310.
I have checked the preferences under 'Aptana', 'Editors', 'CSS' and 'Enable Folding' has a tick in it.
Folding works fine for JS but seems to have dissappeared under CSS, intellisense still works fine.
I used to get a little '-' or a '+' symbol in the left column alongside the line number.
Anybody else found this problem, its a great tool and would like to be able to use it again.
It's definitely still available, as I can see it in 3.0.2 or 3.0.3.
It might be that your code has a parse error or some similar problem that's causing the ticks not to show, though that would be odd if it happens to all files.
If it is a single file, I would file a bug here. Otherwise, you might check Help > Studio > View Log File to see if there are any error messages, or try updating to the latest beta version, 3.0.3 (docs on the wiki)