ESLint + Prettier + Node (Express) + Typescript

Configure Typescript

1. Install Dev Dependencies

npm i -D eslint-config-standard-with-typescript@latest @typescript-eslint/eslint-plugin eslint eslint-plugin-import eslint-plugin-n eslint-plugin-promise typescript eslint-plugin-node eslint-config-node

npm i -D prettier eslint-plugin-prettier eslint-config-prettier 

npm i -D nodemon jest supertest ts-jest ts-node @types/cors @types/express @types/jest @types/supertest

2. Create a .eslintrc.json file in your root folder

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "standard-with-typescript",
    "plugin:node/recommended",
    "plugin:prettier/recommended",
    "prettier"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": [
    "@typescript-eslint",
    "prettier"
  ],
  "rules": {
    "@typescript-eslint/no-var-requires": "off",
    "@typescript-eslint/no-misused-promises": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/prefer-nullish-coalescing": "off",
    "@typescript-eslint/strict-boolean-expressions": "off",
    "node/no-unsupported-features/es-syntax": "off",
    "node/no-unpublished-import": "off",
    "node/no-missing-import": "off",
    "node/no-missing-require": "off",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off",
    "array-callback-return": "off"
  }
}

Create .prettierrc.json

{
  "arrowParens": "always",
  "trailingComma": "es5",
  "singleQuote": false,
  "tabWidth": 2,
  "printWidth": 100,
  "semi": true,
  "endOfLine": "auto"
}

.prettierignore to let Prettier know what files/folders not to format

build

3. In the settings.json file

{
  // config related to code formatting
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false,
    "editor.defaultFormatter": null
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false,
    "editor.defaultFormatter": null
  },
  "javascript.validate.enable": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.tslint": true,
    "source.organizeImports": false
  },
  "eslint.alwaysShowStatus": true,
  // emmet
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

4. Finally, we have to add the scripts in the package.json

"scripts": {
   "start": "nodemon",
   "build": "tsc",
   "test": "jest",
   "test:watch": "jest --watchAll",
   "lint": "eslint src/**/*.{js,ts}",
   "lint:fix": "eslint --fix src/**/*.{js,ts}",
   "format": "prettier --check **/*.{js,ts}",
   "format:fix": "prettier --write src/**/*.{js,ts}"
},

ESLint + Prettier + Node (Express)

1. Install Dev Dependencies

npm i -D eslint eslint-config-airbnb-base eslint-plugin-node eslint-config-node

npm i -D prettier eslint-plugin-prettier eslint-config-prettier 

2. Create a .eslintrc.json file in your root folder

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "airbnb-base",
    "plugin:node/recommended",
    "plugin:prettier/recommended",
    "prettier"
  ],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    // "jest",
    // "security",
    "prettier"
  ],
  "rules": {
    "import/no-extraneous-dependencies": "off",
    "node/no-unsupported-features/es-syntax": "off",
    "no-console": "off",
    "func-names": "off",
    "no-underscore-dangle": "off",
    "consistent-return": "off",
    "jest/expect-expect": "off",
    "security/detect-object-injection": "off",
    "no-unused-vars": "off",
    "node/no-unpublished-require": "off",
    "no-undef": "off",
    "no-return-await": "off",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off",
    "array-callback-return": "off"
  }
}

Create .prettierrc.json

{
  "arrowParens": "always",
  "trailingComma": "es5",
  "tabWidth": 2,
  "singleQuote": false,
  "printWidth": 125,
  "semi": true,
  "endOfLine": "auto"
}

.prettierignore to let Prettier know what files/folders not to format

build

3. In the settings.json file

{
  // config related to code formatting
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false,
    "editor.defaultFormatter": null
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false,
    "editor.defaultFormatter": null
  },
  "javascript.validate.enable": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.tslint": true,
    "source.organizeImports": false
  },
  "eslint.alwaysShowStatus": true,
  // emmet
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

4. Finally, we have to add the scripts in the package.json

  "scripts": {
    "test": "jest",
    "test:watch": "jest --watchAll",
    "lint": "eslint src/**/*.{js,ts}",
    "lint:fix": "eslint --fix src/**/*.{js,ts}",
    "format": "prettier --check **/*.{js,ts}",
    "format:fix": "prettier --write src/**/*.{js,ts}"
  },

Heroku Cloud

/*
One time:
-----------
1. Heroku account open
2. Heroku software install

Every project:
---------------
1. git init
2. .gitignore (node_module, .env)
3. push everything to git
4. make sure you have this script:  "start": "node index.js",
5. make sure: put process.env.PORT in front of your port number
6. heroku login
7. heroku create (only one time for a project)
8. command: git push heroku main
9. .env variables set in heroku

Update:
---------
1. save everything and check locally
2. git add, git commit -m, git push
3. git push heroku main
*/

Node Initialize

1. index.js
2. npm init -y
3. C:\project\folder npm install express cors mongodb dotenv
4. create .env file in root directory
5. install package nodemon

index.js file

const express = require('express');
const { MongoClient } = require('mongodb');
const cors = require('cors');
require('dotenv').config()
const ObjectId = require('mongodb').ObjectId;

const app = express();
const port = process.env.PORT || 5000;

/**
 * Middleware functions
 */
// It used to enable CORS with various options.
app.use(cors());
// It parses incoming requests with JSON
app.use(express.json());


/**
 * Database Connection
 */
const uri = "mongodb+srv://${process.env.DB_USER}:${process.env.DB_PASS}@cluster0.juclx.mongodb.net/myFirstDatabase?retryWrites=true&w=majority";
//const uri = "mongodb+srv://dbuser1:9P2AGUUElq70TuhK@cluster0.juclx.mongodb.net/myFirstDatabase?retryWrites=true&w=majority";
const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true });

async function run() {
    try {
        await client.connect();
        // const database = client.db("carMechanic");
        // const servicesCollection = database.collection("services");

        console.log('Successfully database connected');
    }
    finally {
        // await client.close();
    }
}

run().catch(console.dir);

app.get('/', (req, res) => {
    res.send('Server is running');
});

app.listen(port, () => {
    console.log('Listening at', port);
});

package.json

  "scripts": {
    "start": "node index.js",
    "start-dev": "nodemon index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

In command line $ npm run start-dev