Local Dev Environment and Linting

Some additional configurations for effective lint tooling for our development environments.

JS is a relatively easy language to dive into because of its flexibility and 'looseness.' However, this is a 'double-edged' sword ⚔️ - it's also easy to write low quality, sloppy code that is rigid and brittle, as opposed to extensible and modular. This means that the code becomes very hard to work with when we want to extend some functionality; this is because the functionality is sort of all lumped together in a 'behemoth' codebase instead of being broken into small pieces of functionality.

Besides that, it's much harder to 'unlearn' than to learn - meaning that we should make 💯 effort to avoid common pitfalls and bad habits. This will surely increase your chances of being accepted on a dev team and revered and respected in your workplace. So...how do we do this? Thankfully, it's just a matter of using the Node Package Manager and the package registry to install and then configure some linting. Then we will coordinate with VS Code so that we will get 'yelled' at as we code if we do anything 'bad.'

Now, on most well-organized development teams, there is someone that sets forth coding standards that other developers should adhere to. This allows for better collaboration and for developers to essentially fill in for one another. It also means that, even as a solo developer, there will be some consistency such that when you review an older project after some time, it will be easier for you to make sense of what you wrote previously.

These 'style guides' can vary from company to company. For our class, we are just going to apply a pre-defined 'style guide' that will enforce some 'general best practices.' These are drawn from many industry leaders including Google and Airbnb, among others.

Specifically, we are going to be using npm and some hidden (remember: ls -a shows us hidden files in the terminal) 'rc' files to install and configure Stylelint and ESLint. We'll combine this with some VS Code extensions and add in some settings using JSON files to finish setting up our local dev environment. The result will be...better code with less frustration.

Manual Setup (Recommended to work through at some point)

Going through the process of learning to set up our project configuration from scratch can be a valuable lesson - after all, you will know more about the procedure and be able to be more comfortable with customizing this in the future. So, whether you do this now or later, you should go through this manual process at some point. However, if you just want to jump into learning JavaScript for now, that's understandable. Here's how to 'fork' and clone a template that will automate this process.

'FirstnameLastname' Directory

1. Navigate to your SavvyCoders directory using your CLI.

2. Make a new directory called FirstnameLastname (with YOUR first and last name, of course) inside the SavvyCoders directory. (HINT: mkdir FirstnameLastname).

3. Navigate into your Portfolio Project directory (HINT: cd FirstnameLastname).

This is where we will spend most of our time during in-class practice.

npm init

We are going to take advantage of npm - Node's Package Manager. This gives us access to a collection of JS-driven tooling that we can easily add/remove as needed on a project-by-project basis.

To accomplish this, from our FirstnameLastname directory, we will initialize our project to use npm. npm init -y. This will create a 'package.json' file that contains various details about your project - most importantly we will start updating this with some development dependencies.

As the name implies, these are packages that are project is dependent on for development. However, when we launch our web app, no user is going to be inspecting our JS for 'code quality.' In fact, the JS is going to be compressed with all of white spaces stripped out b/c computers don't need any of that; doing this helps keep the size of our web app to a minimum, allowing the site to load faster and minimizes our users' data use.

Anyway, go ahead and enter cat package.json and you can see what that files looks like.

JSON (JavaScript Object Notation)

First and foremost: JSON is not JavaScript. It is a universally accepted NOTATION (or text file) in which data is 'packaged up' in a format that is quite similar to JavaScript Objects.

Take a closer look at the formatting and make a mental note of some of these characteristics, as we will surely encounter them again and again.

Adding Development Dependencies to 'package.json'

Open up VS Code by entering: 'code .' in the appropriate directory.

Once there, hit 'cmd/ctrl + P' and search for 'package' - you should see 'package.json' pop right up and we can get to editing it.

Right before the closing }, kindly paste the following:

Paste this at the bottom of 'package.json,' but above the closing `{`

Kindly be sure that you have maintained the overall structure of the JSON - be sure that you have consistent opening { and }s. The purpose of this will become clear momentarily. For now...

Configuring ESLint (and Prettier)

Back in the terminal, create a file to house the configuration for ESLint. This will be a hidden JSON file: '.eslintrc.json' - note that the '.' preceding the file name indicates that it's a hidden file. touch .eslintrc.json - again, you should be in your 'FirstnameLastname' directory.

Open this file up in VS Code - 'cmd/ctrl + P' and then 'fuzzy find' 'eslint.' Paste the following in this blank file:

{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  }
}

The above configurations establishes that we want to use (Prettier)[prettier.io] to manage the 'formatting' of our code and that we want to use the recommended configuration from ESLint to enforce code quality and to help us catch syntax errors.

We are also specifying that we want to use some of the newest specifications for writing our JavaScript, namely es6 (AKA ES2015) and "ecmaVersion": 2018. We'll also want to use the newest "module" system, but that won't come up for a while.

npm install

Now, back in your terminal, run the following: npm i. This is shorthand for npm install. Essentially, 'npm' checks 'package.json' and reaches out to the npm registry. From there it retreives all of our dependencies - actually, devDependencies for us. All of these packages get installed into a directory called 'nodemodules.' In fact, it's so big that if you were to go back into VS Code, you get a warning about _git not being able to track all of the changes - let's resolve that posthaste by letting git know that we don't need it to worry about 'nodemodules and a few other folders that may come up later, while we are at it.

'.gitignore'

Create a hidden file called '.gitignore' from your terminal: touch .gitignore

Once again, open up this file in VS Code and this time paste the following:

.DS_Store
.cache
dist
node_modules
*.sw*

The other things listed here to be ignored by git are some Mac OS X things along with some directories that will get created much later when we build our Single Page Application (SPA).

Savvy Starter Repo

If you went through the manual process already, that's great! 👏 For the future (e.g. your Capstone Project), you may want to streamline the process by taking advantage of our 'Savvy Starter' repo.

Navigate to: Savvy Starter GitHub Repo.

Dropbox - File DeletedDropbox

Click 'Use this template'

Dropbox - File DeletedDropbox

Just enter a name such as 'savvy-coders-practice.'

Then click that big green button there at the bottom. This will fork a copy of this repo over to your GitHub account so that you will be able to push and pull to and from this repository.

Click 'Clone or download'.

Dropbox - File DeletedDropbox

Unless you have setup SSH on your machine (probably not!), be sure to select 'Use HTTPS'

Then click that clipboard 📋 icon to grab that link.

Navigate to 'Code/SavvyCoders' in your terminal. Then do: git clone and paste the link that should be saved to your clipboard. After that, enter another space and then the name of the directory that you want to use.

For example: git clone [e-mail]:manavm1990/savvy-coders-example.git ManavMisra 👈 In this example, I am using an SSH link - yours should probably start with HTTPS.

cd into this directory and do: npm i.

This is short for npm install, which instructs our globally installed Node Package Manager to check out that 'packge.json' and to install all of our development dependencies, such as ESLint, StyleLint, etc. This will throw a whole lot of stuff into 'nodemodules directory - things that we don't have to get directly involved with.

code . will open up VS Code in this directory. Look in the bottom right and you should see a prompt asking if you want to install some extensions. You should 'Install All' and accept any default prompts that come up.

Now, you should have all of the necessary linting integrated nicely with VS Code so you can get some 'automated help' with writing some 'clean code.' 🤓