Hi all,
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.
Before we dive in, you should have a basic understanding of SAP CAP NodeJS, TypeScript and VSCode.
Below there's a list of the best VSCode Extensions for TypeScript development for UI5 and NodeJS to ease your developer life.
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.
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
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.
ESlint is installed by default when the command cds init is performed. Now we will set it up for TypeScript development.
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
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
The Better Comments extension will help you create more human-friendly comments in your code
Example
VSCode extension: Better Comments
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.
VSCode extension: Bookmarks
A basic spell checker that works well with code and documents.
The goal of this spell checker is to help catch common spelling errors.
VSCode extension: Code Spell Checker
VSCode extension: DotENV
This extensions allows you to edit csv files with an excel like table ui,
VSCode extension: Edit CSV
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
Visual Studio Code plugin that autocompletes filenames.
VSCode extension: Path Intellisense
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
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
VSCode extension: Rainbow CSV
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.
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.
Visual Studio Code plugin that autocompletes npm modules in import statements.
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.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
6 | |
5 | |
5 | |
4 | |
4 | |
4 | |
3 | |
3 | |
3 | |
3 |