- \n
- Improved completion for HTML files<\/a><\/li>\n
- Update npm packages from the editor<\/a><\/li>\n
- Other improvements<\/a><\/li>\n<\/ul>\n<\/li>\n
- Space integration<\/a>\n
- \n
- Merge requests and code reviews from the IDE<\/a><\/li>\n
- Mark files as viewed<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Web and frameworks<\/h2>\n
Improved completion for HTML files<\/h3>\n
We\u2019ve improved the way code completion works in HTML files (including Vue and Angular templates).<\/p>\n
Previously, completion in HTML files would only show up when you typed the
<<\/code> character. Starting with v2021.3, you can also see completion suggestions for HTML files when you type a tag name or an abbreviation.<\/p>\n![\"Improved](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/213_web_html_completion.png\")
<\/p>\nFor entity references, the code completion pop-up will appear whenever you type
&<\/code>. As you continue to type, the top suggestion gets selected, and you can press Enter<\/em> to autocomplete it.<\/p>\nPlease note that the new completion functionality is not yet supported for
.html.erb<\/code> files. If you wish to see this feature implemented for such files, please feel free to vote for the corresponding ticket<\/a>.<\/p>\nUpdate npm packages from the editor<\/h3>\n
You can now update npm packages to the latest version right from the editor.<\/p>\n
Open your package.json file, place the caret on the package version you want to update, then press \u2325\u23ce (Alt+Enter)<\/em> and select Update \u2018package name\u2019 to the latest version<\/em>. A quick-fix will also be shown when you hover over the package version.<\/p>\n
![\"Update](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/213_web_npm_update.png\")
<\/p>\nBy default, the new inspection doesn\u2019t highlight the outdated package, and it only provides a quick-fix. You can change the inspection severity level in Preferences \/ Settings | Editor | Inspections<\/em> \u2013 look for Update package.json dependencies<\/em> there.<\/p>\n
![\"Inspection](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/213_web_npm_update_settings.png\")
<\/p>\nThis new inspection offers a more straightforward way to manage packages. Previously, you could manage your packages through Preferences \/ Settings | Languages and Frameworks | Node.js and NPM<\/em>. As only a few people managed their packages this way, we decided to replace it with a better option.<\/p>\n
Lastly, we\u2019ve renamed the Node.js and NPM<\/em> section in Preferences \/ Settings<\/em> <\/em>to just Node.js<\/em> to avoid any confusion. Just like before, you can use it to select a Node interpreter and the package manager of your choice: npm, pnpm, or Yarn.<\/p>\n
![\"Node.js](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/213_web_nodejs_settings.png\")
<\/p>\nOther improvements<\/h3>\n
- \n
- We\u2019ve fixed a bunch of issues related to mapping
.js<\/code> and.d.ts<\/code> files and added gutter icons for navigating between them.<\/li>\n- We\u2019ve added Node.js remote interpreter support for npm<\/a>, ESLint<\/a>, Mocha<\/a>, and Jest<\/a>. For example, if you want to lint a JavaScript file with ESLint, open that file in the editor \u2013 the errors should be highlighted automatically.<\/li>\n
- In this release, we\u2019ve managed to decrease the indexing time for JavaScript files by 20%.<\/li>\n<\/ul>\n
Space integration<\/h2>\n
Space: merge requests and code reviews from the IDE<\/h3>\n
For projects located in Space<\/a>, you can now create merge requests and code reviews right from the IDE. To call these actions, use the
+<\/code> icon on the top toolbar of the Code Reviews<\/em> tool window.<\/p>\n![\"Space:](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/213_space_code_review.png\")
<\/p>\nThe Create Merge Request<\/em> action is useful when you want to merge a branch with multiple commits into a different branch and to ask your teammates to review it.<\/p>\n
With this action, you can select reviewers, the branch to be reviewed, and the destination branch. You will see the commits in the Info<\/em> tab. You can also create a name for your merge request.<\/p>\n
![\"Space:](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/213_space_merge_request_create.png\")
<\/p>\nThe Create Code Review<\/em> action is more generic, and is helpful when you want your teammates to review commits in one or several branches.<\/p>\n
When you choose this action, you will see the list of pushed commits available in Space. You can add a name for the review and select reviewers. In the Info <\/em>tab, you can then manually filter the commits by author, branch, time period, or commit text.<\/p>\n
Note:<\/em> If you are filtering by commit text, you should enter either the entire commit hash or a complete word used in the commit.<\/p>\n
![\"Space:](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/213_space_code_review_create.png\")
<\/p>\nSpace: mark files as viewed<\/h3>\n
In code reviews, the files you haven\u2019t reviewed yet will be marked with blue dots. This will help you make sure you don\u2019t miss any changes in Space projects when performing code reviews.<\/p>\n
The dots will disappear automatically after you open the marked items. If you want to review the changes later, you can select Mark as Not Viewed<\/em> from the context menu.<\/p>\n
![\"Mark](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/213_space_mark_as_viewed.png\")
<\/p>\nJoin the Early Access Program<\/h2>\n
You can download the latest EAP build from our website<\/a> or via the Toolbox app<\/a>. The full list of closed tickets in this EAP build is in the release notes<\/a>.<\/p>\n
To learn about the newest features as they come out, please follow RubyMine on Twitter<\/a>. We post product news and tips several times a week.<\/p>\n
- We\u2019ve added Node.js remote interpreter support for npm<\/a>, ESLint<\/a>, Mocha<\/a>, and Jest<\/a>. For example, if you want to lint a JavaScript file with ESLint, open that file in the editor \u2013 the errors should be highlighted automatically.<\/li>\n
- Mark files as viewed<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
- Update npm packages from the editor<\/a><\/li>\n