JetBrains RubyMine :: Ruby, Ruby on Rails IDE. Code editing, completion, refactoring and debugging. RoR Web development with the best HTML, CSS and JavaScript support

HTML/XHTML code completion

RubyMine is capable of completing tags (including auto-insertion of closing tags), attributes, styles, and even file references in hyperlinks, etc.

Find/highlight usages

The Find/highlight usages feature now works for tags, IDs, files, images, styles, etc. It allows you to easily analyze relationships within your application. You can also perform the structural search and replace with your HTML/XHTML files.

HTML/XHTML code formatting

Code formatting according to HTML-specific Code Style (defined via a dedicated Code Style settings panel)

Matching tag highlighting

This feature, analogous to Matching brace highlighting in Ruby code not only verifies the consistency of tag pairs, but also allows to quickly navigate to paired tags (Ctrl + ] / Ctrl + [).

HTML validation & quick-fixes

• Wrong closing tag
• Missing closing tag
• Missing required attributes
• Check for correct image size with quick-fix
• 

• Invalid attributes or illegal attribute values
• Invalid local anchor
• Wrong references to files in hyperlinks (e.g., values of attributes href and src)
• Duplicate attributes
• 

HTML/XHTML syntax highlighting

RubyMine provides advanced syntax highlighting for HTML & XHTML files, with opportunity to customize your own color schemes and even share them with your team members.

HTML/XHTML aware refactoring

• Rename file, anchor, etc.
• Move/Copy file
• Safe Delete file

Go to declation

The Go to declaration feature (Ctrl + B) works even for references to images (opens the image in editor tab, via bundled plugin).

Show Applied Styles for Tag

This command, available from the context menu when called on a tag, opens a tree-view of all styles that are applied to the tag by CSS, so that you can immediately see all defined style attributes, with possible overridings.

Quick view of docs

Quick doc (Ctrl + Q and Shift + F1) opens descriptions of HTML tags, attributes (with available values if defined), etc., from the official W3C standard.

Structure View

The convenient structure view, fully synchronized with the editor, allows you to analyze the structure of your HTML/XHTML file and quickly navigate to the desired place in code.

Show content

(Ctrl + Shift + I) shows the popup with the underlying content:

• on a tag — shows schema
• on a file — shows file content
• on an image — shows image

Open in browser

The View | Open in Browser command is provided for quick view of the current HTML file.

Fast HTML/XHTML navigation with the active breadcrumbs bar

to the top

CSS code completion

Code completion works for CSS keywords, values, properties, classes, HTML IDs, etc. RubyMine also supports the CSS parameter info display.

CSS syntax & error highlighting

RubyMine detects and highlights various CSS errors like invalid class references, missing or incorrect attributes, values that are overwritten or do not match attribute specifics.

RubyMine also provides instant quick fixes for the most of errors found.

CSS on-the-fly validation & intention actions

• Missing or invalid closing braces
• Invalid selector format
• Invalid CSS properties
• Unused CSS class definitions
• and more...

Find/highlight usages

Finding and highlighting usages of CSS ID's, selectors, etc., works in CSS files.

Quick doc

The Ctrl + Q and Shift + F1 shortcut positioned on a selector, or ID, opens description from the official W3C standard.

CSS Code Folding

Ability to fold CSS code gives you an opportunity to hide currently non-important parts of it and concentrate on code structure, or current coding point.

CSS Code formatting

A dedicated settings dialog allows you to customize your code formatting preferences or requirements for CSS code separately.

CSS Structure view

The Structure tool window now works for CSS files as well, providing you the ability to review your CSS structure and quickly navigate to the desired places in code, via synchronization with editor enabled.

Refactoring

This important feature is a real time-saver which additionally guarantees the consistency of the refactored code. Currently the following refactorings are available for CSS:

• Rename (including the opportunity to rename CSS file, class or ID attribute, etc., directly from within HTML)
• Move/Copy file
• Safe Delete file
• Extract inlined style block from HTML into a CSS file

Auto-comment

To automatically comment a block of CSS code, or just a single line, you can use the same shortcut that is defined for Ruby code commenting (Ctrl + Shift + / and Ctrl + /, respectively).

Goto declaration

Advanced navigation features like Goto Declaration command (Ctrl + B) can save your time when you need to switch to the underlying code of a selector or ID.

Show Content

This feature is a replacement of the Goto Declaration command when you only need to view the underlying code, without opening it in additional tab. Just press Ctrl + Shift + I and see the details in the popup.