Merge pull request #6 from thomasmendez/fix/webpack-config

Webpack Config Updated, VSCode Eslint Fix on Save Instructions, Updated Dependencies, Updated README.md instructions for Husky Git Hooks

README.md

@@ -40,9 +40,9 @@ To run test for the project, run `yarn test`
 
 ## Linting
 
-Lint rules can be checked manually running the following commands
+Lint rules can be checked manually by running `yarn lint` for ESLint or `yarn pretty` for Prettier
 
-_Note: The Husky pre-commit hook will try to automatically fix any ESLint and Prettier lint errors when committing. ESLint errors can also be automatically fixed on IDE save if configured. See the project's [VSCode Editor + ESLint](https://github.com/thomasmendez/react-template-simple-site#vscode-editor--eslint) instructions to learn how to set this up for convenience_
+_Note: The Husky pre-commit hook will try to automatically fix any ESLint and Prettier lint errors when committing. To enable this, please run `chmod +x .husky/pre-commit` to allow linting and test to run on each git commit. ESLint errors can also be automatically fixed on IDE save if configured. See the project's [VSCode Editor + ESLint](https://github.com/thomasmendez/react-template-simple-site#vscode-editor--eslint) instructions to learn how to set this up for convenience_
 
 ### ESLint
 
@@ -94,6 +94,8 @@ Husky 5 and above now uses a `.husky` directory in order to provide more flexebi
 
 Modify the `pre-commit` hook with commands you wish to run before committing
 
+_Note: When you clone this repo, please run `chmod +x .husky/pre-commit` to allow linting and test to run on each git commit_
+
 ### ESLint
 
 [ESLint](https://eslint.org/) is a static code analysis tool for identifying problematic patterns found in JavaScript code
@@ -104,22 +106,38 @@ ESLint covers both code quality and coding style issues
 
 ### VSCode Editor + ESLint
 
-Recommended to use ESLint Plugin to see ESLint errors in editor
+It is recommended to use the VSCode Extension [ESLint Plugin](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) to see ESLint errors in the editor
 
-To apply ESLint format rules on file save, modify `settings.json`
+To apply ESLint format rules on file save, modify the `settings.json`
 
 1. Hit `F1` on your keyboard
 2. Type `Open User Settings` to manage preferences
 3. Search for `Code Actions On Save`
 4. Make sure `Format On Save` is checked
 5. Open the `settings.json` for `Code Actions on Save`
-6. Add the following code to its settings
+6. Add the following code to its settings (this alone works with npm projects)
    ```
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
-   "eslint.validate": ["javascript"]
+   "eslint.options": {
+        "extensions":  [".jsx", ".js"]
+      },
+      "eslint.validate": [
+        "javascript",
+        "javascriptreact",
+        "jsx"
+   ],
    ```
+7. Since we are using Yarn Berry, add the following as well to make sure VSCode can reference the correct ESLint files
+
+```
+"eslint.nodePath": ".yarn/sdks",
+"search.exclude": {
+  "**/.pnp.*": true,
+  "**/.yarn": true
+}
+```
 
 You should now be able to apply your ESLint rules on file save in VSCode!
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-template-simple-site",
-  "version": "2.0.0",
+  "version": "1.1.1",
   "description": "React Template Simple Site",
   "main": "index.js",
   "scripts": {
@@ -20,7 +20,7 @@
       "eslint --ext .js,.jsx src/ --fix"
     ],
     "*.{json,yml,yaml,md}": [
-      "prettier --write"
+      "prettier --write **/*.{json,yml,yaml,md}"
     ]
   },
   "packageManager": "yarn@3.1.0",
@@ -44,8 +44,8 @@
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-webpack-plugin": "^3.1.0",
-    "html-webpack-plugin": "^5.3.2",
+    "eslint-webpack-plugin": "^3.1.1",
+    "html-webpack-plugin": "^5.5.0",
     "husky": "^7.0.4",
     "jest": "^27.3.1",
     "lint-staged": "^11.2.6",
@@ -54,4 +54,4 @@
     "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^4.4.0"
   }
-}
+}

webpack.dev.js

@@ -16,6 +16,12 @@ module.exports = {
     devMiddleware: {
       writeToDisk: true,
     },
+    client: {
+      overlay: {
+        errors: false,
+        warnings: false,
+      },
+    },
   },
   module: {
     rules: [
@@ -41,9 +47,10 @@ module.exports = {
       useEslintrc: true,
       extensions: ['.js', '.jsx'],
       exclude: 'node_modules',
-      emitError: false,
+      fix: true,
+      emitError: true,
       failOnError: false,
-      emitWarning: false,
+      emitWarning: true,
       failOnWarning: false,
     }),
   ],

webpack.prod.js

@@ -32,9 +32,10 @@ module.exports = {
       useEslintrc: true,
       extensions: ['.js', '.jsx'],
       exclude: 'node_modules',
-      emitError: false,
+      fix: true,
+      emitError: true,
       failOnError: false,
-      emitWarning: false,
+      emitWarning: true,
       failOnWarning: false,
     }),
   ],

yarn.lock

@@ -4506,9 +4506,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-webpack-plugin@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "eslint-webpack-plugin@npm:3.1.0"
+"eslint-webpack-plugin@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "eslint-webpack-plugin@npm:3.1.1"
   dependencies:
     "@types/eslint": ^7.28.2
     jest-worker: ^27.3.1
@@ -4518,7 +4518,7 @@ __metadata:
   peerDependencies:
     eslint: ^7.0.0 || ^8.0.0
     webpack: ^5.0.0
-  checksum: c6858e5f28d0ca5c5982a7a00cad99a25a8e117f90a662c5f550722f31ef8057ef1cf0cf1b89da249032437a61d917ab7623cb1ff4677cb4886aa2b010ecfdb0
+  checksum: 4ff3f3fc8f03a187792f783513c3f4274221623d5f5c16ca90542c1b781fd04ed646ab6043caa55a51a654d5ab2c7039677faedee8bfb526d1310edc3909cbd2
   languageName: node
   linkType: hard
 
@@ -5262,7 +5262,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"html-webpack-plugin@npm:^5.3.2":
+"html-webpack-plugin@npm:^5.5.0":
   version: 5.5.0
   resolution: "html-webpack-plugin@npm:5.5.0"
   dependencies:
@@ -7947,8 +7947,8 @@ __metadata:
     eslint-plugin-jsx-a11y: ^6.4.1
     eslint-plugin-react: ^7.21.5
     eslint-plugin-react-hooks: ^4.2.0
-    eslint-webpack-plugin: ^3.1.0
-    html-webpack-plugin: ^5.3.2
+    eslint-webpack-plugin: ^3.1.1
+    html-webpack-plugin: ^5.5.0
     husky: ^7.0.4
     jest: ^27.3.1
     lint-staged: ^11.2.6