Format the comments


#1

Greetings:

I have Sublime Text 3 set up to auto add ending HTML comments, EG

I use this script in Preferences/ Package Settings/ Emmet /Settings User:

// Emmet preferences
// List of all available preferences:
// http://docs.emmet.io/customization/preferences/
{
// Emmet preferences
// List of all available preferences:
// http://docs.emmet.io/customization/preferences/
“preferences”: {

	// Format the comments after things the way I like - GRB
	"filter.commentAfter": "<!-- <%= attr(\"id\", \"#\") %> <%= attr(\"class\", \".\") %> //-->"
},

"syntaxProfiles": {
	// Enable XHTML dialect for HTML syntax
	// “html”: “xhtml”
	"html" : {

		// force comments to always appear
		"filters" : "html, c"
	}
}

}

I’d like to know HOW to add this feature to the Atom editor. I find it very convenient when needed.

For that matter, I’d like to know how to it to Brackets as well, but that’s another forum.

TIA,

Dave


#2

I expect that you would just use the emmet package for Atom. I have it installed but I don’t use it regularly, so my knowledge of how customizable it is is all second-hand, but my understanding is that the behavior is pretty much the same across different text editors.


#3

I have been looking for a similar feature in Atom to add the code, but can’t find where to add it. Are you saying you have the same commenting capability or are you talking about Emmet?


#4

Atom doesn’t have any such feature. The emmet package probably does.


#5

For that matter, it appears Emmet in Atom doesn’t either.

I just finished going through the files and see no place to put my script.

Anyone else?


#6

Look at the bottom of the emmet documentation. It says that in the package settings, you can set the path to your extensions folder, where you put custom extensions like the preferences.json file you shared above.

That seems like the thing, doesn’t it?


#7

DS,

I just found a post at Atom.io that spells out that Atom’s editor/author did not include a ‘preferences.json’ file in his editor.

The reason I can’t find is that it doesn’t exist.

So, I left a request that he do so.

JSYK,
Dave


#8

Link, please?


#9

It got lost in the flurry of pages I had open and I can’t find it just now. But I did see it.

I discovered also that the script of that feature is underscore js and it will not go in a json file. No way. I tried it in a Brackets preferences.json file and it protested, so I removed it.

I’ve got another inquiry out to a guy who seems to be a “jock” with the Atom editor and will post back when I hear from him.

And thanks for your continuing interest …


#10

This doesn’t make any sense. The comments in the code block you posted, they link directly to the preferences.json documentation. What was the protest?


#11

I can only answer your question with another question: "Can you mix JS and JSON on the same page? I think no.

The preferences reference may not be the rabbit trail I’m after. This is some learning experience.

But given my nature, I will wear this problem down.


#12

A JSON file is a normal JavaScript object in its own file. You ought to be able to include a function literal in a JSON file and when it gets require()ed by the script, it will be read in as if the whole object was in the script all along.

What prompted this question? I suspect that you’ve read something that I haven’t and I would like for you to share it with me.


#13

I tried last night to add my __js script to my Brackets editor on my other machine. I read somewhere to go to Debug to open Brackets’ preferences file. What I found was this: Debug and then two files side by side: defaultPreferences.json and brackets.json.

This looked very similar to the Settings-User file in Sublime, file type unknown, where I added my script to append to HTML.

Brackets protested saying something ‘errorish’ had occurred so I removed the script and all was well.

So, I concluded JSON and JS cannot be mixed. Elementary. Yes? I judge by your response the answer is no.

Your question prompted me to look at the files again and I see the defaultPreferences.json contains code similar to my script …

That’s why I said what I did. A simplistic observation by a newb. I believe though I’ve graduated from complete newb though.


#14

Atom does not have an editor/author. Atom is a community project with many contributors. (maybe you saw owner or contributor next to their name? There are many people with this label)

