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.

EpicPandaForce · Accepted Answer · 2015-01-12 14:24:29Z

39

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>

edited Jan 12, 2015 at 14:24

EpicPandaForce

81.7k28 gold badges269 silver badges451 bronze badges

answered Jul 17, 2013 at 22:36

izzy

1,3891 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

pdschuller Over a year ago

Uhhh I have been using Android Studio and editing my js files in WebStorm. Every now n then (like right now.) Webstorm changes the IDE config(?) file n when I go back to AS, it says, "reload project" I click OK and then I get errors like, There is no output path for the APK; and Sources output directory is null for module.

pdschuller Over a year ago

Thanks for the File Types thing. That is a huge improvement ... keeping track of those {} pairs etc.

izzy Over a year ago

@pdschuller I really have no idea, I don't have Webstorm so I wouldn't be able to reproduce your problem. I suggest asking the jetbrains support. And it looks like from this post Intellij and WebStorm can not work as one. Sounds like a load a BS, another reason to stay away from JetBrains and their money grubbing BS

Jamie Hutber Over a year ago

this is pretty annoying, having paid for phpstorm as well, I'd love them, but doubt they will, to let me build via phpstorm, or at least export the settings from the studio into phostorm.

Francois Over a year ago

on your keywords you need a ';' between default and delete :) good work sharing this, very helpful!

|

Siva Velusamy · Accepted Answer · 2013-06-18 16:01:08Z

5

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.

answered Jun 18, 2013 at 16:01

Siva Velusamy

2,51919 silver badges9 bronze badges

3 Comments

Jamie Hutber Over a year ago

good point. I already pay for phpstorm, just seems a shame I can't use them all in the same place :(

Myoch Over a year ago

Well, NetBeans does it pretty well and is free, so why not in Android Studio?

Jamie Hutber Over a year ago

oh wow, netbeans is still going, thats cool

Collectives™ on Stack Overflow

Add JS and CSS support to Android Studio project

2 Answers 2

9 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related