I have been using VS Code for a while now and I am loving it. But
there is a small problem with code formatting. It does not work in handlebars (*.hbs) files. This option is simply unavailable while editing hbs file.
I have tried 'Beautify' extension, but it does not work properly for handlebars - it completely destroys the code.
Any help (or explanation of what am I doing wrong) on that topic would be much appreciated.
EDIT: Same issue applies to *.scss files. Can not format those either.
You can click in the bottom right corner on 'Handlebars' and change the language mode to HTML. Then the 'format code' option will be shown.
To manually format code:
Let's say the .hbs file we're working on is a .js file.
Click the file language option (right side down)
Change the file language to .js
Click anywhere in the file
Press Shift Alt F
To automatically format code on save:
Press Ctrl , to open user preferences
Enter the following code in the opened settings file
{
"editor.formatOnSave": true,
"html.format.enable": true,
"html.format.indentHandlebars": true,
"html.format.maxPreserveNewLines": 0
}
Save file
Source
Related
I'm new to web development and I'm just starting to learn CSS. I am having a problem where I can't get any of the styling to work. At first I thought I didn't link back to the style sheet correctly, but now I'm seeing that my css file isn't saving as .css. I keep going to save as, select .css and then I go back to look for it under that file type and it's not there. When I click on it to view the properties in the folder, for the type it just says "file". I've tried several times to save it again as .css and nothing. Does anyone know what could be going on here?
Edit: I tried to save it as HTML now and it wouldn't work either. Everything new I am saving is saving as a plain "file" now and I don't know why.
everytime you want to change the ending yourself, select "Save as", type the "file name + ending" and make sure always to check "Save as Type: All files".
You can also just type the "file name" and select the file type in "Save as Type: for example .css / .html"
Beginners' tip: If you are new to web development, I recommend the notepad. Every careless mistake that you notice here is golden for your future overall knowledge.
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 have no idea how to fix this.
VS keeps opening css file in some text editing mode, see the picture below.
I have already tried to set it manually to open using css editor, right-click on css file and select "Open with..."
When I click OK here, it opens my css file in CSS source editor fine,
but every next time it opens again in that text mode, like it completely ignores that it has to open it using css editor :(
Of course I installed and reinstalled Web Standards Update a thousand times.
Nothing helps.
The damn thing keeps opening them in that ugly text mode :(
Hmmm. Have you tried looking under the view menu? It's been a while since I've used it, but I remember different views being under the view menu bar.
If that doesn't work then I'd always try creating a new .css file and copy and pasting all the information; after you copy and paste, overwrite the pre-existing corrupt file.
As the title, i can't find the way to make alignment plugin available with .less file. It's just work on CSS File
I haven't tested this yet, but I have a pretty strong hunch that it might help your case.
Open sublime text, and go to Preferences>Browse Packages
Look for the Alignment plugin folder and enter in it.
Look at the files in there, you will see:
Base File.sublime-settings
CSS.sublime-settings
Javascript.sublime-settings
JSON.sublime-settings
Try your hand at creating a LESS.sublime-settings file in there, copying the contents of another of the settings files, for example, the JSON.sublime-settings contains this:
{ "alignment_chars": ["=", ":"] }
It seems to me, that to enable alignment to work as expected with other filetypes not designed as default with the plugin, one would have to add this settings file to the plugin in order for it to work out.
I am not sure if the file name has to be case sensitive towards the syntax you want align to work with. If you installed the less package, you should see "LESS" shows up in the list as all caps, this is why my guess is to name the file LESS.sublime-settings. You can try different naming if it doesn't go at first...
Open any LESS file in Sublime Text.
Navigate to:
- Preferences
-- Package Settings
--- Alignment
---- Settings-Syntax Specific-User
Alternatively, if you're on a Mac hit Command+Shift+P and start typing 'Alignment' and the option will appear. Once clicked, an empty JSON file will be generated for you: LESS.sublime-settings
As EffectiX mentioned, just type in { "alignment_chars": [":"] } or whatever you want to align on. Save the file. This will work with pretty much any file format if configured correctly.
A simple usability question. So I got a Dreamweaver 8 (I'm kinda used to it by now) and I've just downloaded Notepad++. (Before that I used simple Notepad) What I like about these editors is that the PHP code appears in different colors. So if the colors are not right then you immediately know that you're doing something wrong.
But this works for only the files that end with .php
But Drupal's files end with .module and .inc etc... and it's often a nightmare to look for some comma or a single-quote that's messing up your code. So how can I make Dreamweaver or Notepad++ to show me the code in .module and .inc files in colors?
in notepad++:
Settings > Style Configurator...
Find PHP in the Language listing select it then add your desired extensions in the "User Ext :" field
leave the dot off and separate them with a space. you'll need to reopen the document after you save the change.
I created a Drupal 'user language' for Notepad++ so you can get autocomplete and sytax highlighting:
Here is how to install in the last post here:
https://drupal.org/node/326803
Enable clickable links : Settings**->Preferences->Misc->**Enable clickable link
Enable PHP Syntax Highlighting for .module files, .inc files and .install files by clicking Settings**->Style Configurator-> Click on the php extension in the left sidebar and copy and paste "module inc install" into the user ext box without the quotes of course and Save and close. Voila!