I have completed the first two certificates on FCC, and I’m now starting the 3rd. The first two I just did in Codepen, but now I’m looking to put together a more professional development environment. To that end, I’ve downloaded VS Code, GIT, Nodejs, and npm. I just need a little help getting started/setup, and I’d also appreciate any pointers on best practices, or a description of your setup and workflow. Even links to a website or two that cover these issues would be helpful. Most of this is new to me.
In the past, I just used an editor like Notepad++ (or an IDE like Visual Studio), and I put together a project with just a few files – index.html, a css file or two, a .js file, and few directories to hold those files and things like images (and bigger projects basically just have more of the same). I’ve also used a simple Source Code control system whose repository sat on a server, and all the developers in the company checked code in and out of it (it was built into Visual Studio and was dead simple).
Now it has gotten WAY more complicated. The npm init command generates a whole bunch of files and directories with which I’m unfamiliar. I’m also not quite sure how GIT really works — I think it keeps my repository on my development box, and I create a new repository for each project, and I can push a copy of my repository out to my GitHub account, and/or to a company wide GitHub (or private server) if I want to. (Please correct me if I’m getting any of this wrong). I also believe that VS Code supports GIT out of the box, so I don’t need to use the cryptic command line interface (is this right?), but I’m not exactly sure what I need to do to get everything working. My understanding for all the files and directories created by npm init is that most developers don’t just link to a JS library anymore. Now the best practice is to download the libraries and keep them in your project, and use a tool like Webpack to figure out the parts of the libraries that are needed, dependencies, and versions that are needed for your projec,t and Webpack does all the magic of creating a deployable project. Other things handled by Webpack include minifying your code, and transpiling your code, and compiling SCSS into plain CSS, etc. There is also a json file used to controll all of this. That’s my general understanding anyway. I’m just not sure of the details on getting this all working, or even if my understanding is actually correct.
Also, which VS Code plugins should I be using? The two that look most useful are ESLint and Debugger for Chrome. I assume that ESLint is similar to the lint used in creating C programs. It catches problem code that might compile but would still have issues (e.g. variables not being used, or used but not declared, or divide by 0 errors, etc.). I’m not sure if the Debugger for Chrome is needed, as VS Code allows you to set breakpoints in your JS and step through it etc., but if having the Debugger for Chrome plugin would help my development then I’d like to know. Any other must haves?
I think I have a general idea on what I should be doing, but I’m real fuzzy on the details. I’m also not positive that I have a handle on the general concepts. I may not even be asking the right questions because I don’t know enough to realize which questions I should be asking.
Any advice, links to sites, YouTube videos, etc. would be greatly appreciated.