Dev > Linux > Create-React-App

{NVM, Node, NPM, Yarn, VSCode, ESLint, Flow} = this.post

{Babel, Webpack } = another.post // custom js project
{VirtualBox, Genymotion, Watchman} = another.post // react-native-app
{Expo, Android Studio} = another.post // expo app

Node Package Managers

Node Version Manager (NVM)
>Why: Node Version Manager allows easy updating of node versions, it also avoids permission errors as global packages are installed via ~/.nvm
> Install: https://github.com/creationix/nvm

Yarn

> Why: Yarn is the Facebook interpretation of NPM aimed at solving some issues such as speed, dependencies, cache management. With two Node Package Managers (NPM comes packaged with Node) they need to play nice. I use Yarn, however other packages may use NPM commands so it’s important that Yarn and NPM remain inter-operable.

> Install: https://yarnpkg.com/lang/en/docs/install/#debian-stable
The no-install-recommends switch avoid downloading node a second time
sudo apt-get install --no-install-recommends yarn

> Mac: Add Env. Variables To ~/.bash_profile

export NVM_DIR=”$HOME/.nvm”
. “/usr/local/opt/nvm/nvm.sh”
export PATH=”$(yarn global bin):$PATH”

Global Vs Local (Package Installation)

Stop… Look…. Review….

Yes, its easy to just install globally. You can execute directly at ease and it just works… at first… until it doesn’t. Installing a package globally causes an undocumented dependency. This loses the isolation that local packages provide, and prevent projects being quickly replicated.

My installed global packages are not required by my projects

[‘create-reactive-app’, ‘create-reactive-native-app’, react-native-cli, react-devtools]

Yarn has a global package.json, but this is outside the project scope. ~/.config/yarn/global/package.json

Global packages: Yarn/NPM

Yarn will often not detect NVM global directories when different versions of node are installed. Ensure NPM and Yarn are using the same directory structure.

This function in my ~/.bash_aliases queries both NPM and Yarn for the global directory location and a list of installed global packages.

Yarn Global Installation Directory

Update the yarn global directory to reflect NPM’s global directory.
yarn config set prefix $(npm config get prefix)

Visual Studio Code & Emmet Snippets

> Install: https://code.visualstudio.com/download

> Settings: File > Preferences > Settings

{
    "window.zoomLevel": 0,
    "files.exclude": {
        "node_modules": true,
        "**/.git": true,
        "**/.DS_Store": true,
        "jspm_packages" : true,
    },
    "eslint.packageManager": "yarn",
    "files.associations": {
        "*.js": "javascriptreact"
    },
    "emmet.extensionsPath": "~/.config/Code/User/snippets",
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "editor.snippetSuggestions": "top",
}

Additional Snippets File for Emmet

{
    "html": {
        "snippets": {
            "ull": "ul>li[id=${1} class=${2}]*2{ Will work with html, jade, haml and slim }",
            "oll": "<ol><li id=${1} class=${2}> Will only work in html </ol>",
            "ran": "{ Wrap plain text in curly braces }",
        }
    },
    "js": {
        "snippets": {
            "text": "<Text>${1}</Text>",
            "view": "<View>${1}</View>"
        }
    }
}

N.B. VSCode shortcut for second cursor is (Alt+Click), this keybinding is already set as a Gnome hotkey. To change this is (Super+Click) freeing up (Alt+Click) for VSCode run in terminal.
gsettings set org.gnome.desktop.wm.preferences mouse-button-modifier "<Super>"

ESLint

Ref: https://github.com/airbnb/javascript/issues/1589,
Ref: https://github.com/facebook/react-native/blob/master/.eslintrc

>Install:

yarn -D add eslint

>Run: eslint --init

Select ‘Use a popular style guide’
Select Airbnb
Select ‘Use React’
Select your options, pick JSON type
Allow it install packages

This will now install the following plugins

// Initial Install
eslint                   Core ESLint Package
eslint-loader            ESLint webpack loader
// Automatically Download
eslint-config-airbnb     AirBNB Style Guide
eslint-plugin-import     ES6+ import/export syntax
eslint-plugin-react      React Specific Linting Rules
eslint-plugin-jsx-a11y   Issues in your React.js elements
// Optional
babel-eslint             Support Flow type annotations

>Update: .eslintrc.json

{
    "env": {
        "node": true,
        "browser": true,
        "es6": true,
        "jest": true
    },
    "parser": "babel-eslint",
    "extends": "airbnb",
    "rules": { "react/jsx-filename-extension": [0] },
    "globals": {
        "__DEV__": true
    }
}

>Test: yarn eslint <dir>

Running ESLint via WebPack or VSCode

I prefer installing via VSCode as it has a seperate output window for errors. I prefer to reserve my WebPack terminal to view compile errors

WebPack

Install webpack loader

yarn -D add eslint-loader

Update package.json

module: {
      rules: [
        {
          enforce: "pre", // ensure runs before babel loader
          test: /\.js$/,
          exclude: /node_modules/,
          loader: "eslint-loader",
        },

VSCode

>Install: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Flow

>Install

yarn global add flow-bin // adds flow binary
flow init // creates flowconfig

VSCode

Add Flow Language Support VSCode Extension

Flow Language Support - Visual Studio Marketplace

Edit VSCode settings.json

"javascript.validate.enable": false,
"flow.enabled":true,

Webpack (Babel)

Install

yarn -D add babel-cli babel-preset-flow
yarn run flow

Add flow to .babelrc or webpack.config.js presets

{
  "presets": ["flow"]
}

https://flow.org/en/docs/install/