How to turn on SCSS highlighting in Intellij IDEA CE

Intellij IDEA is a great tool but its Community Edition does not support a couple of essential features for full stack development. The main problem is that it does not highlight SCSS files of CUBA themes. Here I will show you how to enable basic support of SCSS in IDEA CE.

First of all, you will need to install TextMate bundles support plugin:

  1. Open Settings - Plugins menu
  2. Switch to Marketplace tab
  3. Install TextMate bundles support

image

After that you will need to download TextMate bundle with required syntax. We will install SCSS support using https://github.com/MarioRicalde/SCSS.tmbundle

  1. Download sources of https://github.com/textmate/css.tmbundle
  2. Extract ZIP content
  3. Open Settings - Editor - TextMate Bundles
  4. Add bundle using + button

image

You will see a warning message: Some extension declared in attached bundles are already used by native file types. Click on Show details.

image

Here we will unregister default scss and css.scss extensions using Unregister native file type link. Then click OK.

Also, I’d recommend that you switch to Github color scheme:

image

Finally, if we open a SCSS file in an extended theme and write a couple of rules we will see nice highlighting:

image

This mechanism enables you to use any existing TextMate bundle, e.g. HTML / JavaScript / PHP / etc.

Enjoy!

3 Likes

Hi Yuriy,

Is there a version of TextMate plugin that compatible with Studio IDEA bundle v10? Searched in plugin marketplace, nothing found, then I tried to manually download TextMate v183.4284.36 but when import it into Studio v10, it complains the incompatibility.

1 Like

Unfortunately, for now you cannot install Text Mate to Studio bundle. You can use it only in standard IntelliJ Idea CE.

We are planning to fix this in one of the next versions.