dotfiles/lang/javascript

ECMAScript the language formerly known as JavaScript Tooling

Contents

• Working with Node.js
• package.json
• Working with ESLint
• Setup ESLint to play nice with VS Code
• Using Node.js with Neovim
• Working with NPM
  • NPM Security
• Working with Yarn
  • Working with Yarn on Debian
• Useful Links
• TODOs

JavaScript Style Guidelines 🔝

This information can be considered highly opinionated;

• I prefer to use ESLint to lint JavaScript files contained through various JavaScript files and node projects I work with.
• Looking at the source of project maintained by TC39 and hosted on GitHub it appears they are using semi colons throughout the project, as well as the guys and gals at facebook are using semi colons throughout React.js, that said, I'm going to do my best to start using semi colons throughout various node projects I work with.

Working with Node.js 🔝

Node.js v10.0.0 ships with NPM v5.6.0 if downloading the .pkg install.

In the past certain NPM modules / packages can create a `.v8flags.{version}.{md5-hash-of-username}.json within the users home directory. These files can safely be deleted. see this for more information.

Working with nvm for managing different versions of Node.js

To set the default version of Node.js

nvm alias default 10.15.1

Troubleshooting with NVM

When working with a Node.js project and editing files with Neovim and having Coc.nvim installed a Neovim plugin I was running into the below error message when switching between files using denite.

Error Message

[coc.nvim] failed to load ESLint...

A possible remedy for the above error message is to install ESLint globally using npm especially if one using nvm to manage different versions of Node.js

package.json 🔝

What are the differences between devDependencies and dependencies in package.json
dependencies are installed for both production and development.

see 🙈 for a more detailed explanation.

Linting in JavaScript 🔝

Two popular linters for JavaScript are ESLint & JSHint. ESLint is more commonly used for linting JavaScript source files, and module files located in Node.js projects. That said, JSHint can lint JSON files out of the box, so when editing a .eslintrc.json file use jshint. ESLint uses a modular architecture and can lint JSON files, but requires an addtional NPM module be installed.

Working with ESlint 🔝

To setup a $USER, ie. a global configuration file for eslint for a particular user that will be used for pretty much every Node.js project, or .js / .jsx file, create ~/.eslintrc, which can be formatted using JSON. 👍

If a particular ECMAScript project does not contain a local eslint configuration file, then eslint will traverse up the file heirarchy to look for a configuration file until eslint reaches the $USER's home directory.

To setup a ECMAScript project to use a local eslint configuration file, eslint provides a wizard by running the below command in the project root.

eslint --init

Setup ESLint to play nice with VS Code 🔝

To get VS Code and ESLint to play nice with each other

1. Install ESLint globally using yarn or npm, whichever you are using to manage global npmjs.com packages / modules.
2. A global .eslintrc file can be set up in $HOME or a local .eslintrc.{js,json,yaml} file can be setup in the project root.
3. Install standard ie. standardjs.com

yarn global add standard eslint-config-standard

If installing globally using yarn, a couple of settings will have to be added to VS Code's settings.json.

Ex

// use global eslint installed via yarn
"eslint.packageManager": "yarn",
"eslint.enable": true

1. Install unmet peer dependenices globally or locally using preferred package manager.

Using Node.js with Neovim 🔝

To install the Node.js provider package for Neovim make sure the neovim package has been installed using a Node.js package manager.

npm -g i neovim
yarn global add neovim

Working with NPM 🔝

To update NPM to latest stable release

npm install npm@latest -g

To get a more detailed print out of the components working with npm ie. uv, openssl, node, v8, etc, etc

npm version

To print / show the latest version of a NPM package

npm show [pkg] version

to list available versions of a npm package, ie. react

npm info react versions

To install a NPM package / module globally for a user on the system that should be accessible via the $PATH

If the NPM prefix is not set, the homebrew version of Nodejs / NPM will put global packages with in /usr/local/bin

npm install -g [name-of-package]

ie.

npm install -g create-react-app

To uninstall a npm package / module from a project.

npm uninstall [module] --save

To list all globally installed packages for a node instance

npm -g ls --depth=0

NPM troubleshooting 🔝

When running into an issue such as the one below,

npm WARN bootstrap@4.1.3 requires a peer of popper.js@^1.14.3 but none is installed. You must install peer dependencies yourself.

The quick fix, trash the node_modules directory and then recreate 🧙‍♂️ it.

rm -rf ./node_modules
npm install

NPM security 🔝

To update a vulnerable package contained within a package.json file

npm install mr-fancy-package@42.0 --save

The above command will explicity define the package within the package.json file.

Working with Yarn 🔝

⚠️ Before installing a global package with yarn installed via homebrew, make sure the global bin and global prefix have been set, ie.

Yarn Global Package / Module setup 🔝

🚨 When working with global sub command in yarn the global sub command must be the first argument after the yarn command, ie.

Ex

yarn global [add] [package]

yarn global bin

To set the global prefix where yarn global packages are installed

yarn config set prefix $HOME/.yarn

The above configuration command will create bin dir within global dir, ie. $HOME/.yarn/ to store the symlinks to the globally installed binaries.

The above settings can be verified / checked with

yarn config get prefix

To print the path where globally installed packages via yarn are located on the system.

yarn global bin

Only the prefix needs to be set in order to set the path for global packages installed via yarn

For more information about working with global in yarn see

Yarn Global Package / Module Installation 🔝

To install a package / module globally using yarn

yarn global add [mr-fancy-node-module]

ie.

yarn global add create-react-app

The above installation command should place the create-react-app binary within ~/.config/yarn/bin/

The dependencies, ie. node_modules for create-react-app should be within ~/.config/yarn/global/node_modules

To list globally installed modules ie. packages within yarn

yarn global list

Yarn Upgrade a Global Package / Module 🔝

To upgrade a global package / module installed with yarn

• First check to if there are any outdated global packages

yarn global upgrade-interactive

• Select which global packages you would like to update

To upgrade a specific npm module / package using yarn

yarn upgrade package@version

Ex

yarn upgrade marked@0.3.9

To add a package as a development dependency, see 🙈

yarn add <package> [-D/--dev]

Troubleshooting yarn 🔝

yarn as of July 31 2018 has difficulty updating packages listed in package.json, but npm-check-updates does a decent job in keeping packages updated in the package.json

See the above link for working with npm-check-updates / ncu

Working with Yarn on Debian 🔝

If the below error message arises run the command below the error message.

W: An error occurred during the signature verification. The repository is not updated and the previous index files will be used. GPG error: yarnpkg.com stable InRelease: The following signatures couldn't be verified because the public key is not available: NO_PUBKEY

wget -qO - https://raw.githubusercontent.com/yarnpkg/releases/gh-pages/debian/pubkey.gpg | sudo apt-key add -

Working with project based packages / dependencies 🔝

To check for outdated packages / modules on a project basis

npm outdated

The above command needs to be run within the project root, ie. the directory that contains pacakge.json

To upgrade the outdated packages.

npm upgrade [pkgname]

Useful Links 🔝

• YouTube JavaScript's event loop

react 🔝

• facebook.com future of react

Tutorials 🔝

• medium.com building a CLI app using node.js
• codeburst.io 25 Useful Node.js Tutorials March 13, 2018
• All about Node.js
• Using OAuth with Express & Node

Web Scrapping 🔝

• A Guide to Automating & Scraping the Web with JavaScript

real-time 🔝

• Going real time with Socket.IO
• medium Building a Node.js WebSocket Chat App with Socket.io and React

V8 🔝

• Node.js V8 internals

GraphQL 🔝

• How GraphQL Replaces Redux
• Securing a GraphQL API from malicious queries

TODOs 🔝

• device a a shell script to generate a file that can be piped into yarn to install all global packages listed within the file, similar to how brew installs packages listed in a file
• Review all links recently added.
• flesh out TOC
• organize contents of the doc a little better time permitting