Tools: Add prettier.

.prettierrc.js

@@ -0,0 +1,5 @@
+// Import the default config file and expose it in the project root.
+// Useful for editor integrations.
+module.exports = {
+	...require( '@wordpress/prettier-config' ),
+};

package.json

@@ -19,6 +19,7 @@
     "@babel/preset-react": "^7.25.7",
     "@wordpress/dependency-extraction-webpack-plugin": "^6.20.0",
     "@wordpress/e2e-test-utils-playwright": "^1.20.0",
+    "@wordpress/prettier-config": "^4.22.0",
     "@wordpress/scripts": "^30.14.0",
     "babel-loader": "^9.2.1",
     "css-loader": "^7.1.2",

webpack.config.js

@@ -1,9 +1,9 @@
-const path = require('path');
-const TerserPlugin = require('terser-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
-const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extraction-webpack-plugin');
+const path = require( 'path' );
+const TerserPlugin = require( 'terser-webpack-plugin' );
+const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
+const CssMinimizerPlugin = require( 'css-minimizer-webpack-plugin' );
+const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );
+const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
 
 // Common configuration for both builds
 const commonConfig = {
@@ -33,7 +33,7 @@ const commonConfig = {
 		'css/pro/acf-pro-input': './assets/src/sass/pro/acf-pro-input.scss',
 	},
 	output: {
-		path: path.resolve(__dirname, 'assets/build/'),
+		path: path.resolve( __dirname, 'assets/build/' ),
 	},
 	module: {
 		rules: [
@@ -43,7 +43,7 @@ const commonConfig = {
 				use: {
 					loader: 'babel-loader',
 					options: {
-						presets: ['@babel/preset-react'],
+						presets: [ '@babel/preset-react' ],
 					},
 				},
 			},
@@ -78,13 +78,13 @@ const unminifiedConfig = {
 	},
 	plugins: [
 		new RemoveEmptyScriptsPlugin(),
-		new MiniCssExtractPlugin({
+		new MiniCssExtractPlugin( {
 			filename: '[name].css', // Output CSS as .css
-		}),
-		new DependencyExtractionWebpackPlugin({
+		} ),
+		new DependencyExtractionWebpackPlugin( {
 			injectPolyfill: true,
 			useCombinedAssetFile: true,
-		}),
+		} ),
 	],
 };
 
@@ -99,28 +99,28 @@ const minifiedConfig = {
 	optimization: {
 		minimize: true, // Enable minification
 		minimizer: [
-			new TerserPlugin({
+			new TerserPlugin( {
 				terserOptions: {
 					format: {
 						comments: false, // Remove comments
 					},
 				},
 				extractComments: false,
-			}),
+			} ),
 			new CssMinimizerPlugin(), // Minify CSS
 		],
 	},
 	plugins: [
 		new RemoveEmptyScriptsPlugin(),
-		new MiniCssExtractPlugin({
+		new MiniCssExtractPlugin( {
 			filename: '[name].min.css', // Changed to output .min.css files
-		}),
-		new DependencyExtractionWebpackPlugin({
+		} ),
+		new DependencyExtractionWebpackPlugin( {
 			injectPolyfill: true,
 			useCombinedAssetFile: true,
-		}),
+		} ),
 	],
 };
 
 // Export both configurations
-module.exports = [unminifiedConfig, minifiedConfig];
+module.exports = [ unminifiedConfig, minifiedConfig ];