Jetbrains Webstorm JS/HTML/CSS development tool

WebStorm is a popular IDE for JavaScript, HTML, and CSS development, developed by JetBrains. It provides powerful coding support for web front-end development. The latest version, WebStorm 2023.1.4 (Chinese version), features numerous optimizations and upgrades to enhance the user experience for front-end developers.

Download

https://www.jetbrains.com/webstorm/download

JetBrains WebStorm For Mac v2024.3.4 updates include:

1. Sticky Lines : This feature allows key structural elements (such as function or class declarations) to be pinned to the top of the editor when browsing large files, helping developers to more easily track and understand the code structure without losing context.
2. Quick Documentation Improvements : The Quick Documentation popup now supports syntax highlighting for code blocks and integrates completion results. It also displays interface members, enumeration constants, and type alias bodies, providing developers with richer documentation information.
3. Full-line code completion : Enhanced code completion features include grayed-out single-line suggestions. These suggestions, powered by specialized language models trained for different languages and frameworks, complete entire lines of code based on the context of the current file, improving coding efficiency.
4. Vue Language Server enabled by default : For Vue, Svelte and Astro component usage, Vue Language Server is enabled by default, providing a more accurate and intelligent code editing and debugging experience.
5. New Language Services widget : The introduction of the new Language Services widget further enhances the IDE’s language support capabilities and provides developers with richer language features and tools.
6. Powerful debugging capabilities : The built-in debugger supports breakpoint debugging, variable monitoring, expression evaluation, and other operations. It also supports remote debugging of the browser, greatly improving debugging efficiency.
7. Automated build tool support : Continue to support automated build tools such as Webpack and Gulp to help developers automatically process files, compile code, etc.

WebStorm for Mac Features

• Support Mac operating system and provide exquisite native Mac interface
• Optimized Chinese font display to support Retina high-resolution screens
• Support touchpad gesture operation to improve coding efficiency
• Implemented multi-process mode, greatly improving performance
• Provides intelligent code folding for large files to reduce memory usage
• Support Apple Silicon chips, fast running speed and good compatibility

What’s new in WebStorm 2024.1

WebStorm 2024.1 introduces many new features and improvements designed to improve developer productivity and development experience. Here are some of the main changes:

Sticky Rows

WebStorm 2024.1 introduces the new Sticky Lines feature, which helps you maintain context when navigating large files. This feature pins key structural elements, such as function or class declarations, to the top of the editor, preventing you from losing context as you scroll. You can customize the behavior and appearance of sticky lines by navigating to Editor | General | Appearance in the settings panel.

Quick documentation improvements

WebStorm 2024.1 enhances the Quick Documentation popup with syntax highlighting for code blocks and integration with autocompletion results. It now displays interface members, enumeration constants, and type alias bodies. You can click the “Show more” link to see the full list of members and navigate to the related type reference.

Full-line code completion

WebStorm 2024.1 introduces full-line code completion support for JavaScript, TypeScript, and other code files. The editor now provides completion suggestions for entire lines of code based on the file context. These suggestions are driven by language models trained for different languages and frameworks. This feature does not require an internet connection; the models run locally. Full-line code completion is included in the WebStorm Standard license.

Vue Language Server enabled by default

In WebStorm 2024.1, Vue Language Server is enabled by default for all Vue projects, including those based on Nuxt. However, there are some known limitations for Vue 2 projects. If you are working on a Vue 2 project, you can opt out of using Vue Language Server in the Settings panel under Languages & Frameworks | TypeScript | Vue.

Component usage for Vue, Svelte, and Astro

WebStorm now lists usages of components in Vue, Svelte, and Astro files in tooltips within the editor. This will help you quickly find usages of a specific component anywhere in your project.

New Language Services widget

A new Language Services widget has been added to the status bar, providing insight into the language services in effect for the current file and project. You can restart services or navigate to the settings panel directly from the widget.

Frameworks and technologies

WebStorm 2024.1 also brings several other improvements for different frameworks and technologies, such as:

• An experimental TypeScript engine is available, which can be switched in Languages & Frameworks | TypeScript in the settings panel. The new engine resolves compatibility issues and improves performance, and is currently suitable for TypeScript and Vue projects.
• New quick-fixes for React that allow for dynamically creating props and state. You can apply these quick-fixes using the ⌥Enter shortcut.
• Improvements to the Structure view enhance support for React and JSX. The Structure tool window now displays React components and hooks, as well as JSX structures, including conditional rendering and list items. Additionally, JSX-powered libraries like Preact and Solid are now supported.
• For Vue, WebStorm 2024.1 has improvements, including support for v-bind shorthands (a feature introduced in Vue v3.4). Support includes reference resolution, find usages, autocompletion, documentation, and inspections.

User Experience

WebStorm 2024.1 also brings some user experience improvements, such as:

• New Terminal Look: WebStorm 2024.1 features an updated terminal interface with visual and functional improvements to improve working with command-line tasks.
• Color-coded highlighting for editor tabs: To improve the navigation experience when working with multiple files simultaneously, editor tabs have reintroduced default color-coded highlighting to visually distinguish them.
• Default tool window layout option: WebStorm now provides a “Default” option for quickly restoring the workspace appearance to the default state.
• Option to hide the main toolbar: WebStorm now provides an option to hide the main toolbar based on user preference.

