WebStorm 2020 feature introduction
1. Use Prettier as the default formatter
Want to use Prettier instead of the built-in formatter to organize your code? With this update, it's easier than ever. Just tick the new On code reformat checkbox and the IDE will use Prettier when you reformat .js, .ts, .jsx, and .tsx. Other file types can be easily added as well.
2. Get support for Nuxt.js
Let WebStorm help you use Nuxt.js more efficiently! Use coding assistance features in the template section and nuxt.config.js file, check out core Nuxt Quick documentation for components, get support for the Vuex library in Nuxt projects, and more.
3. Quickly configure Vue-specific code styles
With Vue-specific code style settings, you can choose which top-level tags' content should be indented, and whether the indentation should be the same for the entire Vue file or should depend on the language settings. You can also change the interpolation in Format in Vue code.
4. Save time with new intent actions
The new smart intent action (Alt+Enter) will help you perform some operations around optional chaining and null merging and looping more quickly. For example, you can now convert for with numeric index Loops quickly convert to the forEach array method.
5. Render JSDoc comments directly in the editor
Reading JSDoc comments can be a challenge because you have to look at all the markup. For easier reading, we present these comments directly in the editor, eliminating unnecessary distractions.
6. Support debugging started from the tool window
WebStorm now allows debugging sessions to be launched from the Run and Terminal tool windows. For example, if you run a script like npmstart, hold down Ctrl+Shift and click the http link in the script output and the IDE will start a JavaScript debugging session for you.
7. Improved item preview during debugging
When debugging, you'll notice some enhancements to item previews in the built-in console. With these enhancements, you can view more useful details about an object without having to expand it.
8. Get better support for @use and @forward rules
Last year, we introduced some initial support for @use and @forward rules used in Sass and SCSS. Now we've extended this support, so you can expect WebStorm provides smarter completion and improved parsing for imported symbols.
9. Preview WebP images in IDE
Starting with v2020.2, you can preview .webp images directly in WebStorm, just like you preview .jpeg or .png files. Previously, WebStorm did not recognize the .webp image format, which forced you to switch to another application when you needed to view such images.
10. Enjoy full support for GitHub pull requests
In WebStorm 2020.2, we’re providing expanded support for GitHub pull requests to make them easier to use. Now you can view and merge all PR, and code reviews – all without leaving the IDE.
11. Redesigned dialog boxes for Git operations
WebStorm 2020.2 eliminates clutter in dialog boxes for merge, pull, and rebase operations. Additionally, some new options have been added.
12. Submit locally from log squash
You can now select multiple local commits in the Log tab of the Git tool window and squash them into a single commit. This action can be performed from the context menu, which is invoked by right-clicking.
13. Identify problems in your code faster
Using the new Inspections widget and Problems Tool window, you can get detailed information about the number of warnings, errors, and other problems in the current file, and browse between them.
14. Add a caret at the end of each selected line
A new action for working with multiple carets (Alt+Shift+G) allows you to quickly place a caret at the end of each selected line and remove the selection as soon as all carets have been added.
WebStorm 2020 software features
1. JavaScript and TypeScript
1. Use JavaScript destructuring: With destructuring, you can unpack the values in arrays and objects into variables using a very concise syntax. WebStorm's new refactorings and intents (Alt-Enter) help you bring destructuring in easily JavaScript or TypeScript code.
2. Use Promise to convert functions to async/await: You can automatically change the function that returns Promise, .then() and .catch() calls use async/ Asynchronous functions with await syntax. Just press Alt-Enter on the function name and select Convert to Async Function. This is not only possible in TypeScript files, but also in JavaScript and Flow.
2. Structure
1. New checks for Angular applications: For Angular applications, webstorm has added 17 new checks to help you detect Angular-specific errors in your application as you type and recommend quick fixes. These checks work in both TypeScript and template files, and check the usage of bindings, directives, components and many other things.
2. Easier navigation in Angular projects: In Angular applications you can now use related symbols... popups (Ctrl-Cmd-Up / Ctrl + Alt+ Home) to quickly switch between different component files such as TypeScript, templates, styles and test files. In TypeScript files, the popup will also list all symbols imported into this file.
3. Improved support for TypeScript in Vue applications: webstorm now uses the TypeScript language service and its own TypeScript support for any TypeScript code in .vue files. This means you now have more accurate type checking and type information, you will be able to use quick fixes provided by the service, and view all TypeScript errors in the current file in the TypeScript tool window.
4. Extract method for React hooks: The extract method is now refactored with local functions and uses destructured return values, making it ideal for extracting custom react hooks.
5. Improved prop completion: webstorm now provides better code completion for React props merged using the extension operator.
3. HTML and style sheets
1. Updated documentation: The documentation (F1) for CSS properties and HTML tags and attributes now displays the latest description and information about MDN's browser support, as well as links to the full MDN article.
2. Browser compatibility check for CSS: To check whether the target browser version supports all CSS properties you use, you can enable the new browser compatibility check in the preferences.
3. Camel case support for CSS modules: If you use CSS modules in your project, code completion for classes in JavaScript files will now suggest the camelCase version of the class name with dashes.
4. Extract CSS variables: Using the new Extract CSS variable refactoring, you can use syntax to replace all usages of values in the current .css file is the variable var(--var-name).
4. Test
1. Highlight failing lines in tests: When you run tests using Jest, Karma, Mocha, or Protractor and some tests fail, you can now see in the editor where the problem occurred. The IDE will use the information in the stack trace and highlight the failing code. On hover, you will see error messages from the test runner and you can start debugging your tests immediately.
2. Testing with Cucumber and TypeScript: Using Cucumber and TypeScript? Now you can jump to the steps from the .feature file Use the quick fix (and Alt-Enter combination to generate missing definitions) into their definitions in the .ts file.
5. Tools
1. New debugger console: Use the new, improved interactive debugger console in JavaScript and Node.js debugging tool windows! It now uses a tree view to display objects, it supports using CSS to style log messages and using console.group() and Group them with console.groupEnd(). You can also filter out any type of log messages.
2. Complete npm scripts: When adding a new script to the package.json file, WebStorm will now provide suggestions for available commands provided by installed packages. After typing node, the IDE will suggest folder and file names. After typing npm run, you will see a list of tasks defined in the current file.
3. Improved support for linters: webstorm can now Run multiple processes for ESLint and TSLint in a project to ensure they work correctly in a single project and in projects with multiple linter configurations.
4. Support for Docker Compose: If you use Docker to test Node.js applications, you can now use the configuration described in the Docker Compose file from the IDE Run and debug applications easily.
5. Dependency version range tooltip: In package.json, press Command/Ctrl key and version to hover over the dependency to see what version range can be installed when running npm install or yarn install.
6. IDE
1. New UI Theme: You can now use the new colorful UI theme as a plug-in in WebStorm. Choose from dark purple, gray and cyan light themes, or create your own.
2. Pop-up at the nearest location: Pop-up at the nearest location (Cmd Shift-E / Press Ctrl + Shift + E) is a new way Browse projects from various locations. It shows a list of all files and lines of code recently opened in the editor. You can start typing to filter the results and jump to the code you need.
3. Save Project as Template: With the new action "Save as Template" in the Tools menu, you can now use a project as the basis for creating a new project on the IDE welcome screen.
4. Soft wrapping for selected file types: You can now enable soft wrapping for specific file types in the editor. To do this, open Preferences/Settings | Edit | General and specify the file type in the Soft Packaging File field.
WebStorm 2020 FAQ
How to modify the font
Open WebStorm, click and open "Colors & Fonts" and find "Font"
At this time, look at the right side of the window and find the name you just entered. Find the Size option and enter the number directly in the window after Size.
WebStorm 2020 change log
-Added support for vue-loader in the file reference in the Vue template section
- The Local History feature should now work properly on WSL 2
- Fixed many regression bugs: WEB-46751, WEB-46669, WEB-46818, WEB-46595, WEB-46684, and WEB-46754
- Reworked to extend optional chaining and invalid merging to explicit checks for intent. Its EAP in 2020.2 Introduced in 2020.2, there was still room for improvement based on user feedback, so this intent was closed in 2020.2. Now you can try the improved version
- In Angular projects, WebStorm now supports type inference for structural directives on ng-template tags
-Fixed several performance issues
Huajun editor recommends:
As a programming tool software that is constantly updated and iterated, WebStorm 2020 has been transformed in version updates again and again, more in line with user needs, and bringing users a very high user experience. The editor of Huajun Software Park recommends everyone to download and use it. In addition, there areFast table software,AlphaEbot action editing software,He Xiaoxiang programming client,Easy GUI,Little turtle LOGO languageRelated software is also pretty good and can be downloaded and used.
Useful
Useful
Useful