Prettier config - at Setting up Prettier and VS Code

[MarekOk]

Hello, As for September '22 this - two years old version of the course have obviously many differences ( at least in interface of Visual Studio Code ) and suggested by Jonas configuration, as may be not crucial - can be significant along the remaining 50 hours (hundreds actually ) of following the guidelines. It may be also difference between MAC ( which Author is using ) and WIN OS ( which I'm using WIN 10 Pro ) - or simply new VSC version. By following the video about setting the ''Prettier and VS Code'' - I'm unable to change single quotes ( ' ' ) instead auto correcting double quotes ( "" ) while writing the code. First of all - I can't create New File in VSC by clicking the right mouse button - as the Author in the video. Once I'm creating New File - I can't change the name of the file, which is still as ''untitled''. Once I save the file ( as .txt ) I can change the name, but still - it doesn't help with the outcome by writing ''the object'' ( command? ) to direct Prettier app not to changing single quotes in to double quotes... Exactly the same thing with changing default function of Prettier - putting parentheses into a single parameter ( which Jonas ''don't like'' and not recommending... The main issue may be, that I can create only new .txt file, which doesn't help with anything... Anyone had similar issues? Thank you for any hints or/and help... Mark

[akozdev]

Hi Mark

The config file for Prettier should be named as .prettierrc.json. From what I see in your editor, it's called .prettier.rc.txt.

This file contains JSON, which supports only quotation marks (apostrophes are not supported). This code should work:

{
  "singleQuote": true,
  "arrowParens": "avoid"
}

To be able to create new files from the sidebar, you need to open a directory (that contains your project) in VS Code. To do so in VS Code: File > Open Folder... > choose your project directory After that, you should be able to Right-click on the sidebar and create a new file. Let me know if you were able to create the .prettierrc.json file.

[MarekOk]

[MarekOk]

OMG - Thank you Aleksander - it worked like a charm (!!) - thank you very much for clear explanation. It works flawlessly now. And I'm actually stuck on another (lame) setting - maybe you'd be able to give me a hint in this matter as well... I'm unable to syncro my freshly installed Node.js with VSCode as for live-server :( Most likely this is because of - that I don't know how to chose directory/folder in terminal ( for the one which contains the project ) , but may be a different issue... I did re-installed Node.js itself as also VSCode rebooting multiple times... I'm currently follow a JS online course, so completely newbie in those programs/apps Two first SS are from the Author terminal and last two SS from mine terminal ... Dziękuję jak nie wiem co za dotychczasową pomoc/radę :) Serdecznie, Marek PS. No idea why this text wasn't attached to the response...

[akozdev]

No problem 🙂 It's completely normal to have problems with these things as a beginner. You will get used to it with time and practice. Programming in general requires a lot of patience because things like to break for different reasons.

For the live-server, you will need two things:

1. PowerShell (a program that runs commands in your Terminal) doesn't allow to run scripts (like live-server) by default for security reasons. You can however enable running scripts with the command below

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

You need to run the above command from your Terminal with administrator rights (you can open VS Code as administrator (search for VS Code in your OS > Right-click > Run as administrator)).

Note, if you ever want to go back to the default execution policy in PowerShell, run this command from Terminal with administrator rights

Set-ExecutionPolicy -ExecutionPolicy Default -Scope CurrentUser

You can also read more about execution policies in PowerShell at: https://learn.microsoft.com/en-us/powershell/module/microsoft.powershell.security/set-executionpolicy?view=powershell-7.2

2. You will need to navigate to your project directory in Terminal to run live-server from there. This is done with the cd command, which means "change directory". I don't know where exactly your project is, but let's assume you want to first go to the complete-javascript-course directory that exists in your user's directory. Let's say you're currently in the C:/Users/Dell; to navigate to co the complete-javascript-course directory, run cd complete-javascript-course from your Terminal.
   You can also use absolute paths, for example, let's say that the complete-javascript-course directory is at C:/Users/Dell/complete-javascript-course. To navigate there, you can just write cd C:/Users/Dell/complete-javascript-course.

Let me know if it works for you.

[akozdev]

Also, there is an easier way to run a development server (I think it was mentioned in the course). Instead of using the live-server package, you can install the Live Server VS Code extension made by Ritwick Dey.

Then, you just need to open your project in VS Code (as in previous post), and click on the 'Go Live' button from the bottom status bar

[MarekOk]

Yes - as I followed the course video and installed ( also multiple times :D ) the VSCode app Live Server - but for... ''some reason'' ( :D ) I could not connect it to the console, in spite of spending couple of hours on ytb and rebooting, uninstalling and chosing older version of this app... Funny, that after fixing ( thanks to YOU :) 👍 NodeJS issue - Live Server app also connected without problems... I'm highly impressed by the professional approach and your skill in fixing problems and willingness to help 🙏🏻🙏🏻🙏🏻🤝🏻🤝🏻🤝🏻 Once more - many thanks. I can move forward :)

[akozdev]

Glad it works for you 🙂