You need to create a folder yourself, where you intend to store all the setting/preference files for emmet. You then need to type the path of this folder into the settings page for emmet, assuming you are not using the default ~/emmet path (which you may need to create if you want to use it and it is not already there).

In this folder is where you put all the files emmet it looking for. I imagine you can have any combination of .js and .json files in this folder, but I don’t use emmet.

That doesn’t look like a script (which I would say is code that is executed to perform a task). Rather, that looks like a JSON object, which is supposed to be in it’s own file. Please edit your post to wrap the whole thing in ```, so others can see what you have verbatim (and not formatted as markup like it is now). E.g.,

```json

<paste it here>

```

I don’t follow here: the “script” you are talking about is the JSON you pasted at the start, isn’t it? Underscore.js is a nodejs module that provides a bunch of useful functions for JS developers. I don’t know why you are mentioning it here, in the discussion about emmet preferences.

Kind of; a JSON object is really just a bunch of keys and values that are all in a single .json file. It can be imported, as DamnedScholar said, by using require("<fileName>") in a .js file. When you do this, it is converted into a regular JS object (which is what the JSON standard was based on). The opposite is not true however: JSON files are static, and will not run any code by themselves. Their contents must be interpretted first by a JS script, and acted on as desired.


#15

It sounds like Brackets has a special scheme that doesn’t conform to what the Emmet documentation says. So why are you looking at Brackets for help in setting up emmet for Atom when the emmet package and the Emmet site both have thorough documentation?

I’ve also never used Brackets, so if you come on here talking about how Brackets does things, I can’t really help you. Fortunately, Emmet is not a Brackets thing and it has plenty of documentation.

Brackets protested saying something ‘errorish’ had occurred so I removed the script and all was well.

This is extremely vague. I don’t use Brackets, but I highly doubt that its messages include language like, “Something ‘errorish’ has occcurred.”

So, I concluded JSON and JS cannot be mixed.

Did you have someone familiar with JSON look at the file to make sure that it was valid before coming to this conclusion? What JS were you including in the JSON file? Your original post includes no script code at all, just strings.

If you are at a point in your education where you don’t understand the error messages that the editor is giving you about your configuration (if you understood it, you would not have paraphrased it as “something ‘errorish’”), you should be taking screenshots of the literal text of error messages and bringing those pictures to places like this where there are people who have worked with these formats more.


#17

We know it’s difficult when learning a new language. Unfortunately, we are not mind readers. We only know what you tell us. When asking for help with errors, we need to know what the error is. Without it, all we can do is speculate.

In this case, it would help a lot if you were to give the precise steps you followed to try and set up your emmet preferences. This means something like as follows:

  1. I installed the emmet package in Atom

  2. I made the directory ~/emmet (that is, a directory called emmet in the home directory)

  3. In this directory, I made a new file called preferences.json

  4. In this new file, I pasted the following:

// Emmet preferences
// List of all available preferences:
// http://docs.emmet.io/customization/preferences/1
{
  // Emmet preferences
  // List of all available preferences:
  // http://docs.emmet.io/customization/preferences/1
  “preferences”: {
  	// Format the comments after things the way I like - GRB
  	"filter.commentAfter": "<!-- <%= attr(\"id\", \"#\") %> <%= attr(\"class\", \".\") %> //-->"
  },
  "syntaxProfiles": {
  	// Enable XHTML dialect for HTML syntax
  	// “html”: “xhtml”
  	"html" : {
  		// force comments to always appear
  		"filters" : "html, c"
  	}
  }
}
  1. It didn’t work because [expected behaviour] did not happen when I did [steps to reproduce in a file].

Right now, I can say that the code you posted is neither valid JavaScript nor JSON. As JS, it does not do anything. As JSON, comments are not supported in the standard. They are a possible source of the error you were facing.

I do not know where you got it from or how you have been using it, but that would be important for us to know.

Additionally, I took a look at the emmet documentation for this type of thing, and it says to split the different parts (snippets, preferences, syntaxProfiles) into separate .json files.