Improving Zen Coding to integrate with JavaScript files on Sublime Text2

Sublime Text2 is hands down my go-to editor, except for one minor hiccup - the Zen Coding plugin only works with CSS and HTML files. There are plenty of times where I'd love to use Zen Coding with JavaScript or other file types, like incorporating HTML templates into JS or string concatenation.

I've tried digging into the package file located in ~/.config/sublime-text-2/Packages/ZenCoding, but I'm at a loss on how to configure it to support additional file types.

Answer №1

To access the ZenCoding plugin file, go to Packages/ZenCoding/sublimezenplugin.py Immediately after the section labeled `#########CONSTANTS#########, add the following code:

HTML                      = 'text.html - source'
XML                       = 'text.xml'

Include the following code as well:

JS                        = 'source.js'

Next, locate the part of the file that reads:

ZEN_SCOPE = ', '.join([HTML, XML, CSS])

Change the code to:

ZEN_SCOPE = ', '.join([HTML, XML, CSS, JS])

With this change, Zencoding will be activated in JS files. Do keep in mind that Zencoding will always be active in JavaScript files. If you wish to limit the scope to specific areas, such as strings in JS, you can adjust the scope. The scope for JS strings includes string.quoted.double.js for double quotes and string.quoted.single.js for single quotes. These can be added to the JS = ... line. Feel free to experiment with the scope settings to suit your preferences. For more information on scopes, refer to the documentation available here:

Additionally, to view the current scope directly under the cursor, press ctrl+alt+shift+p on Windows/Linux or alt+command+p on OSX.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the transformation of asynchronous callbacks to promises in Node.js

As a novice, I am currently in the process of developing a User Management system using NodeJS. Previously, I had implemented it with MongoDB and Express, but now I am rebuilding it with Express, Sequelize, and Postgresql to enhance my understanding of cer ...

Step-by-step guide for dynamically including dropdown options

Is there a way to dynamically add a dropdown using JavaScript? I currently have a dropdown with numbers that creates another dropdown when selected. However, I want to add the dynamic dropdown through JavaScript. How can I achieve this? Below is the PHP ...

The hyperlink in the HTML code is malfunctioning

While working on a Wix website, I encountered an issue with the code snippet below: // JavaScript var countries = [ { name: 'Thailand', link: 'www.google.com' }, { name: 'Tanzania', link: '' }, { name: &ap ...

Retrieving an Enum member based on its value in TypeScript

I am working with an enum called ABC: enum ABC { A = 'a', B = 'b', C = 'c', } In addition, I have a method named doSomething: doSomething(enum: ABC) { switch(enum) { case A : console.log(A); break; case ...

What is the best way to use an object as a key to filter an array of objects in JavaScript?

My data consists of an array of objects: let allData = [ {title:"Adams",age:24,gender:"male"}, {title:"Baker",age:24,gender:"female"}, {title:"Clark",age:23,gender:"male"}, {title:"Da ...

Issue encountered while executing tasks in the Gruntfile.js file

Having trouble with Grunt concatenating my CSS files into one named production.css Below is the output I received from the command prompt: C:\Users\josha\Desktop\Repos\AJAX Project - Grunt Test>grunt C:\Users\josha& ...

Move files into the designated folder and bundle them together before publishing

Is there a way to transfer the files listed in package.json (under the File field) to a specific folder in order to bundle them together with npm publish? Here is the structure of my repository: . ├── package.json └── folder0 ├── fil ...

Issues with Twitter-Bootstrap Modal Functionality

After creating a modal dialogue: <a href="#myModal" role="button" class="btn" data-toggle="modal" id="LaunchDemo">Click here to launch the demo modal</a> <!-- Modal --> <div id="myModal" class="modal hide fade" tabindex="-1" role="di ...

A lesson is what I'm seeking, as I face an Uncaught TypeError: Unable to locate the property 'split' of an undefined value

Although this question has been asked multiple times before, I am a beginner and eager to learn. I would greatly appreciate it if someone could take the time to explain this to me. I have tried to find a solution to this error using the existing answers, b ...

Building a query in Javascript by utilizing object keys and values: a step-by-step guide

I am looking to transform an object with various keys and values into a query string format, for example: obj1: { abc: "Abc", id: 1, address: "something" }. The challenge is that this object is generated dynamically, so the numbe ...

Using ReactJS and Ruby on Rails to implement an AJAX delete request

There is a component named Items residing inside a parent component called ItemsContainer. A click on a button within the Items component triggers an Ajax function to delete that specific Item. However, I am encountering a 500 error message at the moment ...

What is the best way to transform a Map<string, boolean> into an array of objects with key-value pairs {key: string, value: boolean

I'm currently working on a React project that incorporates TypeScript, and I've successfully implemented dynamic permission creation on the user creation page by utilizing this particular code snippet. The permissions being used on the page are m ...

Unable to retrieve value 'includes' from null object

Currently, I am utilizing Vue.js along with JavaScript. In my code, there is an array of objects named products, each containing a special property called smallest_unit_barcode. My goal is to filter out only those products that have a barcode similar to a ...

Building upon the preceding inquiry, a ReferenceError has occurred due to the object being undefined

After researching online, I came across a similar question marked as a duplicate that brought me to this link: How do I return the response from an asynchronous call?. Even though I couldn't find a solution in that thread, it seems like I may need to ...

React Navigation Error: navigateTo must be used within a valid router configuration

When attempting to utilize useNavigation() from react-router-dom, I encounter the following error: Error: useNavigation must be used within a data router. See https://reactrouter.com/en/main/routers/picking-a-router. NavBar src/components/NavBar.js:6 3 ...

A guide on breaking down a URL string containing parameters into an array with the help of JavaScript

I need help splitting a long string into an array with specific index structure like this: fname=bill&mname=&lname=jones&addr1=This%20House&... I am looking to have the array set up as shown below: myarray[0][0] = fname myarray[0][1] = b ...

When the second history.push is triggered in react-router-dom, it may result in returning an

Hello, I am working with an Antd modal that contains a form. The code snippet for the modal is as follows: <Modal visible={visible} onOk={handleOk} onCancel={handleCancel}> <MyForm onSubmit={handleOpenUrl}> <CustomInput name= ...

The request body parser for the express POST method appears to be devoid of

After encountering similar issues on Stack Overflow, I discovered a solution involving the use of: app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); However, despite implementing this solution, the log for req.body is still ...

Please do not exceed two words in the input field

I need to restrict the input field to only allow up to two words to be entered. It's not about the number of characters, but rather the number of words. Can this restriction be achieved using jQuery Validation? If not, is there a way to implement it u ...

Utilizing Angular JS to parse JSON data and showcase it in various tables

Just diving into Angular JS and looking for some guidance. Can someone show me how to parse and showcase JSON Data in separate tables using Angular JS? [ { "id": 0, "isActive": false, "balance": 1025.00, "picture": "htt ...