Add JS and CSS support to Android Studio project

Question

I just installed the new Android Studio and I'm looking for a way to be able to get support for CSS and JS (autocomplete, highlighting for incorrect usages) as i would in PHPStorm and also WebStorm, both intelliJ products.

I have googled and even added it to 'File Types', but stil they just display as plain text files.

Answer 1

JS/CSS are not part of Android Studio. You'd have to install IntelliJ Ultimate edition if you need those.

In general, you won't get a feature like that which is only available in a paid version in a free tool like Android Studio or IntelliJ Community Edition.

Answer 2

I have created a Github repo with CSS & JavaScript support for Android Studio. There is even a settings.jar file for easy import. Let me know if there is anything you would like added.

https://github.com/manifestinteractive/android-studio-filetypes

Answer 3

You can get syntax highlighting pretty easy.

In File > Settings > Files Types, create a Javascript file type and add *.js to the registered patterns. You will need to add all the keywords.

Alternatively you can edit the XML file directly. In Ubuntu it is stored at /home/"User Name"/.AndroidStudioPreview/config/filetypes, and mine looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<filetype binary="false" default_extension="" description="Javascript" name="Javascript">
  <highlighting>
    <options>
      <option name="LINE_COMMENT" value="//" />
      <option name="COMMENT_START" value="/*" />
      <option name="COMMENT_END" value="*/" />
      <option name="HEX_PREFIX" value="" />
      <option name="NUM_POSTFIXES" value="" />
      <option name="HAS_BRACES" value="true" />
      <option name="HAS_BRACKETS" value="true" />
      <option name="HAS_PARENS" value="true" />
      <option name="HAS_STRING_ESCAPES" value="true" />
    </options>
    <keywords keywords="break;case;catch;continue;debugger;default;delete;do;else;finally;for;function;if;in;instanceof;new;return;switch;this;throw;try;typeof;var;void;while;with" ignore_case="false" />
  </highlighting>
  <extensionMap>
    <mapping ext="js" />
  </extensionMap>
</filetype>

As for autocompletion you may want to look into File Watcher, but I haven't figured it out yet. But I think if you have PHPStorm and WebStorm you already have the plugins you need for IntelliJ. And you can add custom plugins. Maybe try adding the free IDEA plugins to WebStorm ...

EDIT: In the latest Android Studio (1.0) on Windows, the location of these XMLs is the following:

.AndroidStudio\config\options\filetypes.xml :

<?xml version="1.0" encoding="UTF-8"?>
<application>
  <component name="FileTypeManager" version="11">
    <ignoreFiles list="CVS;SCCS;RCS;rcs;.DS_Store;.svn;.pyc;.pyo;*.pyc;*.pyo;.git;*.hprof;_svn;.hg;*.lib;*~;__pycache__;.bundle;*.rbc;" />
    <extensionMap>
      <mapping ext="js" type="Javascript" />
    </extensionMap>
  </component>
</application>

.AndroidStudio\config\filetypes\Javascript.xml

<?xml version="1.0" encoding="UTF-8"?>
<filetype binary="false" default_extension="" description="Javascript Files" name="Javascript Files">
  <highlighting>
    <options>
      <option name="LINE_COMMENT" value="//" />
      <option name="COMMENT_START" value="/*" />
      <option name="COMMENT_END" value="*/" />
      <option name="HEX_PREFIX" value="" />
      <option name="NUM_POSTFIXES" value="" />
      <option name="HAS_BRACES" value="true" />
      <option name="HAS_BRACKETS" value="true" />
      <option name="HAS_PARENS" value="true" />
      <option name="HAS_STRING_ESCAPES" value="true" />
    </options>
    <keywords keywords="break;case;catch;continue;debugger;default;delete;do;else;finally;for;function;if;in;instanceof;new;return;switch;this;throw;try;typeof;var;void;while;with" ignore_case="false" />
  </highlighting>
  <extensionMap>
    <mapping ext="js" />
  </extensionMap>
</filetype>