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.