Prettier

Enable automatic Prettier configuration

1. Open the Settings dialog (Ctrl+Alt+S) , go to Languages & Frameworks | JavaScript | Prettier, and select Automatic Prettier configuration.

   

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 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 <path to the folder>/**/*.

     Suppose, you have a project with the following structure:

     

     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 and Set Prettier as default formatter.

4. If applicable, use the Prefer Prettier configuration to IDE code style checkbox to specify whether and how you want the internal WebStorm formatter to use Prettier code style settings.

   By default, the checkbox is selected and the internal WebStorm formatter applies the settings from the Prettier configuration file. This ensures that generated code (for example, after refactoring or quick-fix) and the code that is already processed with Prettier are formatted consistently.

   If no configuration file is found, the default Prettier configuration is used.

   Learn more from Modify WebStorm default code style with Prettier code style

1. Open the Settings dialog (Ctrl+Alt+S) , 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, WebStorm locates the prettier package itself and the field is filled in automatically.

   

3. To set Prettier as the default formatting tool, 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.

6. If applicable, use the Prefer Prettier configuration to IDE code style checkbox to specify whether and how you want the internal WebStorm formatter to use Prettier code style settings.

   By default, the checkbox is selected and the internal WebStorm formatter applies the settings from the Prettier configuration file.

   If no configuration file is found, the default Prettier configuration is used.

   Learn more from Modify WebStorm default code style with Prettier code style

1. In the Settings dialog (Ctrl+Alt+S) , 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 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 <path to the folder>/**/*.

     Suppose, you have a project with the following structure:

     

     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 and Set Prettier as default formatter.

3. Specify the .prettierignore file to use.

   For each file that matches the above-specified pattern WebStorm, 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.

   With Manual Prettier configuration, the Path to .prettierignore field also shows Detect the .prettierignore file automatically by default. Accept this suggestion or click and select the .prettierignore to use.

4. By default, Prettier is automatically applied to every file that matches the above-specified pattern 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.

1. Open the Settings dialog (Ctrl+Alt+S) and go to Languages & Frameworks | JavaScript | Prettier.

2. Use the Prefer Prettier configuration to IDE code style checkbox to specify whether and how you want the internal WebStorm formatter to use Prettier code style settings.

   • By default, the checkbox is selected and the internal WebStorm formatter applies the settings from the Prettier configuration file. If no configuration file is found, the default Prettier configuration is used.

   • Clear the checkbox to use the default language-specific code style settings.

   • If Prettier is not applicable to a file, the default language-specific code style settings are used no matter whether the checkbox is selected or cleared.