Configure ESLint & Prettier for a Typescript Project (Node.js)

Photo by Chris Ried on Unsplash

Install the latest version of Node.js and npm. Verify if successful installed:

node -v
npm -v

Initialise a Node.js project and install Typescript:

mkdir my-awesome-project
cd my-awesome-project

yarn init -y
yarn add -D ts-node typescript @types/node

Add the following in package.json, using which you quickly execute a Typescript file.

"scripts": {
  "start": "tsc index.ts; node index.js"
},

Create a Typescript source-code file named index.ts and add the following example code:

function findDuplicates(numberList): Set<number> {
  const result = new Set<number>();
  const hashSet = new Set<number>();

  numberList.forEach((item) => {
    if (hashSet.has(item)) {
      result.add(item);
    } else {
      hashSet.add(item);
    }
  });

  return result;
}

const testSet = [3, 4, 5, 1, 4, 5, 8, 4, 6];
console.log(findDuplicates(testSet));

Configure ESLint and Prettier

yarn add eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser --dev

Create .eslintrc

{
  "parser": "@typescript-eslint/parser",
  "extends": ["plugin:@typescript-eslint/recommended"],
  "parserOptions": { "ecmaVersion": 2018, "sourceType": "module" },
  "rules": {}
}

Install the ESLint and Prettier plugin in VS-Code. After that, open user settings of VSCode and add the following config:

// Set the default
"editor.formatOnSave": true,

// Enable per-language
"[javascript]": {
  "editor.formatOnSave": true,
},Visual studio code setting

That’s it 🎉 Start coding!