SublimeText2 Custom Scope - sublimetext2

Question

I have a number of different types of projects that use similar code, and my goal is to make snippets and key bindings in SublimeText2 that only activate on a given project.
So, for instance, I have jsg1.html through jsg40.html, and I also have kwa1.html through kwa40.html. Each of these two groups has code unique to them, and I want to create different snippets and key bindings for each.
This has led me to want to create custom file-types, like .kwa and .jsg, so that I can create the snippets/key-bindings with a scope set to be those file types.
However, I can't make it work. This is what I've tried:
a.sublime-snippet
<snippet>
<content><![CDATA[
$2
]]></content>
<tabTrigger>aj</tabTrigger>
<scope>source.jsg</scope>
</snippet>
jsg.tmLanguage
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>fileTypes</key>
<array>
<string>jsg</string>
</array>
<key>name</key>
<string>jsg</string>
<key>scopeName</key>
<string>source.jsg</string>
</dict>
</plist>
Both of these files are in my Packages/User folder. However, I have a file, test.jsg, and the snippet won't activate in it.
So the questions are:
What's the best way to create custom scopes for groups of HTML files which will use the same key bindings and snippets? Is it creating a custom scope by creating a custom syntax for a new filetype? Or is there a better way? If this is the best way, why doesn't my snippet work in my .jsg files?

Answer 1

So I figured this out. To generate your own key-bindings and snippets, you'll need to create a custom scope. To display the current scope of your document, you can use the hotkey:
Ctrl + ⇧ + Alt + P
If you open an html file and run this command, you should see that it displays text.html. The goal is to make a filetype that highlights like html syntax, yet displays the scope of text.we where .we is our custom filetype (which is to say, it can be anything we want). We can then use that scope in our key-bindings and snippets files.
First things first: we need to make sure our custom filetype isn't already associated with html. This happens if you set the setting under View - Syntax - Open all with current extension as..., which you might initially do in an effort to make your filetype have the same highlighting as html. Don't worry, we'll still do that, but we have to go about it another way.
If you've already done it, locate the JSON file ../Path/to/Sublime Text 2/Packages/Users/HTML.sublime-settings and delete the extension you associated from the attribute extensions. If you're having trouble finding the Packages folder on Windows, it's typically hidden away in User/AppData/Roaming.
So now that we've disassociated our files, we must first find the settings file of the language that uses the highlighting we want. In my case, it was html, so I went to ../Path/to/Sublime Text 2/Packages/HTML. Copy the files html.tmLanguage and Comments.tmPreferences and put them anywhere in Packages. For organization, I put them in Packages/Users/xxx where xxx is my custom filetype. When we make snippets later, I'll also suggest you keep them there so that everything related to your filetype is in one place.
Anyway, rename the files accordingly, based on your filetype. Within the file, you'll need to change three attributes: fileTypes (it's at the beginning), name, and scope (those last two are at the very end). Replace the content of those accordingly. Be sure the scopeName takes the form text.___.
Change up the scope of the Comments.tmPreferences file and you'll be good to go with your custom filetype. It'll now display the highlighting of html files and allow you to use it as a scope in snippets and key-bindings.
Also, if your custom files are HTML files, browsers won't have any problem displaying them when you open them up.
Mission accomplished!