Shopping Cart (0)

Editing Adobe ExtendScript JSX Files in TextWrangler and BBEdit

I wanted to pass along a tip that will help you edit an Adobe ExtendScript JSX file on your Mac. If  you are wondering what the heck an ExtendScript text file is, it is the default scripting language used to control and automate repetitive tasks in Adobe Photoshop, Adobe Illustrator, Adobe After Effects, Adobe Premiere, and most of the other Adobe graphic design tools.

Typically people end up editing an ExtendScript file using the Adobe “ExtendScript Toolkit” editor which is of marginal quality as far as a programmer’s text editor goes. Besides the numerous missing document editing features in the ExtendScript Toolkit there are some other dubious design decisions that come into play with the tool… I mean just to start with, Adobe’s ExtendScript Toolkit is a text editor that thinks it is a good idea to use the Comic Sans MS font by default for displaying quite a bit of the text in the editor window. 🙂

The Adobe ExtendScript Toolkit application is the default text editor for JSX scripts.

The Adobe ExtendScript Toolkit application is the default text editor for JSX scripts.

I noticed recently while I was creating new Adobe After Effects based automation .jsx scripts for my Domemaster Fusion Macros toolset that you can map the Adobe .jsx file extension in TextWrangler and BBEdit to be opened up using the existing JavaScript syntax highlighter module. Since ExtendScript is based upon the JavaScript language this works perfectly for our needs.

With the custom .jsx file extension mapping in place it gives you access to all of the powerful and intuitive editing features that you could need in TextWrangler or BBEdit with the ability to see what you are doing with a quick glance by having syntax highlighting enabled.

Setting up JSX Scripts in BBEdit

This is the BBEdit text editor with an ExtendScript file open, and no syntax highlighting enabled. The Charcoal color scheme is active which is why the background is dark in the document.

This is the BBEdit text editor with an ExtendScript file open, and no syntax highlighting enabled. The Charcoal color scheme is active which is why the background is dark in the document.

To enable Adobe ExtendScript JSX syntax highlighting in BBEdit we need to open the preferences. We can do that by selecting the BBEdit > Preferences menu item or we could use the hotkey  (Command key+Comma).

Open the BBEdit Preferences

Open the BBEdit Preferences

Next we need to click on the “Languages” section on the left side of the Preferences window. The Languages section allows us to define custom syntax highlighter mappings for file extensions.

Select the "Languages" section on the left side of the Preferences window.

Select the “Languages” section on the left side of the Preferences window.

To add a new “Custom Extension Mapping” we need to click the plus sign (+) button at the bottom of the Languages view. Then we need to set the Suffix to “.jsx” and pick the “JavaScript ” entry from the Languages menu item.

Pick the JavaScript language.

Pick the JavaScript language.

If the suffix and language settings are entered correctly the BBEdit language dialog will look like the following image:

To add ExtendScript support we need to enter the .jsx suffix, and select the JavaScript language.

To add ExtendScript support we need to enter the .jsx suffix, and select the JavaScript language.

We can now close the BBEdit preferences dialog and quit and restart the program to save our changes. The next time we open an Adobe ExtendScript .jsx document it will have full syntax highlighting that colorizes each of the elements in the jsx scripting language:

This is what BBEdit looks like with ExtendScript based syntax highlighting enabled.

This is what BBEdit looks like with ExtendScript based syntax highlighting enabled.

If you like the look of the color scheme that was used in the TextWrangler screenshots in this tutorial you can download my free Charcoal BBEdit and TextWrangler color scheme here. I also have a blue color tinted BBEdit and TextWrangler color scheme called Midnight Blue you can download here.

Setting up JSX Scripts in TextWrangler

To enable Adobe ExtendScript JSX syntax highlighting in TextWrangler we need to open the preferences. We can do that by selecting the TextWrangler > Preferences menu item or we could use the hotkey  (Command key+Comma).

Open the TextWrangler Preferences.

Open the TextWrangler Preferences.

Next we need to click on the “Languages” section on the left side of the Preferences window. The Languages section allows us to define custom syntax highlighter mappings for file extensions.

Select the Languages section in the TextWrangler preferences.

Select the Languages section in the TextWrangler preferences.

To add a new “Custom Extension Mapping” we need to click the plus sign (+) button at the bottom of the Languages view. Then we need to set the Suffix to “.jsx” and pick the “JavaScript ” entry from the Languages menu item.

To add ExtendScript support we need to enter the .jsx suffix, and select the JavaScript language.

To add ExtendScript support we need to enter the .jsx suffix, and select the JavaScript language.

We can now close the TextWrangler preferences dialog and quit and restart the program to save our changes. The next time we open an Adobe ExtendScript .jsx document it will have full syntax highlighting that colorizes each of the elements in the scripting language:

This is what TextWrangler looks like with ExtendScript based syntax highlighting enabled.

This is what TextWrangler looks like with ExtendScript based syntax highlighting enabled.

If you like the look of the color scheme that was used in the TextWrangler screenshots in this tutorial you can download my free Midnight Blue color scheme for BBEdit and TextWrangler here. I also have a grey color tinted Charcoal BBEdit and TextWrangler color scheme here.