Teaching myself how to use NPM on a local project – Part One

NPM – Node Package Manager

This is another technology that I have know about for a long time, but always feared it was too complex and or not necessary for what I do…  Well, I then found a project that I wanted to do and a starter theme that had all the ideas for my project, but it used NPM.  After a bit of research and contemplation, I decided to tear off the floaties and jump right in.  At first, all went swell.  I got my project up and running using some of the core NPM commands such as npm install, npm run build, and npm run start.  I got browser sync working and was super psyched at how things were going.  Then I started making changes to the code.  All was going well and I thought to myself, “Well, that wasn’t too hard at all.”  I then finished up for the time, saved, and closed out my project.

The next day, I was super excited to get back into it and opened up my IDE, opened the project, opened Terminal and typed in ‘npm run build’ and got all sorts of errors & warnings.  So, I copied the first error message and pasted it into Google and that was when I learned about linting and eslint.  Fortunately, I was able to find a great article on Medium.com all about it.  https://medium.com/the-node-js-collection/why-and-how-to-use-eslint-in-your-project-742d0bc61ed7

So after reading all about it and a few additional Stack Overflows, I realized that most of my issues were easily fixed by using the –fix command.  In fact, it was as easy as running the following:

./node_modules/.bin/eslint --fix path/to/file.js

Now, the article above used the ‘StrongLoop’ coding style and I didn’t want to run into additional issues by changing something without knowing the downstream implications, so I performed a “Fin in path” for “eslint-config-” and found that my project was set up with “eslint-config-standard” in the package.json file and I left it alone (for now).

Note, the above was to fix errors or warnings in a .js file.  The concept is the same for .css but the command can be slightly different depending on your projects configuration.  Ie. Prettier, Stylelint, Stickler…  I will try to expand on this in a future post, perhaps Part Two.  Stay tuned.