Is there a way to configure Sublime Text 2 where inputting a . (dot) automatically generates class=" " and adding a # (hash) creates id=" " while typing an HTML opening tag?
Is there a way to configure Sublime Text 2 where inputting a . (dot) automatically generates class=" " and adding a # (hash) creates id=" " while typing an HTML opening tag?
Enter foo.bar, then hit Tab and see the magic happen:
<foo class="bar"></foo>
Don't forget about foo#bar (for id instead of class). These features can be found in Packages/HTML/html_completions.py
Looking for the solution? Navigate to: Preferences -> Configuration -> User.
Insert the following code snippet inside the braces, then remember to save the document:
"auto_id_class": true,
This function enables you to swiftly include id=" " and class=" " attributes in HTML elements by simply typing a # or .
If you are using sublime text, this feature can be quite handy.
Take a look at , a useful plugin for Sublime Text that can assist with writing HTML and CSS more efficiently.
Here's an example:
.class
will automatically be expanded to
<div class="class"></div>
You can find more helpful examples on the official Emmet cheat sheet.
My experience with ST3 was not successful when trying "auto_id_class": true, as suggested by @Paul_S. Instead, I quickly created a custom snippet that worked for me. You can find the snippet below. Please note that while the scope
<scope>meta.tag.other.html, meta.tag.block.any.html, meta.tag.inline.any.html</scope>ID
<snippet>
<content><![CDATA[
id="${1}"
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>#</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>meta.tag.other.html, meta.tag.block.any.html, meta.tag.inline.any.html</scope>
</snippet>
Class
<snippet>
<content><![CDATA[
class="${1}"
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>.</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>meta.tag.other.html, meta.tag.block.any.html, meta.tag.inline.any.html</scope>
</snippet>
Appreciate your time.
If you're working in ST3, try utilizing the following shortcuts:
bar.class[tab]
bar#id[tab]
Illustration:
section.column[tab]
Outcome:
<section class="column">|</section>
I need to create a website that is optimized for mobile devices like Android, iPhone, and Blackberry, as well as desktop and tablet. The screen resolutions of these devices can vary greatly. My supervisor has suggested developing one site that can adjust ...
Having encountered another issue, I've been attempting to make an AJAX script function properly, but whenever I click on it, the page reloads without updating the database field. The code I'm using has successfully worked for similar scripts on ...
Why does the highlight focus on "ort" instead of "fort"? It appears this occurs when there are two f's. When I substitute f with other letters, like d, it shows correctly. Could this be a bug in Chrome? Chrome version is chrome83. add: It seems to be ...
I have a vision for a website that will simulate being in a room, where users can explore the space with limited panoramic views - allowing them to look up/down 30 degrees and left/right 45 degrees. In addition, I would like to integrate interactive object ...
Similar Question: How to hide the scrollbar while still allowing scrolling with mouse and keyboard I have created a sidebar for a web application that needs to enable users to scroll through it without displaying a scrollbar. The content is 500px high ...
As a beginner in CSS, I am facing challenges in creating a responsive layout that adjusts based on the screen it is viewed on and achieving equal heights in columns. While I have been able to address these issues individually, combining them has proven to ...
I am facing an issue with my layout setup in different browsers. When I have a list of divs inside a flex div, it displays correctly in Chrome: However, in Firefox, it only shows a horizontal scroll with one line. Is there a way to prevent the forced hor ...
I am interested in creating a SIGN IN button using ajax. Specifically, I want it to display something (such as welcome) on the same page without refreshing it. This is the progress I have made so far: update2: <form id="myForm" onsubmit="return signi ...
Extracting desired data from the following HTML snippet: <div class='col5'> <strong><a href="/stellenangebote/107278-supporter-sap-crm?page=1&query%5Bcity%5D=&query%5Bradius%5D=100&query%5Btext%5D=SOA+SAP" ...
Whenever the checkbox is checked, it should add a class to the main div. Additionally, if I try to check another checkbox, the previously checked one should have its class removed and the new one should have the class added. Here is the code snippet for r ...
Currently, there is an image that is centered on the screen using flexbox: .center-flex { display: flex; justify-content: center; } <div class="center-flex"> <img id="revealImage"> </div> An attempt is be ...
I have a font stored locally in resources/fonts/ and I'm correctly linking to it, but for some reason, it's not loading. Here is the <style> section in my html: <style> @font-face{ font-family:"franklin_gothic_condensed"; ...
I am currently integrating MapBox.js into a Bootstrap 3 website. The main concept is to utilize a map as the background for a row that occupies the full width of the site, with html-content displayed on top. To ensure MapBox.js remains in the background, I ...
We are in the process of developing a unique Angular application and have integrated the share-buttons component for users to easily share their referral codes. However, we have encountered an issue with the email button not being able to send HTML content ...
Here is the structure of my project: node_modules server.js public: glsl: fragment.glsl vertex.glsl index.html main.js img.jpg style.css I have set up a simple server to serve a three.js animation in server.js const express = require('expre ...
I'm currently learning backbone.js and I can't seem to figure out why my view is showing up as undefined on line 67 of coupons.js. I've included a gist since the files are quite lengthy. Another issue I'm facing is that if I refresh th ...
Every description field should have its own character counter, with different SpanIDs displayed in respective SpanIds for each new row. How can this be achieved? <div class="row"> <div class="col-s ...
When processing something and using overlays for loading, everything works fine until I use it for a modal. The issue arises when the overlays appear behind the modal instead of in front. Is there a way to bring the overlays to the front of the modal? Bel ...
Having an issue with Webpack where it's generating duplicate images, one of which is broken. I have an original image image, and after running Webpack, two duplicates are created. One works fine: image, but the other one is broken: image. I'm us ...
Can someone assist me in transforming my sidebar buttons into dropdowns when viewed on a responsive layout? I'm looking for something similar to the sidebar (on the left) featured on this website: If possible, I would like the dropdown to only displa ...