# Prettier > **TL;DR** > Required plugins: > > > > `JavaScript and TypeScript`, `Prettier` -  the plugins are bundled with IntelliJ IDEA and enabled by default. [Prettier](https://prettier.io/) is a tool to format files in various languages, like TypeScript, JavaScript, CSS, HTML, JSON, and others. With IntelliJ IDEA, you can format selected code fragments as well as entire files or directories using the Reformat with Prettier action. IntelliJ IDEA adds this action as soon as you install Prettier as a dependency in your project or globally on your computer. You can configure Prettier to reformat specific files every time such file is changed and the changes are saved automatically or manually, refer to [Run Prettier automatically on save](#ws_prettier_run_automatically_in_current_project). Also, Prettier can be [set as default formatter](#ws_prettier_default_formatter) for specific files. It will run against such files every time you reformat your code with `Ctrl+Alt+L` (Windows), `⌘ ⌥ L` (macOS), `⌘ ⌥ L` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ L` (macOS System Shortcuts), `Ctrl+Alt+L` (XWin), `Ctrl+Alt+L` (GNOME), `Alt+Shift+L` (KDE), `Ctrl+Alt+L` (Emacs), `Ctrl+Alt+L` (Sublime Text), `⌘ ⌥ L` (Sublime Text (macOS)), `Alt+Shift+F` (NetBeans), `Ctrl+Alt+Enter` (Visual Studio), `⌘ ⌥ ⏎` (Visual Studio (macOS)), `Ctrl+Alt+L` (Eclipse), `⌘ ⇧ F` (Eclipse (macOS)). For more information, refer to [Reformat code with Prettier](#ws_prettier_reformat_code). > **Tip:** > To use the Prettier tool with Java, refer to [Prettier-Java plugin](https://github.com/jhipster/prettier-java) that you can add to your Java project. ## Before you start Procedure: 1. Download and install [Node.js](http://nodejs.org/#download). > **Note:** > To use Prettier configuration files written in TypeScript, make sure your Node.js version is 22.6.0 or later. 2. Make sure the JavaScript and TypeScript and Prettier required plugins are enabled on the Settings | Plugins page, tab Installed. For more information, refer to [Managing plugins](managing-plugins.html). ## Install Prettier Procedure: 1. Open your command-line shell or the embedded Terminal (`Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Alt+F12` (NetBeans), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))) . 2. Type one of the following commands: * `npm install --save-dev --save-exact prettier` * `npm install --global prettier` Learn more about installation modes from the [Prettier official website](https://prettier.io/docs/en/install.html). ## Configure Prettier in IntelliJ IDEA IntelliJ IDEA enables Prettier and adds the Reformat with Prettier action as soon as you install it [as described above](#ws_prettier_install). To turn Prettier off, open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to Languages & Frameworks | JavaScript | Prettier, and select Disable Prettier. ### Supported formats of configuration files IntelliJ IDEA recognizes Prettier configurations in the following file types: * `.prettierrc.json`, `.prettierrc.yml`, `.prettierrc.yaml`, or `.prettierrc.json5` * `.prettierrc.js`, `prettier.config.js`, `.prettierrc.mjs`, `prettier.config.mjs`, `.prettierrc.cjs`, `prettier.config.cjs`, `.prettierrc.toml` * `.prettierrc.ts`, `prettier.config.ts`, `.prettierrc.mts`, `prettier.config.mts`, `.prettierrc.cts`, `prettier.config.cts` > **Note:** > To use Prettier configuration files written in TypeScript, make sure your Node.js version is 22.6.0 or later. Learn more from the [Prettier official website](https://prettier.io/docs/configuration/#typescript-configuration-files). ### Automatic Prettier configuration In this mode, for each file that matches the [run-for-files pattern](#prettier_scope_run_for_files): * IntelliJ IDEA uses the Prettier package from the closest `node_modules` folder that is located in the same folder as the file to reformat or in one of its parent folders. * IntelliJ IDEA automatically detects the closest [configuration file](#ws_prettier_configure_supported_formats) and applies the settings from it. * IntelliJ IDEA searches for a `.prettierignore` file upwards the folder tree and uses the settings from the first one found, if any. With Automatic Prettier configuration, Prettier is applied only to files within the scope of the Prettier dependency listed in the corresponding `package.json`. To change this behavior, select Manual Prettier configuration and select the Apply Prettier to files outside the prettier dependency scope checkbox, see [Manual Prettier configuration](#ws_prettier_configure_scope_steps_suppress_processing_subprojects) for details. Suppose, your project is structured as follows: ![Project structure: Prettier is applied to files within the scope of Prettier dependency](https://resources.jetbrains.com.cn/help/img/idea/2026.2/prettier_configuration_enable_auto_default.png) The project has a `.prettierrc` configuration file in the project root. There are also four `package.json` files, one of them is in the project root, the others are in subprojects. As you can see, Prettier is listed as dependency only in the `package.json` from the `packages/package_c_with_prettier_dependency` subproject. As a result, only the files from `packages/package_c_with_prettier_dependency/src` will be formatted with Prettier. Automatic Prettier configuration is enabled by default in any new project without an `.idea` folder if Prettier is listed as dependency in any `package.json` and the project has at least one Prettier configuration file. As a result, if your project consists of multiple modules with different Prettier configurations, each module will use the rules from its own Prettier configuration file (if such config is found). If Automatic Prettier configuration is not enabled by default for some reason, you can enable it yourself. Procedure: Enable automatic Prettier configuration 1. Open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to Languages & Frameworks | JavaScript | Prettier, and select Automatic Prettier configuration. ![Configure Prettier automatically](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_prettier_configuration_automatic_mode.png) 2. To apply Prettier automatically to saved files, select the Run on save checkbox. 3. In the Run for files field, specify the file patterns to which Prettier will be applied automatically when such files are saved or when the Reformat Code action is invoked. With the default pattern, Prettier will be applied to any JavaScript, TypeScript, JSX, TSX, HTML, Vue, or Astro file. To reformat files of other types or files stored in specific folders, use [glob patterns](https://github.com/isaacs/node-glob#glob) to update the default pattern. * For example, to automatically reformat CoffeeScript files as well, add `coffee` to the default pattern as follows: ``` **/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,coffee} ``` * To reformat files from a specific folder, including subfolders, replace `**/*` with `/**/*`. Suppose, you have a project with the following structure: ![Prettier: custom patterns. Example project structure](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_prettier_configure_scope.png) To reformat only the files in the `coffee` folder, update the pattern as follows: ``` coffee/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,coffee} ``` As a result, the file `reformat.coffee` is reformatted while `no_reformatting.coffee` is not. For more information, refer to [Run Prettier automatically on save](#ws_prettier_run_automatically_in_current_project) and [Set Prettier as default formatter](#ws_prettier_default_formatter). ### Manual Prettier configuration Procedure: 1. Open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to Languages & Frameworks | JavaScript | Prettier, and select Manual Prettier configuration. 2. From the Prettier package list, select the `prettier` installation to use. If you followed the standard installation procedure, IntelliJ IDEA locates the `prettier` package itself and the field is filled in automatically. ![Configure Prettier: manual mode](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_prettier_configuration_manual_mode.png) 3. To [set Prettier as the default formatting tool](#ws_prettier_default_formatter), select the Run on 'Reformat Code' action checkbox. 4. To apply Prettier automatically to saved files, select the Run on save checkbox. 5. [Configure the scope for Prettier](#ws_prettier_configure_scope). ### Configure scope for Prettier You can specify file name patterns that define the files to be automatically processed by Prettier. You can also exclude some files from processing by adding them to a `.prettierignore` file. By default, Prettier is applied not only in the module where the `prettier` package is stored but in other modules as well, which may be helpful in monorepos. Procedure: 1. In the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to Languages & Frameworks | JavaScript | Prettier. 2. In the Run for files field, specify the file patterns to which Prettier will be applied automatically when such files are saved or when the Reformat Code action is invoked. With the default pattern, Prettier will be applied to any JavaScript, TypeScript, JSX, TSX, HTML, Vue, or Astro file. To reformat files of other types or files stored in specific folders, use [glob patterns](https://github.com/isaacs/node-glob#glob) to update the default pattern. * For example, to automatically reformat CoffeeScript files as well, add `coffee` to the default pattern as follows: ``` **/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,coffee} ``` * To reformat files from a specific folder, including subfolders, replace `**/*` with `/**/*`. Suppose, you have a project with the following structure: ![Prettier: custom patterns. Example project structure](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_prettier_configure_scope.png) To reformat only the files in the `coffee` folder, update the pattern as follows: ``` coffee/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,coffee} ``` As a result, the file `reformat.coffee` is reformatted while `no_reformatting.coffee` is not. For more information, refer to [Run Prettier automatically on save](#ws_prettier_run_automatically_in_current_project) and [Set Prettier as default formatter](#ws_prettier_default_formatter). 3. Specify the [.prettierignore file](https://prettier.io/docs/en/ignore.html) to use. For each file that matches the [above-specified pattern](#prettier_scope_run_for_files) IntelliJ IDEA, by default, searches for a `.prettierignore` upwards the folder tree and uses the first one found. This default approach is always applied when you select [Automatic Prettier configuration](#ws_prettier_configuration_automatic). With [Manual Prettier configuration](#ws_prettier_configuration_manual), the Path to .prettierignore field also shows `Detect the .prettierignore file automatically` by default. Accept this suggestion or click ![the Browse button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.inline.browse.svg) and select the `.prettierignore` to use. 4. By default, Prettier is automatically applied to every file that matches the [above-specified pattern](#prettier_scope_run_for_files) no matter whether the `node_modules` folder higher in the project tree contains a `prettier` package or not. This lets you use Prettier in all subprojects without installing the `prettier` package in each of them. To suppress processing files from subprojects without a `prettier` package, select Manual Prettier configuration and clear the Apply Prettier to files outside the prettier dependency scope checkbox. ### Prettier Language Status Widget When you open a file that should be processed with Prettier according to the [configured scoped](#ws_prettier_configure_scope), a Prettier widget icon ![Prettier status widget](https://resources.jetbrains.com.cn/help/img/idea/2026.2/javascript-plugin.icons.expui.fileTypes.prettier.png) appears on the Status bar. ![Prettier Language Status Widget](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_prettier_widget.png) From this widget, you can restart the Prettier language service, open the Prettier configuration file for editing, or open the Prettier settings to update the Prettier configuration. ![Prettier Language Status Widget - actions](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_prettier_widget_popup.png) Procedure: * To restart the Prettier language service, click ![the Restart Service icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.actions.stopAndRestart.svg). * To open and edit the Prettier configuration file, click ![the Edit Configuration File icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.ide.configFile.svg). * To update the [Prettier configuration in IntelliJ IDEA](#ws_prettier_configure), click ![the Open Settings icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.general.settings.svg). * If any errors are detected, for example, an incorrect Node.js version, invalid Prettier package, plugin errors, or a [language service timeout](#ws_prettier_widget_timeout), ![an Error icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.status.error.svg) is displayed. Hover over ![the Open Settings icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.status.error.svg) to view a tooltip with a problem description. ![Prettier language status widget - an error is detected](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_prettier_widget_steps_error.png) Click ![the Open Settings icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.status.error.svg) to open the [Prettier configuration settings](#ws_prettier_configure). To avoid wasting system resources, the Prettier language server is automatically stopped on timeout after a period of inactivity. Prettier is considered active when it’s called to format your code or to resolve configuration (for example, when the code style is modified). Procedure: Set a custom timeout The default timeout is 5 minutes. 1. Go to `Tools | Internal Actions | Registry` on the main menu or use `Ctrl+Shift+A` (Windows), `⌘ ⇧ A` (macOS), `⌘ ⇧ A` (IntelliJ IDEA Classic (macOS)), `⌘ ⇧ P` (macOS System Shortcuts), `Ctrl+Shift+A` (XWin), `Ctrl+Shift+A` (GNOME), `Ctrl+Shift+A` (KDE), `Escape, X` (Emacs), `Ctrl+Shift+P` (Sublime Text), `⌘ ⇧ P` (Sublime Text (macOS)), `Ctrl+I` (NetBeans), `Ctrl+Shift+A` (Visual Studio), `⌘ ⇧ A` (Visual Studio (macOS)), `Ctrl+Shift+A` (Eclipse), `⌘ 3` (Eclipse (macOS)) to open the Registry. 2. Find the `prettier.service.expiration.timeout.ms` key and change the default timeout in the Value field. ## Reformat code with Prettier Procedure: 1. In the editor, select the code fragment to reformat. To reformat a file or a folder, select it in the Project tool window (`Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+1` (NetBeans), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))) . 2. Then select Reformat with Prettier from the context menu. You can configure Prettier to reformat specific files every time such file is changed and the changes are saved automatically or manually, refer to [Run Prettier automatically on save](#ws_prettier_run_automatically_in_current_project). Also, Prettier can be [set as default formatter](#ws_prettier_default_formatter) for specific files. It will run against such files every time you reformat your code with `Ctrl+Alt+L` (Windows), `⌘ ⌥ L` (macOS), `⌘ ⌥ L` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ L` (macOS System Shortcuts), `Ctrl+Alt+L` (XWin), `Ctrl+Alt+L` (GNOME), `Alt+Shift+L` (KDE), `Ctrl+Alt+L` (Emacs), `Ctrl+Alt+L` (Sublime Text), `⌘ ⌥ L` (Sublime Text (macOS)), `Alt+Shift+F` (NetBeans), `Ctrl+Alt+Enter` (Visual Studio), `⌘ ⌥ ⏎` (Visual Studio (macOS)), `Ctrl+Alt+L` (Eclipse), `⌘ ⇧ F` (Eclipse (macOS)). This behavior can be enabled [in the current project](#ws_prettier_run_automatically_in_current_project) as well as [for all new projects](#ws_prettier_run_automatically_in_new_projects). Procedure: Run Prettier automatically on save 1. Open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Languages & Frameworks | JavaScript | Prettier`, and select the Run on save checkbox. 2. In the Run for files field, specify the pattern that defines the set of files to be reformatted every time such file is saved. You can accept the default pattern or type a custom one. With the default pattern, Prettier will wake up and process any updated and saved JavaScript, TypeScript, JSX, TSX, HTML, Vue, Astro, `.ml`, or CSS file. To reformat files of other types or files stored in specific folders, use [glob patterns](https://github.com/isaacs/node-glob#glob) to update the default pattern. * For example, to automatically reformat `sass` and `.scss` files as well, add `sass, scss` to the default pattern as follows: ``` **/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,ml,css,scss,sass} ``` * To reformat files from a specific folder, including subfolders, replace `**/*` with `/**/*`. Suppose, you have a project with the following structure: ![Prettier: custom patterns. Example project structure](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_prettier_glob_pattern.png) To apply Prettier automatically only to the files in the `src` folder, update the pattern as follows: ``` src/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,ml,css} ``` As a result, the file `dog.ts` will be reformatted on save while `animal.ts` will remain unchanged. Procedure: Reformat code snippets on paste By default, newly pasted code snippets are reformatted with Prettier automatically. To disable this behavior: * Open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Languages & Frameworks | JavaScript | Prettier`, and clear the Run on paste checkbox. Procedure: Set Prettier as default formatter 1. Open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Languages & Frameworks | JavaScript | Prettier`. 2. Select Manual Prettier configuration and then select the Run on 'Reformat Code' action checkbox. Learn more about Prettier configuration from [Choose how to detect the Prettier package and configuration file](#ws_prettier_configure). 3. In the Run for files field, specify the pattern that defines the set of files to be always reformatted with Prettier. Accept the default pattern or customize it as described in [Configure the scope for Prettier](#prettier_scope_run_for_files). Procedure: Configure Prettier to run on save or on reformat in new projects 1. Go to `File | New Projects Setup | Settings for New Projects`. In the dialog that opens, go to `Languages & Frameworks | JavaScript | Prettier`. 2. Use the Run on 'Reformat Code' action and `On save` checkboxes to specify the actions that will trigger Prettier. 3. If necessary, update the default pattern in the Run for files field as described in [Run Prettier automatically on save](#ws_prettier_file_pattern). ## See also ### Procedures [TypeScript](typescript-support.html) ### Reference [TypeScript](settings-languages-typescript.html) [Code Style](settings-code-style.html)