WebStorm 2016.2: Drag Files into HTML and Quote Style

Posted on by Ekaterina Prigara

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. Ekaterina says:

    July 29, 2016

    test

    • Ekaterina Prigara says:

      July 29, 2016

      re:test

  2. 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 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.

      • Themba Fletcher says:

        August 5, 2016

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

        Thanks!

        • 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.

        • 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.

          • 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

    • Kostya says:

      April 8, 2017

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

  3. 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 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. 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 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.

      • arlair says:

        October 5, 2016

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

      • 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. 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 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. 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. 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 says:

      April 20, 2017

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

      • 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. Frank Chang says:

    June 29, 2018

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

    • 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.

      • 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 says:

          July 2, 2018

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