Sitecore JSS Failed to compile

Question

I am working on Sitecore 9.3 with JSS using a code-first approach. I have created the first component called "HeroBanner" after that I run the command "Jss Start" but it is giving below error:

*Manifest has been generated and written to ./sitecore/manifest/sitecore-import.json
🔌  Disconnected Layout Service initializing...⏳
Manifest manager is watching for manifest source file changes...
JSS Disconnected-mode Proxy is listening on port 3042. (PID: 49616)
[HPM] Proxy created: /sitecore  -> http://localhost:3042/
[HPM] Proxy created: /data/media  -> http://localhost:3042/
i ｢wds｣: Project is running at http://192.168.0.105/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from C:\Projects\SitecoreJss\jsslearning\public
i ｢wds｣: 404s will fallback to /
Starting the development server...
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
Failed to compile.
src\components\HeroBanner\index.js
  Line 1:27:   Insert `␍`  prettier/prettier
  Line 2:57:   Insert `␍`  prettier/prettier
  Line 3:1:    Insert `␍`  prettier/prettier
  Line 4:32:   Insert `␍`  prettier/prettier
  Line 5:8:    Insert `␍`  prettier/prettier
  Line 6:32:   Insert `␍`  prettier/prettier
  Line 7:42:   Insert `␍`  prettier/prettier
  Line 8:9:    Insert `␍`  prettier/prettier
  Line 9:3:    Insert `␍`  prettier/prettier
  Line 10:1:   Insert `␍`  prettier/prettier
  Line 11:27:  Insert `␍`  prettier/prettier
src\components\Test\index.js
  Line 1:27:   Insert `␍`  prettier/prettier
  Line 2:57:   Insert `␍`  prettier/prettier
  Line 3:1:    Insert `␍`  prettier/prettier
  Line 4:26:   Insert `␍`  prettier/prettier
  Line 5:8:    Insert `␍`  prettier/prettier
  Line 6:26:   Insert `␍`  prettier/prettier
  Line 7:42:   Insert `␍`  prettier/prettier
  Line 8:9:    Insert `␍`  prettier/prettier
  Line 9:3:    Insert `␍`  prettier/prettier
  Line 10:1:   Insert `␍`  prettier/prettier
  Line 11:21:  Insert `␍`  prettier/prettier
Search for the keywords to learn more about each error.
> [DICTIONARY] served in en
> [LAYOUT] served for /*

Answer 1

First make sure Prettier is your default Formatter (which probably is based on compile error):

1. Select VS Code -> View -> Command Palette, and type: Format Document With
2. Then Configure Default Formatter... and then choose Prettier - Code formatter.

Then specify Prettier formatting rules:

1. Create .prettierrc file in your solution root (usually src folder)

2. Specify your rules in that file, for example:

   { "printWidth": 100, "singleQuote": true, "disableLanguages": [] }

Then configure Visual Studio Code to format files on save (so you won't see those compile errors):

1. You have to check "format on Save" in VSCode: Setting >> User >> Text Editor >> Formatting
2. Make sure to check "Format on Save" checkbox:

Now reopen those two files src\components\Test\index.js and src\components\HeroBanner\index.js, do some changes and save them to format them by Prettier...