The IntelliJ IDEA 2021.1 RC is available, meaning this could be the last chance for you to try out our updates before the major release is officially announced. Download the latest build from our website or via the Toolbox App, upgrade to it from inside the IDE, or use snaps if you’re a Ubuntu user. While IntelliJ IDEA is an IDE for Java, it also understands and provides intelligent coding assistance for a large variety of other languages such as SQL, JPQL, HTML, JavaScript, etc., even if the language expression is injected into a String literal in your Java code. IntelliJ IDEA is also available as a snap package. If you’re on Ubuntu 16.04 or later, you can install IntelliJ IDEA from the command line. Sudo snap install intellij-idea-community -classic. Sudo snap install intellij-idea-ultimate -classic. Sudo snap install intellij-idea-educational -classic. Out of the box, IntelliJ IDEA provides a comprehensive feature set including tools and integrations with the most important modern technologies and frameworks for enterprise and web development with Java, Scala, Groovy and other languages; WebStorm: The smartest JavaScript IDE. WebStorm is a lightweight and intelligent IDE for front-end development and server-side JavaScript. The following features are available for free with IntelliJ IDEA Community Edition. 19 976 636 downloads. Bash language support for 2020.1 and earlier. 14 425 278 downloads. IntelliJ Lombok plugin. 12 482 659 downloads.ignore.ignore is a plugin for.
Skip to end of metadataGo to start of metadataWebStorm - The Smartest JavaScript IDE
WebStorm is a powerful and intelligent IDE that gives you the best coding assistance for JavaScript, HTML and CSS and a wide range of modern web technologies. WebStorm is perfectly equipped for complex client-side development and server-side development with Node.js.
It provides smart code insight, autocompletion, refactoring features, on-the-fly error prevention, and much more. Together with support for the popular frameworks such as AngularJS and Meteor and integrated instruments for testing, debugging and code analysis and integration with various VCS, WebStorm enhances your productivity and takes your development experience to a whole new level.
Get more information about WebStorm features, stable releases, purchase options or download the latest release version on our website.
Read our blog and follow us on Twitter.
Please report any bugs and file feature requests on issue tracker.
WebStorm includes bundled evaluation key for a free 30-day trial.
Download the latest stable release on the product website.
Documentation
Product website
Blog
Videos
Using Prettier in WebStorm
Use the Reformat with Prettier
action (Opt-Shift-Cmd-P
on macOS or Alt-Shift-Ctrl-P
on Windows and Linux) to format the selected code, a file, or a whole directory.
To run Prettier on save in WebStorm 2020.1 or above, open Preferences | Languages & Frameworks | JavaScript | Prettier and enable the option Run on save for files
.
By default, only JavaScript and TypeScript files will be formatted automatically. You can further configure what files will be updated using the glob pattern.
Don’t forget to install Prettier first.
To use Prettier in IntelliJ IDEA, PhpStorm, PyCharm, and other JetBrains IDEs, please install this plugin.
To run Prettier on save in older IDE versions, you can set up a file watcher following the instructions below.
Running Prettier on save using File Watcher
To automatically format your files using Prettier on save in WebStorm 2019.* or earlier, you can use a File Watcher.
Go to Preferences | Tools | File Watchers and click + to add a new watcher.
In Webstorm 2018.2, select Prettier from the list, review the configuration, add any additional arguments if needed, and click OK.
In older IDE versions, select Custom and do the following configuration:
- Name: Prettier or any other name
- File Type: JavaScript (or Any if you want to run Prettier on all files)
- Scope: Project Files
- Program: full path to
.bin/prettier
or.binprettier.cmd
in the project’snode_module
folder. Or, if Prettier is installed globally, selectprettier
on macOS and Linux orC:Usersuser_nameAppDataRoamingnpmprettier.cmd
on Windows (or whatevernpm prefix -g
returns). - Arguments:
--write [other options] $FilePath$
- Output paths to refresh:
$FilePathRelativeToProjectRoot$
- Working directory:
$ProjectFileDir$
- Environment variables: add
COMPILE_PARTIAL=true
if you want to run Prettier on partials (like_component.scss
) - Auto-save edited files to trigger the watcher: Uncheck to reformat on Save only.
Using Prettier with ESLint
If you are using ESLint with eslint-plugin-prettier, use the Fix ESLint Problems
action to reformat the current file – find it using Find Action (Cmd/Ctrl-Shift-A
) or add a keyboard shortcut to it in Preferences | Keymap and then use it.
Make sure that the ESLint integration is enabled in Preferences | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint.
Using Prettier as External Tool
Go to Preferences | Tools | External Tools and click + to add a new tool. Let’s name it Prettier.
- Program:
prettier
on macOS and Linux orC:Usersuser_nameAppDataRoamingnpmprettier.cmd
on Windows (or whatevernpm prefix -g
returns), if Prettier is installed globally - Parameters:
--write [other options] $FilePath$
- Working directory:
$ProjectFileDir$
If Prettier is installed locally in your project, replace the path in Program with $ProjectFileDir$/node_modules/.bin/prettier
on macOS and Linux or $ProjectFileDir$node_modules.binprettier.cmd
on Windows.
Webstorm Vs Intellij Idea Ultimate
Press Cmd/Ctrl-Shift-A
(Find Action), search for Prettier, and then hit Enter
.
It will run Prettier for the current file.
Webstorm Vs Idea
You can add a keyboard shortcut to run this External tool configuration in Preferences | Keymap.