Features

WebStorm 2016.2: Drag Files into HTML and Quote Style

Things that automate some small but really routine tasks are the best. That’s why we made possible to add links to JavaScript and CSS files and images by dragging them into the opened HTML file.

If you drag a JavaScript file, WebStorm will automatically create <script src="file_name.js"></script> tag inside the head tag in the HTML file. For CSS files it will add <link rel="stylesheet" href="file_name.css">:

drag-css-js-to-html-1600

Drag an image into a specific place inside the HTML body to add an img tag with width and height attributes:

drag-image-to-html-1600

You can configure whether you’d like to have double or single quotes in this generated code in Preferences/Settings | Editor | Code Style | HTML – Other – Generated quote marks.

That would actually also affect all quotes added, thanks to code completion, for example when you type <div class=""></div>. If you enable the Enforce on reformat option, the quotes will be replaced according to the selected style with the Reformat code action (Alt+Cmd+L on macOS, Ctrl+Alt+L on Windows and Linux).

The WebStorm team

Comments below can no longer be edited.

28 Responses to WebStorm 2016.2: Drag Files into HTML and Quote Style

  1. Avatar

    Ekaterina says:

    July 29, 2016

    test

    • Ekaterina Prigara

      Ekaterina Prigara says:

      July 29, 2016

      re:test

  2. Avatar

    Themba Fletcher says:

    August 3, 2016

    Is there a way to turn this feature off?

    For all other target file types dragging files from the project view navigates to that file instead of inserting a link. The old behavior is very handy when you have many editor panels open.

    • Ekaterina Prigara

      Ekaterina Prigara says:

      August 4, 2016

      No, sorry, no way to turn it off now. Can you please submit us a request? https://youtrack.jetbrains.com/issues/WEB
      Thank you and sorry for the inconvenience.

      • Avatar

        Themba Fletcher says:

        August 5, 2016

        Added as: https://youtrack.jetbrains.com/issue/WEB-22703.

        Thanks!

        • Avatar

          Mat says:

          September 7, 2016

          +1 for this. I have a 3rd party search tool and used to drag files of many types in to open them. I’ve now pushed unwanted .less includes several times because, well, muscle memory you know? I never need to include files like this, so switching it off would help me.

        • Avatar

          Zachary Smith says:

          December 16, 2016

          +1 This has been bugging me since the feature was introduced. “Drag and drop works this way and lets you open files in specific windows…well except for this one case where 0.1% of the time it’s really neato to add a link to that file within that file”. I dream of the day that I’m actually linking so many files into html docs that the drag and drop link generation feature actually saves me time.

          • Avatar

            Dennis Ushakov says:

            December 17, 2016

            Please stay tuned for the WEB-22703 updates, I’ll take a look on how to improve the situation

    • Avatar

      Kostya says:

      April 8, 2017

      Yes, you can just disable the ‘HTML Tools’ plugin and this annoying feature will be gone

  3. Avatar

    Arlair says:

    October 2, 2016

    I must be having a moment of stupidity as I’m having trouble finding this ‘Enforce on reformat option’, “If you enable the Enforce on reformat option, the quotes will be replaced according to the selected style with the Reformat code action”.

    I’d appreciate if you let me know where in settings this is available? Thanks.

    • Ekaterina Prigara

      Ekaterina Prigara says:

      October 3, 2016

      You can find this option in Preferences | Editor | Code Style | HTML – Other, and then scroll to the very bottom of the list of available option. Please also note that it is only available in WebStorm 2016.2.

  4. Avatar

    Arlair says:

    October 3, 2016

    Okay, thanks. I found it now. It does not show if you use the Settings/Preferences search.

    I was looking for TypeScript and JavaScript support. Is that coming? Thanks.

    • Ekaterina Prigara

      Ekaterina Prigara says:

      October 5, 2016

      You can configure the style of quotes used in generated TypeScript and JavaScript code and in code completion in the code style preferences for these languages.

      • Avatar

        arlair says:

        October 5, 2016

        Yes, but not ‘Enforce on reformat’ to use in pasted or reformatted TypeScript or JavaScript code 🙂

      • Avatar

        browner87 says:

        June 26, 2017

        This feature doesn’t work for me either in 2017.1.3. It’s a real pain when starting a new HTML project to type out or copy-paste-edit each include line. I hope this is a bug that gets fixed soon.

  5. Avatar

    fudgie says:

    February 13, 2017

    Honestly, it would be nice if you guys would turn off the modal setting on the settings window.
    Having 10000 settings, and the need to exit each test..or cfg test..is balls annoying.

    You guys are so smart on so many things, but when it comes to saving people “snowballs” time, it seems you just leave features in the dirt..

    Thx

    • Ekaterina Prigara

      Ekaterina Prigara says:

      February 13, 2017

      Sorry, I’m not sure I understand what you mean. Please provide a screenshot or explain in a bit more details. Thanks!

  6. Avatar

    Berkan Dirim says:

    March 14, 2017

    How can I configure so that the .js files are placed just before closing tag and not in ?

  7. Avatar

    jaco says:

    April 19, 2017

    Is this drag-n-drop feature supposed to be available within PyCharm 2017.1.1?
    I have been looking for this and think it’s quite useful

    • Ekaterina Prigara

      Ekaterina Prigara says:

      April 20, 2017

      Yes, that works in PyCharm in HTML files, but probably not in the Django templates.

      • Avatar

        jaco says:

        April 20, 2017

        Thanks. I conducted a quick test (based on Web2py template). Drag-and-drop resulted in a new window presenting me the source code of the file, in stead of an embedded link in the html file. However, it worked with html, in a non-web2py template.
        What are my options to enable it in combination with f.e. a web2py template?

  8. Avatar

    Frank Chang says:

    June 29, 2018

    Is this drag-n-drop feature supposed to be available within PhpStorm 2018.1.6?

    • Ekaterina Prigara

      Ekaterina Prigara says:

      June 29, 2018

      Yes, it is available in PhpStorm, but it only works for the HTML files – you can drag JavaScript and CSS files and images into them.

      • Avatar

        stormcorn says:

        June 30, 2018

        ok thanks!
        so if i want use php, first i can use html format and then modify it to php right?

        • Ekaterina Prigara

          Ekaterina Prigara says:

          July 2, 2018

          Yes, the file should have an .html file extension, you can later rename it.