New JavaScript Project Setup

new-js-project-setup.md

New JavaScript Project Setup

Package.json

For NodeJS:

"start": "NODE_ENV=production node src/app.js",
"dev": "NODE_ENV=development DEBUG=knex2:query PORT=4000 nodemon src/app.js",
"test:watch": "NODE_ENV=test DEBUG=knex2:query jest --runInBand --watch",
"test:ci": "NODE_ENV=test DEBUG=knex2:query jest --runInBand --unhandled-rejections=strict --forceExit",
"test:coverage": "NODE_ENV=test DEBUG=knex2:query jest --runInBand --coverage --unhandled-rejections=strict --forceExit",
"prettier:check": "prettier --check .",
"prettier:fix": "prettier --write .",
"eslint:check": "eslint src",
"eslint:fix": "eslint --fix src",
"code:check": "yarn prettier:check && yarn eslint:check && yarn test:ci",

For React:

"test:watch": "react-scripts test",
"test:ci": "CI=true react-scripts test",
"prettier:check": "prettier --check .",
"prettier:fix": "prettier --write .",
"eslint:check": "eslint --ext .js --ext .jsx src",
"eslint:fix": "eslint --ext .js --ext .jsx --fix src",
"code:check": "yarn prettier:check && yarn eslint:check"

Install and configure prettier and eslint

touch .prettierrc
touch .prettierignore
touch .eslintrc.json
yarn add -D prettier
yarn add -D eslint-config-prettier eslint-plugin-prettier
npx install-peerdeps --dev eslint-config-airbnb
yarn add --dev eslint eslint-plugin-jest
yarn add -D husky

.prettierrc

For NodeJS:

{
    "arrowParens": "avoid",
    "bracketSpacing": true,
    "endOfLine": "auto",
    "printWidth": 80,
    "quoteProps": "as-needed",
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "none",
    "useTabs": false
}

For React:

{
    "arrowParens": "avoid",
    "bracketSpacing": true,
    "endOfLine": "auto",
    "printWidth": 80,
    "quoteProps": "as-needed",
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "none",
    "useTabs": false,
    "jsxSingleQuote": false,
    "jsxBracketSameLine": true,
    "semi": false
}

.prettierignore

node_modules
build

.eslintrc.json

For NodeJS

{
    "extends": ["airbnb", "prettier"],
    "plugins": ["prettier", "jest"],
    "env": {
        "jest/globals": true
    },
    "rules": {
        "prettier/prettier": ["error"],
        "no-console": "error",
        "camelcase": "off",
        "no-plusplus": [
            "error",
            {
                "allowForLoopAfterthoughts": true
            }
        ]
    }
}

For React:

{
    "extends": ["airbnb", "prettier"],
    "plugins": ["prettier", "jest"],
    "env": {
        "jest/globals": true,
        "browser": true,
        "node": true
    },
    "parserOptions": {
        "ecmaVersion": 11
    },
    "rules": {
        "prettier/prettier": ["error"],
        "no-console": "error",
        "camelcase": "off",
        "jest/no-disabled-tests": "warn",
        "jest/no-focused-tests": "error",
        "jest/no-identical-title": "error",
        "jest/prefer-to-have-length": "warn",
        "jest/valid-expect": "error",
        "react/react-in-jsx-scope": "off",
        "react/prop-types": "off",
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
        "jsx-a11y/label-has-associated-control": "off",
        "jsx-a11y/click-events-have-key-events": "off",
        "jsx-a11y/no-static-element-interactions": "off",
        "jsx-a11y/anchor-is-valid": "off"
    }
}

VS Code Plugins

• Prettier - Code formatter
• ESLint
• Formatting Toggle