Your professional coding workflow (VS Code, GIT, Webpack, etc.)

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.

Thanks,
David

I recommend buying the “Git a Web Developer Job” course on Udemy, which covers a lot of what you need to know about workflow with respect to Node.js/NPM. It’s $10 for the next 5 hours (but I’m sure the sale will be on again soon if you miss it).

1 Like

Thank you astv99. That looks like exactly what I need.

  • VSCode does have very good Git support, but it’s important to know how to use it via the command line: + note most of the time you’re only going to be using one of about four commands (init once, then push, pull, checkout, merge). Git is just a way of keeping a history of every single change you’ve committed to a project, it lets you roll back to older versions, or branch off from your master version, do some stuff then possibly merge it back into master (it works by creating a folder, .git/, in your project, the git program reads and updates files inside that). It is cryptic and a pain in the ass, but if you’re working with other people on a codebase it’s invaluable - it means everybody can have a copy of the code locally, work on it individually, and safely join all that work back together. It’s not necessary if you’re working on your own, but it’s a very good thing to learn, and gives you a lot of security, you could think of it as a very powerful version of “save”. Pretty good list of tutorials etc here.
  • You’re right re NPM and JS packages - there is nothing stopping you just using script calls for simple stuff though, WebPack et al add significant complexity at first (though that is more than made up by the reduction in complexity as an app grows larger).
  • Major plus point of WebPack et al: JS modules are excellent, and make development hella easier (write some code in one file, export what you want, import it in another file). But until native support is good (a few years off I suspect), you have to use a bundler.
  • ESlint is the same as your C lint; in my experience it’s necessary for JS. Note that if you install the plugin, it will use a default, but you can specify your own preferred rules by adding an .eslintrc file - either at the root of your project, or higher up the directory structure. There are a lot of options, so if you want to play around then often useful to start with a pre-existing config like AirBnB’s. config and rules. Note as well that you can install it in your project using NPM, not just have it as an editor plugin; going forward, this means you can do things like run ESlint when pushing to Git, i.e. prevent a commit if something fails.
  • prettier plugin for VSCode; it is orthogonal to ESLint - lint takes care of the technical rules, prettier will reformat your code.
  • quokka is pretty magical, I’d advise that as it’ll give you live feedback on what’s happening in your JS. It’s a very good development tool.
  • The Chrome debugger is important, because it lets you work against a browser rather than just in the code; you’re right in that you don’t need it just for JS development, but as most stuff you’re doing is likely to be browser apps/sites, it becomes very useful to be able to open up and debug a project live in a browser from VSCode.
3 Likes

I’ve just finished Brad Schiff’s ‘Git a Web Developer Job’ course and I totally agree with astv99 that it is exactly what you are looking for. He walks you through using Git, Node, npm, Webpack, Gulp, PostCSS etc. and I found it exceptionally helpful for developing good habits and organizing slightly larger projects. You’ll also become a lot more comfortable with the command line by the end of the course.

Also, if you want a better idea of what is going on with Git, Udacity’s free intro to Git course isn’t bad.

Thanks GK-Hynes, and especially DanCouper for your detailed response. I watched a Udemy video that explained exactly how use Git, GitHub, and VS Code together. If anyone else reads this post and is looking the detail on how this is done then I highly recommend https://www.udemy.com/git-beginner-in-vs-code/learn/v4/overview.

I spent the day moving all my codepen code into VS Code and GitHub, so I now have a much better understanding of how this works now. I’m going through the ‘Git a Web Developer Job’ course now.

2 Likes