UI Improvements

Default tool window layout options

WebStorm 2024.1 provides a new “Default” option for saving multiple tool window layouts. This allows you to quickly restore the appearance of your workspace to its default state. You can access this layout option from the main menu, Window > Layouts.

Option to hide the main toolbar

WebStorm 2024.1 introduces a feature that allows you to hide the main toolbar when using the IDE’s default view mode. To hide the main toolbar, you can first select View > Appearance and then uncheck the Toolbar option.

Color-coded highlighting for editor tabs

To improve the navigation experience when working with multiple file types simultaneously in the editor, WebStorm 2024.1 reintroduces default color-coded highlighting to distinguish them on editor tabs. This will help you find the files you need more easily and quickly identify them based on file type.

New product icons for macOS

WebStorm 2024.1 redesigns the product icon for macOS to align it with the standard style guidelines of the operating system. This helps provide a consistent user experience and makes WebStorm more tightly integrated with other macOS applications.

Built-in tool improvements

terminal

The new terminal in WebStorm 2024.1 has been carefully designed to provide a better user experience. Commands are now displayed in different blocks, and you can easily navigate using the arrow keys or keyboard shortcuts. In addition, commands, paths, arguments, and options all have code completion, which improves the efficiency and accuracy of terminal operations. You can enable the new terminal interface by going to Settings > Tools > Terminal > Enable New Terminal.

Full-featured diff viewer

WebStorm 2024.1 introduces a full-featured diff viewer to improve the change review process. The full-featured diff viewer allows you to view all modified files from different change sets in a scrollable panel, without having to view them one by one. This provides you with better context, making it easier to compare and understand the impact of multiple changes. The full-featured diff viewer is compatible with GitLab and GitHub and provides more powerful tools for inspecting and reviewing code changes.

GitLab’s code snippet support

WebStorm 2024.1 further improves its integration with GitLab and now supports GitLab code snippets. You can now create public or private code snippets for GitLab directly in WebStorm, making it easier for you to share and use code snippets with your team.

Run to cursor embedded debugging option

WebStorm 2024.1 introduces a new Run to Cursor embedded debugging option that enables you to execute specific lines of code faster. When the program is suspended, you can hover your mouse over the line of code you want to execute and click “Run to Cursor” in the pop-up window to quickly execute it. You can also use the shortcut Option/Alt + F9 to use this feature.

JavaScript, TypeScript, and CSS improvements

TypeScript improvements

WebStorm 2024.1 resolves inconsistencies that occurred when adding import type statements. You can now configure the usage of TypeScript import type statements or type specifiers to better suit your needs. In addition, the behavior of the exports field in package.json in TypeScript files has been improved.

HTML to JSX single tag closing

When you paste HTML code into a JSX file, WebStorm 2024.1 automatically converts the corresponding features and adds closing tags for you. This improvement makes JSX syntax more automatic and convenient.

CSS custom @property support

WebStorm 2024.1 follows up on the Interop 2023 initiative and introduces support for custom CSS @properties. This improvement allows WebStorm to better inspect and complete properties used in your work.

Support for .jsonc format

WebStorm 2024.1 includes support for the jsonc format, which enables you to use single-line and multi-line comments (using // and /* */) in your documentation. This is very useful when enriching your configuration files and documentation to better annotate and explain JSON files.

These are just some of the major improvements and enhancements in WebStorm 2024.1. You can find more details in the official documentation. We hope these improvements will improve your development experience and productivity.

Function HIGHLIGHT

JavaScript development made easy

WebStorm has an exquisite UI design and a convenient code editor. It has built-in support for mainstream front-end frameworks such as JavaScript, Angular, React, Vue.js, etc. It uses intelligent code auto-completion and error checking technology to greatly improve coding efficiency.

Be confident in the results of your work

The IDE runs dozens of code inspections and detects potential issues as you type, helping you write more reliable and maintainable code. Refactor your entire codebase in just a few clicks and ensure nothing is missed when implementing major structural changes.

Enjoy efficient coding

With all the features you need for JavaScript development available out of the box, you can start coding right away. WebStorm takes care of all the routine work for you, allowing you to be more productive and focus on more creative tasks.

Reduce the stress of handling complex tasks

Worried about getting mixed up and losing important changes when working with Git? Or about breaking something when renaming a component across the entire project? WebStorm will simplify these and other challenging tasks so you can focus on the big picture.

Core Advantages

Built specifically for JavaScript

Looking for a reliable tool for the toughest parts of JavaScript development? For over 10 years, we’ve been optimizing WebStorm to make coding more enjoyable. Whether you’re working with JS, TS, React, Vue, Angular, Node.js, HTML, or various stylesheets, WebStorm has you covered.

The smartest editor

WebStorm deeply understands your project structure and can help you in every aspect of writing code. It will automatically complete your code, detect errors and redundancies and suggest fixes, and help you refactor your code safely.

Built-in developer tools

One of the benefits of working in an IDE is having all the necessary tools in one place. Use WebStorm to debug and test your client-side and Node.js apps, and take advantage of version control. Take advantage of the linter, build tools, terminal, and HTTP client, all integrated with the IDE.

Customizable environment

Want to extend the built-in functionality? Explore a wide range of themes, plugins, and more to customize the look and feel of WebStorm to your liking. Save your customizations and share them between different instances of WebStorm.