SAP CAP: Best VSCode extensions for TypeScript development (UI5 & NodeJS)

[Dragolea]

Hi all,

Introduction

Many of us are working with SAP CAP (Node.js with TypeScript) for our projects. (We) Developers prefer always to have the best setup for our development and VSCode community provided us with all the tools that we need.

Prerequisites

Before we dive in, you should have a basic understanding of SAP CAP NodeJS, TypeScript and VSCode.

VSCode extensions

Below there's a list of the best VSCode Extensions for TypeScript development for UI5 and NodeJS to ease your developer life. 

1. Prettier

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Installation

1. To have same uniform programming style on the project for all developers we need also to add it to npm package.json :

npm install --save-dev --save-exact prettier

2. We need to create 2 prettier config files the .prettierrc and .prettierignore

node --eval "fs.writeFileSync('.prettierrc','{}\n')" 
node --eval "fs.writeFileSync('.prettierignore','{}\n')"

3. We add some prettier configs like : 

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 120,
  "tabWidth": 2
}

4. We add a new script in the package.json

"prettier": "npx prettier . --write"

5. Run the prettier :

npm run prettier

SAVE ON FORMAT OPTION

1. We need firstly to install the VSCode: Prettier 

2. We need to check VSCode - Settings like below, this setting will call Prettier everytime when we save our files.

2. ESLint

ESlint is installed by default when the command cds init is performed. Now we will set it up for TypeScript development.

Installation

npm init @eslint/config

Above command will prompt a list of messages, and we choose option 3

2. Which type of modules does your project use  : None of these

3. Which framework does your project use?  : None of these

4. Does your project use TypeScript? : Yes

5. Where does your code runs? : Node

6. Which style guide do you want to follow? : Standard

7. Would you like to install them now? : Yes

Do the following steps : 

1. Remove the .eslintrc.json

2. Add the following to .eslintrc

{
    "env": {
        "browser": true,
        "es2022": true,
        "node": true,
        "jest": true,
        "mocha": true
    },
    "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "standard-with-typescript", "prettier"],
    "parserOptions": {
        "ecmaVersion": "latest"
    },
    "globals": {
        "SELECT": true,
        "INSERT": true,
        "UPSERT": true,
        "UPDATE": true,
        "DELETE": true,
        "CREATE": true,
        "DROP": true,
        "CDL": true,
        "CQL": true,
        "CXL": true,
        "cds": true
    },
    "rules": {
    }
}

3. Add the following script to package.json

"eslint": "npx eslint ."

4. Run the eslint 

npm run eslint

3. Better Comments

The Better Comments extension will help you create more human-friendly comments in your code

Example

Installation

VSCode extension: Better Comments 

4. Bookmarks

It helps you to navigate in your code, moving between important positions easily and quickly. No more need to search for code. It also supports a set of selection commands, which allows you to select bookmarked lines and regions between bookmarked lines. It's really useful for log file analysis.

Installation

VSCode extension: Bookmarks 

5 Code Spell Checker

A basic spell checker that works well with code and documents.

The goal of this spell checker is to help catch common spelling errors.

Installation

VSCode extension: Code Spell Checker 

6. DotENV

Installation

VSCode extension: DotENV 

7. Edit CSV

This extensions allows you to edit csv files with an excel like table ui,

VSCode extension: Edit CSV 

 8.Error Lens

ErrorLens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and also prints the message inline.

VSCode extension: Error Lens 

11. Path Intellisense

Visual Studio Code plugin that autocompletes filenames.

VSCode extension: Path Intellisense 

12. Pretty TypeScript Errors

TypeScript errors become messier as the complexity of types increases. At some point, TypeScript will throw on you a **bleep** heap of parentheses and "...".
This extension will help you understand what's going on. For example, in this relatively simple error:

VSCode extension: Pretty TypeScript Errors 

13. Project Manager

It helps you to easily access your projects, no matter where they are located. Don't miss those important projects anymore.

VSCode extension: Project manager 

14. Rainbow CSV

VSCode extension: Rainbow CSV 

15. TODO Highlight

Highlight TODO, FIXME and other annotations within your code.

Sometimes you forget to review the TODOs you've added while coding before you publish the code to production. So I've been wanting an extension for a long time that highlights them and reminds me that there are notes or things not done yet.

16. npm Outdated

Displays a diagnostic message in package.json files for packages which have newer versions available as well as a code action to quickly update packages to their latest version.

17 .npm Intellisense

Visual Studio Code plugin that autocompletes npm modules in import statements.

Conclusion

In conclusion, all above VSCode extensions will make you feel much more confortable writing code, by automatize code formatting, check spelling mistakes and also common style of writing code.

Additional Resources

You can have a look at this following .devcontainer Github repository  which uses VSCode and Docker and has all above VSCode extensions installed by default in the container.

Sharing experience from developers to developers by ABS & DxFrontier team