chore(webpack-react-babel-prettier): npm run prettier:fix

webpack-react-babel-prettier/.prettierignore

@@ -0,0 +1 @@
+TODO

webpack-react-babel-prettier/.prettierrc

@@ -0,0 +1,5 @@
+{
+ "semi": true,
+ "singleQuote": true,
+ "trailingComma": "es5"
+}

webpack-react-babel-prettier/config/webpack.common.js

@@ -24,9 +24,9 @@ module.exports = {
       {
         //test all *.css using style-loader and css-loader
         test: /\.css$/i,
-		use: ["style-loader", "css-loader"],
+        use: ['style-loader', 'css-loader'],
       },
-	]
+    ],
   },
   resolve: {
     extensions: ['*', '.js', '.jsx'],
@@ -35,7 +35,7 @@ module.exports = {
     // create a plugin instance so that you can use it several times anywhere
     new HtmlWebpackPlugin({
       title: 'Production',
-	    template: path.resolve(__dirname, "../public/index.html")
+      template: path.resolve(__dirname, '../public/index.html'),
     }),
   ],
 };

webpack-react-babel-prettier/package-lock.json

@@ -14,12 +14,13 @@
         "react-dom": "18.2.0"
       },
       "devDependencies": {
-                "@babel/core": "^7.23.9",
-                "@babel/preset-env": "^7.23.9",
-                "@babel/preset-react": "^7.23.3",
-                "babel-loader": "^9.1.3",
+        "@babel/core": "7.23.9",
+        "@babel/preset-env": "7.23.9",
+        "@babel/preset-react": "7.23.3",
+        "babel-loader": "9.1.3",
         "css-loader": "6.7.3",
         "html-webpack-plugin": "5.5.3",
+        "prettier": "3.2.5",
         "style-loader": "3.3.2",
         "webpack": "5.89.0",
         "webpack-cli": "5.1.4",
@@ -4959,6 +4960,21 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/prettier": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-error": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",

webpack-react-babel-prettier/package.json

@@ -14,8 +14,11 @@
     "node": ">=18.17.0"
   },
   "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
     "start": "webpack serve --config config/webpack.dev.js",
-        "build": "webpack --config config/webpack.prod.js"
+    "build": "webpack --config config/webpack.prod.js",
+    "prettier": "prettier src --check",
+    "prettier:fix": "prettier --write \"**/*.+(js|jsx|json|css|md)\""
   },
   "devDependencies": {
     "@babel/core": "7.23.9",
@@ -24,6 +27,7 @@
     "babel-loader": "9.1.3",
     "css-loader": "6.7.3",
     "html-webpack-plugin": "5.5.3",
+    "prettier": "3.2.5",
     "style-loader": "3.3.2",
     "webpack": "5.89.0",
     "webpack-cli": "5.1.4",

webpack-react-babel-prettier/readme.md

@@ -1,6 +1,7 @@
 # React.js Example
 
 ## Table of Contents
+
 0. [General](#general)
 1. [Links](#links)
 
@@ -8,10 +9,10 @@
 
 # Links
 
-* [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k)
-* [Production](https://webpack.js.org/guides/production/)
-* [Setup Development and Production Environment for React App](https://medium.com/freestoneinfotech/setup-development-and-production-environment-for-react-app-397c4cc9e382)
-* [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/)
-* [load CSS](https://masteringjs.io/tutorials/webpack/css-loader)
-* [load CSS](https://webpack.js.org/loaders/css-loader/)
-* [load CSS](https://blog.jakoblind.no/css-modules-webpack/)
+- [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k)
+- [Production](https://webpack.js.org/guides/production/)
+- [Setup Development and Production Environment for React App](https://medium.com/freestoneinfotech/setup-development-and-production-environment-for-react-app-397c4cc9e382)
+- [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/)
+- [load CSS](https://masteringjs.io/tutorials/webpack/css-loader)
+- [load CSS](https://webpack.js.org/loaders/css-loader/)
+- [load CSS](https://blog.jakoblind.no/css-modules-webpack/)

webpack-react-babel-prettier/src/components/hello.jsx

@@ -2,15 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 //destructure props
-const Hello = ({msg}) => {
+const Hello = ({ msg }) => {
   return (
     <>
       <div>{msg}</div>
     </>
   );
-}
+};
 
-export default Hello
+export default Hello;
 
 Hello.propTypes = {
   msg: PropTypes.string,

webpack-react-babel-prettier/src/index.jsx

@@ -8,7 +8,7 @@ if (process.env.NODE_ENV !== 'production') {
 //since react 18
 import { createRoot } from 'react-dom/client';
 //create root container
-const root = createRoot(document.getElementById("root"));
+const root = createRoot(document.getElementById('root'));
 //render root app
 root.render(
   <React.StrictMode>

webpack-react-babel-prettier/src/main.jsx

@@ -6,5 +6,5 @@ export default function App() {
       <h1>React.js</h1>
       <Home />
     </div>
-  )
+  );
 }

webpack-react-babel-prettier/src/pages/home.jsx

@@ -6,7 +6,6 @@ import '../style.css';
 import jsonOsmQuery from '../osm-query.json';
 
 const Home = () => {
-
   const rryOsmQuery = jsonOsmQuery.queries;
 
   return (
@@ -14,19 +13,19 @@ const Home = () => {
       <h2>Home</h2>
       <h3>(React.js Lambda Function Component)</h3>
       <Hello msg="Hello World!" />
-      <div className='container'>
+      <div className="container">
         <p>Blog RryOsmQuery</p>
-        <div className='rryOsmQuery'>
+        <div className="rryOsmQuery">
           {rryOsmQuery.map((query) => (
-            <div className='query' key={query.id}>
-              <p className='title'>{query.title}</p>
-              <p className='content'>{query.query}</p>
+            <div className="query" key={query.id}>
+              <p className="title">{query.title}</p>
+              <p className="content">{query.query}</p>
             </div>
           ))}
         </div>
       </div>
     </>
   );
-}
+};
 
-export default Home
+export default Home;

webpack-react-babel-prettier/src/style.css

@@ -1,3 +1,9 @@
-h1 { color: red; }
-h2 { color: green; }
-h3 { color: blue; }
+h1 {
+  color: red;
+}
+h2 {
+  color: green;
+}
+h3 {
+  color: blue;
+}