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.
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
Can anyone recommend a module or other Drupal add-on that can be used to format code nicely like I see on a lot of blogs and websites? Ideally something that would integrate with CKeditor, but that's not critical, I can make do with HTML tags if need be. Thanks.
The two most popular Drupal modules seem to be Code Filter and GeSHi Filter for syntax highlighting. For getting GeSHi to work with CKeditor, check out the WYSIWYG - GeSHi bridge module.
Well, there's http://alexgorbatchev.com/SyntaxHighlighter/ which is javascript. It gets applied at view time.
To see your code highlighted in the actual editor, you're probably going to have to work a bit harder. If it were me, I'd start with http://ace.ajax.org/ , which is an editor that grew out of Mozilla's constantly-renamed in-browser IDE project.
Maybe it's to much but check this
http://drupal.org/project/grammar_parser_ui
Quick follow up: as per this post, the WYSIWYG-GeSHi bridge development has been put on hold because of some problems integrating GeSHi buttons into CKeditor's toolbar (they make all the other buttons disappear). I can confirm that this is the case.
However, if I use GeSHi tags in HTML source, they do format things correctly. The really key thing left out of the GeSHi module documentation is that you need to enable it as an input format in Drupal.
Next I'm going to try this method for integrating GeSHi formatting directly into CKeditor without using the WISYWIG module or any bridges. Thanks again for everyone's help.
There's the Prettify module that implements Google Code Prettify as JS library. It works out of the box but it appears to duplicate the pre tags, that is, one pre tag appears as container for the other one:
<pre class="prettyprint prettyprinted">
<pre class="prettyprint">
<code>
.myClass {
<br>
float: left;
<br>
}
</code>
</pre>
</pre>
That's only annoying because you can't really style the pre tag if there's two of them because all your styles are duplicated leading to double margins, padding, borders. etc.
Still, it works out of the box if you can deal with using the default styles provided with the module, and there are a number of them, i.e. Google Code, Stackoverflow etc.enter link description here
Do you know of any text editor that can be used with a spell checker which is smart enough to ignore XHML/CSS and javascript tags?
The requirements would be:
It must run in Linux;
It must be free and open source;
It doesn't need to have WYSIWYG capabilities, but they would be welcome.
It must have built in "tag skipping" capabilities or be configurable to skip (X)HTML tags, CSS and embedded Javascript;
It doesn't need to have a HTML validator, but if it does it will be a plus;
I've tried to use spell checker plugins for Kate, HTML validators for Firefox, Eclipse's HTML editor, but I couldn't find a solution that have a speel checker that ignores hml tags.
Thanks for any help,
Luís
Emacs + flyspell-prog-mode + nxhtml-mode
Vim. For example, I use the following settings:
set spell
set spelllang=en_gb
Although other people have cited other good text-based editors, some people might find a GUI application easier to learn.
There is the BlueFish editor. It supports HTML, CSS, Javascript and other languages. I've just experimented a little more and its spell checker does ignore all HTML tags.
Edit: the spell checker doesn't ignore javascript, though. Other than that, it works.
A typical CSS property that I use often is overflow-x or overflow-y. Sometimes I use CSS 2.1 or later properties or selectors. These (correctly) raise a validation error:
Validation (CSS 2.0): 'overflow-y' is not a known CSS property name.
For years I ignored this, but it kinda feels wrong. It's possible to switch off warnings in C# and other languages for a particular line, block, file or project. Is something similar possible for CSS (or HTML) errors or warnings? Instead of switching it all off, I prefer a more granular solution.
If you're willing to muck around a bit you can get exactly what you want.
Go to Visual Studio folder \Common7\Packages\1033\schemas\CSS
Copy css21.xml to css21mod.xml
Find the section:
<cssmd:property-def _locID="overflow" ...
After that section, insert:
<cssmd:property-def
_locID="overflow-x" _locAttrData="description,syntax"
type="enum"
description="Visibility of content extending beyond element's dimensions in x"
syntax="One of the overflow values | inherit"
enum="inherit auto hidden scroll visible"/>
<cssmd:property-def
_locID="overflow-y" _locAttrData="description,syntax" type="enum"
description="Visibility of content extending beyond element's dimensions in y"
syntax="One of the overflow values | inherit"
enum="inherit auto hidden scroll visible"/>
Open regedit, go to HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\9.0\Packages\{A764E895-518D-11d2-9A89-00C04F79EFC3}\Schemas
If on 64-bit, you will have to go to SOFTWARE\Wow6432Node\Microsoft etc
Create a new key called Schema 5, and fill in the "File" and "Friendly Name" string values with css21mod.xml and CSS 2.1 (mod)
Should be all set!
Hi I just discovered this. In Visual Studio 2010 SP1 there is support for HTML5 validation.
Tools -> Options -> Text Editor -> HTML -> Validation
Now personally because I hate VS telling me I have duplicate ID's(Which is fine for non server controls) I turn off all warnings and set my validation to XHTML5 (Which is an option).
You can however tweak the settings till your hearts content. Sadly this is not project specific and other team members will need to do the same.
How to make Visual Studio stop "compiling" .js and .css files
Similarly as Jeremy Child suggested, but specific for Visual studio 2008 (as specified in the opriginal question):
Tools -> Options -> Text Editor -> CSS -> CSS Specific : uncheck
"Detect unknown properties"
This removes all CSS validation. This is a good solution if you need the problem to disappear fast (I have no time/bit lazy to manually add each property in an xml file and check the windows registry...) and if you are good in CSS (validation not really needed when you use built-in intellisense or styles that you are sure work -e.g. taken from previous websites you did-).
Get support for CSS 3.0 in order to suppress some of the warnings:
how to make visualstudio 2008 support css v3 & html v5
CSS 3 Intellisense Schema
So this is what happened to me. I had a successfully working project. I made a copy and started working on some label changes. And I started getting
"Validation (CSS 2.0): 'overflow-y' is not a known CSS property name."
The above error kept appearing even after reopening the projects.
So I went back to my original project, opened, started debugging to see if I get that error in that project also. The project successfully. Stopped there. Came to my new error throwing project, and now the error is no longer there.
Something to think about what caused it go away. Something in a memory. May be