JS Toolset

Abstract

---

• This is how a 10X developer starts his/her JS project

Setup Steps:

• NVM
• Install Code Quality Assurance Tools
• Install Git related Tools
• Integrate Code Quality Assurance Tools with Git

NVM

---

• Stands for Node Version Manager
• You can install here
• Includes Node.js, NPM and NPX

NPX

• Stands for Node Package eXecute
• A package runner tool that comes bundled with NPM
• Allows you to execute any package from the npm registry without having to install it globally or locally using NPM which may pollute your local or global node_modules directory

Install and Config Code Quality Assurance Tools

---

• What are code quality assurance tools

2 code quality assurance tools:

• oxlint
• prettier

oxlint

• A JS Linter
• Setup script

#!/bin/bash
npm add -D oxlint # Add oxlint to package.json
 
# Specify path/file to ignore
# In this case, we are ignoring all files in node_modules
touch .eslintignore
echo node_modules > .eslintignore

• Run the linter with npx oxlint
• Refer to oxlint official docs for more configuration information

Info

At the current stage, oxlint is not intended to fully replace ESLint; it serves as an enhancement when ESLint’s slowness becomes a bottleneck in your workflow.

We recommend running oxlint before ESLint in your lint-staged or CI setup for a quicker feedback loop, considering it only takes a few seconds to run on large codebases.

prettier

• A Formatter
• Setup script

#!/bin/bash
npm install --save-dev --save-exact prettier # Add oxlint to package.json
 
touch .prettierignore # Specify path/file to ignore
touch .prettierrc # Config prettier

• Run npx prettier . --write to format all the files in current directory recursively
• Refer to prettier official docs for more configuration information

Install Git related Tools

---

• Tools that help Code Quality Assurance Tools to leverage on the power of Git

2 git related tools to run the quality assurance tools automatically:

• husky
• lint-staged

husky

• A tool to auto run the prettier & oxlint when making a git commit
• Configuration details see here

lint-staged

• A tool usually integrates with husky to ensure the Code Quality Assurance Tools like prettier & oxlint only run on current staged files to fasten the process of each commit. Since only the staged files are going to be pushed to the database, no point to run the tools on all files to slow the current commit

Integrate Code Quality Assurance Tools with Git

---

.husky/pre-commit

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
 
npm run pre-commit

• The idea is to have husky to trigger pre-commit script which runs the pre-commit npm script

package.json

{
  "name": "authentication",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node ./dbInit.js && node index.js",
    "dev": "rm db.json && node ./dbInit.js && nodemon index.js",
    "prepare": "husky install",
    "pre-commit": "lint-staged --verbose"
  },
  "author": "xy241",
  "license": "ISC",
  "type": "module",
  "dependencies": {
    "express": "^4.18.2",
    "lowdb": "^7.0.1"
  },
  "devDependencies": {
    "husky": "^8.0.0",
    "lint-staged": "^15.2.0",
    "nodemon": "^3.0.2",
    "oxlint": "^0.1.2",
    "prettier": "3.1.1"
  },
  "lint-staged": {
    "*": [
      "./codeAssurance.sh"
    ]
  }
}

• The pre-commit npm script triggers the lint-staged, --verbose means we want to see the output of the code quality assurance tools, line 11
• The lint-staged configuration is specified at line 27-31
• The lint-staged runs the code quality assurance tools on all the staged files via codeAssurance.sh

codeAssurance.sh

#!/bin/bash
set -e
 
echo -e "\033[1m=== Start of Code Quality Assurance Tools ===\n \033[0m"
 
echo -e "\033[1;32m🔎 Perform oxlint Linter: \033[0m"
npx oxlint
 
echo -e "\n\033[1;32m💅 Perform Prettier Formatting: \033[0m"
npx prettier . --write
 
echo -e "\n\033[1;32m👍 Code Quality Assurance Tools Passed! \033[0m"

• The codeAssurance.sh basically run all the code quality assurance tools we configured above
• Remember to set -e at line 2, refer to Bash Script Exit Code for more details