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.
Related
I am working on something that totally baffles me. In my ASP.net project, I have this file:
It goes by the name of base.js and is a mere 4214 lines long.
If I hit debug in my app, then suddenly, a new folder appears in within my solution that goes by the name of "script documents", and looks like this:
At the very bottom , you see a little file called: base.js.
This file is an exact copy of my base.js from "earlier".
Now, I can even make stop points inside this automatically generated file and they work!
But if I now were to make changes to the base.js file (the OG one), none of the changes are transmitted to the auto generated file.
I guess this has something to do with the version code, but I couldnt really figure out how that works.
How can I alter these auto generated script files?
Thank you!
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
Im using atom.io for some time now and really like it. there is just one thing im missing. I used to use brackets and sublime before and they both had a feature where you could create the basic structure of a html documents by just typing html.
this would just set the html, head and body tag. created the charset meta, title and link to css file.
I create a lot of html files a day so it would be really helpfull if I know the shortcode or the package which supports this!
You're looking for autocomplete-snippets.
Simply type html and press Enter
Here's a terrible GIF to prove it:
There is a nice Plugin, called emmet: https://atom.io/packages/emmet
When you got that, you just have to type ! -> tab in an empty document. You get pretty much the same result as #hatchet GIF.
If you have disabled the autocomplete functionality mentioned in the currently accepted answer, or want more flexibility than that allows, there is a file-templates package:
https://atom.io/packages/file-templates
Here are some basic instructions.
To install the package: edit->preferences->install->file-templates.
To save the template: packages->new template from this file.
To open a new file with that template, just hit ctrl-alt-n and
select it.
Make sure your file has .html added on the end of its name.
Then go back into Atom, type HTML, and press enter. Your boilerplate should appear. Solved my problem instantly!
If we install Emmet package we are not getting the boiler plate code. So I disabled emmet and it is working fine for me.
!tab is the command u seek. But it won't work unless you create a file and save it with the html extension...
So go create a new file in the directory u want, call it index.html and now go type !tab
It should work 100%, if not be sure u have emmet installed.
I have installed Brackets with Tern Intelligence.
Inside my file Main.js, I type the following thing
Math.
And press ctrl-enter. I imagine I should see pow,max,etc, show up. What am I missing?
Code hints should appear automatically - no need to press anything. (If you do want to trigger them manually though, it's Ctrl-Space, not Ctrl-Enter).
What's in the rest of your Main.js file? If you make a new, blank JS file does it work? When I type Math. in an empty .js file, I see a list of code hints both while I'm typing Math and the appropriate list of options after typing the .
Also, try using Debug > Reload Without Extensions to make sure you don't have an extension installed that could be causing a problem.
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!