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
- SAP Managed Tags:
