Hey! I'm on a mission to make 100 React.js projects ending March 8th. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!
No link to today's deployed project. Just a healthy discussion about setting up VS Code to work well with React.
Background
Today while hard at work on a problem, I noticed that my computer began to get unreasonably slow. When it took over 5 minutes to delete an empty folder, I knew something was wrong and visited (on Mac) About this Mac > Storage.
What I saw in my storage earlier today was that the hard drive of my 120 GB Macbook Air was completely full. This didn't make sense to me. I had dealt with this about a month ago and had gone through and deleted practically everything from my computer. So to investigate, I clicked the "Manage" option which revealed that my computer only had about 20 GB of applications and documents on it, the rest was simply marked "Other"- meaning it was hidden in my Mac's Cache, and almost impossible to identify and delete.
When I found myself looking through directories and deleting 5 MB photos that I cherished, I knew this solution wasn't going to cut it. Something had to be done.
The Hulking Girth of Adobe
This problem became especially acute a few weeks ago when I tried installing the Adobe Creative Cloud on my computer. I wanted to edit a couple of photos in Photoshop and maybe try my hand at Illustrator. This turned out to be so stressful I doubt I ever try it again on my own computer. Downloading one Adobe product- say Photoshop- nowadays comes with gigabytes upon gigabytes of bloatware in the form of seemingly dozens of additional Adobe products that you didn't ask for that then embed yourself throughout your computer and begin eating up both of your computer's precious forms of memory- its RAM and its storage. It does this until you buy a several thousand dollar Mac or until your computer dies, as mine did.
So, sometime in the early winter I experienced this issue and begin uninstalling and then forcefully removing every Adobe product on my computer. Unfortunately no matter how many 2 and 3 gigabyte directories I deleted I would always end up finding more, or background processes under the name "ccloud" downloading and transferring information back to Adobe HQ for analysis.
Adobe Corporation Secret Evil Lair, San Jose (Couresy of Adobe Stock Photo: Search Adobe Stock for millions of royalty-free stock images, photos, graphics, vectors, video footage, illustrations, templates, 3d assets, editorial assets and more)
Today I faced the similar problem of booting my computer with 22 GB of storage free, waiting 20 minutes, then finding my HD completely full after downloading some mysterious data in the background. Finally I decided to reboot my 5 year old Macbook Air to factory settings. It was time to start fresh.
Setting Up a Fresh Install of VS Code
It had been quite a while since I last set up a new install of VS Code. I don't think I had even looked at a new extension for it in months. So after installing XCode Tools, Node, and finally VS Code it was time to configure a fresh install.
Below are my favorite extensions which I believe are helpful for quickly writing Javascript and React code.
The necessities:
- Auto rename tag - Automatically renames pairs of tags together when you change the name of one.
- ES7 React/Redux/GraphQL/React-Native snippets - A load of helpful snippets to help you set up React documents quickly. My favorite is
rfceto quickly form a React functional component. - Live Server - I use this so much in web development I actually forgot it was not a native piece of software. Creates a local server to preview plain html, css, and Javascript pages.
- Prettier Code Formatter - A VS Code extension every Javascript programer I know uses to make code more readable.
Some nice-to-haves:
- Dracula Official - I've never used a VS Code theme before. This one is popular. It's time to shake things up.
- Import Cost - Display file size next to the import statement as you use them.
- Javascript ES6 code snippets - I'm nervous this is going to conflict with the ES7 snippet extension I mentioned previously, but I also know I had it before. Worth a shot.
- Path Intellisense - Autocomplete for file paths.
- Settings Sync - Supposedly you can export your settings in VS Code with one click with this but I clicked a whole lot and still don't have my settings in a nice little json file like I expected.
Anyway, that's it for now. A lightweight project after a long day doing vanilla web development for work. From now on I'm doing all my development work on a flash drive and saving to Github when I'm done. That ought to keep the Macbook Air working for at least another year.
You can also check out this excellent James Quick Youtube video where he sets up VS Code the way he likes for React. I watched this last year when I was first starting with the technology: link.
Top comments (0)