Keys inside javascript objects are hard to read when they have an string as a value

[dortamiguel]

Can I change the color of the object key color? When the value is an string is very hard to read.

[Thom1729]

Try JS Custom. Out of the box, it's a drop-in replacement for Babel, but it's customizable — you can turn nonstandard features like JSX and Flow on and off, or even have several versions for different projects. The setting you want is string_object_keys: set it to true for Babel-like highlighting or false for highlighting like the built-in JavaScript syntax.

[borela]

@ellipticaldoor If you are still using https://github.com/borela/naomi, add the rule .meta.object-literal.key string.unquoted with the color you want to the color scheme and you should be good to go.

[dortamiguel]

@Thom1729 but I don't want to turn it off, just want to change it to other color

[dortamiguel]

@borela but where I do make that change?

[borela]

@ellipticaldoor Which color scheme are you using?

[dortamiguel]

Im using Mariana, the one that comes with sublime

[Thom1729]

@ellipticaldoor If you turn off string_object_keys, that will change the color of unquoted object keys (to match the core JavaScript syntax).

Try this modified color scheme. I've taken Mariana and added highlighting for JavaScript unquoted object keys. You can customize the color if you like (the new rule is at the bottom). To use this color scheme, save it to your User package directory.

This color scheme should work with either the core JavaScript syntax or with JS Custom (with string_object_keys: false).

[borela]

@ellipticaldoor Thom's gist will not work in this case as the key will continue to be highlighted as a string, you need two rules for it to work on any syntax so I modified his gist to fix it.

1. Create a file named Mariana (Modified object literal key).sublime-color-scheme in:
   • OS X: ~/Library/Application Support/Sublime Text 3/Packages/User
   • Linux: ~/.config/sublime-text-3/Packages/User
   • Windows: %APPDATA%\Sublime Text 3\Packages/User
2. Put the contents of this gist https://gist.github.com/borela/512ecb9215e46953f53599023fae332a into the file;
3. Try to select the new color scheme in Sublime; Restart Sublime if it does not appear in the list.;

The line https://gist.github.com/borela/512ecb9215e46953f53599023fae332a#file-mariana-modified-object-literal-key-sublime-color-scheme-L53 contains the rules I was talking about, you can change the color there.

[dortamiguel]

wow, thanks @borela I will try it on the weekend

[Thom1729]

@ellipticaldoor I have just learned that the new sublime-color-scheme format automatically supports extensions. (The documentation hasn't been written yet, so that feature's a bit obscure.) As a result, you don't need a complete copy of the original; you can apply only the desired changes.

Save the following at Packages/User/Mariana.sublime-color-scheme:

{
    "rules":  [
        {
            "name": "JavaScript unquoted object literal key",
            "scope": "meta.object-literal.key, meta.object-literal.key string.unquoted",
            "foreground": "var(white2)"
        }
    ]
}

This incorporates @borela's change, which applies this rule in JS Custom when string_object_keys is on. (When string_object_keys is off, it doesn't make a difference.)

[borela]

@Thom1729 Nice to know sublime supports extending color schemes, is there any documentation on the subject? As of now I am only discovering some amazing features sublime has through forum posts :/

[Thom1729]

Unfortunately, there is no documentation yet for the sublime-color-scheme format. Presumably it will be written before the feature is included in a stable build.

[dortamiguel]

@borela it works with naomi and JSCustom but not with babel-sublime, how I can make it work with babel-sublime?

[Thom1729]

@ellipticaldoor JS Custom is intended to be a drop-in replacement for babel-sublime. babel-sublime is abandoned; it suffers from numerous unfixed bugs and from incompatibility with tools designed for the core JavaScript syntax. At the moment, my top priority with JS Custom is ensuring that it can totally replace babel-sublime. If you find that for any reason JS Custom doesn't do that for you, then please let me know and I will fix it immediately (tonight or tomorrow).

[borela]

@ellipticaldoor Then maybe it's a bug in the syntax itself Babel sublime has many issues specially with the newer JS features.

I would say to create an issue with the sample that reproduces the bug but babel sublime is not being maintained anymore which is why I created Naomi, the biggest issue with my package is that It can't be used with other editors(VSCode, Atom...) like babel sublime and I don't plan to support them due to limitations in the tmLanguage borela/naomi#21.

[dortamiguel]

@Thom1729

Okay! I found some bugs on CustomJS and also babel-sublime looks better for my taste.

Im going to leave here some feedback https://github.com/Thom1729/Sublime-JS-Custom/issues

Also babel-sublime is the only package that doesn't break vue components.

[freedomlang]

@ellipticaldoor

• install ColorSchemeEditor
• install PackageResourceViewer
• use PackageResourceViewer to make ColorSchemeEditor log into console
• open console, use ColorSchemeEditor to edit current scheme; check the match scope for the current cursor(to me: matches 3: source.js > meta.group.braces.round.js > meta.group.braces.curly.js > meta.group.braces.round.js > meta.group.braces.square.js > meta.group.braces.curly.js > meta.group.braces.curly.js > meta.group.braces.round.js > meta.group.braces.curly.js > constant.other.object.key.js > string.unquoted.label.js)
• add the code below to current color scheme

<dict>
	<key>name</key>
	<string>Object keys</string>
	<key>scope</key>
	<string>constant.other.object.key string.unquoted.label</string>
	<key>settings</key>
	<dict>
		<key>foreground</key>
		<string>#61676C</string>
	</dict>
</dict>