WebStorm 2016.2: Drag files into HTML and quotes 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 | 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 OS X, Ctrl+Alt+L on Windows and Linux).

Your WebStorm Team

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Cool Feature and tagged , . Bookmark the permalink.

28 Responses to WebStorm 2016.2: Drag files into HTML and quotes style

  1. Ekaterina says:

    test

  2. Themba Fletcher says:

    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.

  3. Arlair says:

    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:

      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:

    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.

  5. fudgie says:

    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:

      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:

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

  7. jaco says:

    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:

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

      • jaco says:

        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:

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

    • Ekaterina Prigara says:

      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.

Leave a Reply

Your email address will not be published. Required fields are marked *