HowTo SAPUI5 Function Declaration TypeScript ESLint in VSCode

[webi]

Hello Community,

I have switched from IntelliJ to VSCode for SAPUI5 development.

Now I have a problem with the references, typescript and jsdoc.

Structure and relevant files:

- project

--webapp

---controller

----Main.controller.js

---view

----Main.view.xml

-tsconfig.json

-.eslintrc

-.jsdoc.json

-package.json

SAPUI5 Version: 1.71.33

controller/Main.controller.js (sap declaration)

Here I used the standard function declaration, like the sap does.

By the way, i dont like these...

As you can see the event handler tells me that there is a reference. -> nice

Via the jsdoc I also have the parameter to type the event. However it does not find the getSoruce method.

WHY???

Why doesn't vscode get this???

Here is the reference in xml: view/Main.view.xml

The onBeforeVariantFetchSfb method is referencesable. -> nice

Another notation is the prototype declaration: controller/Main.controller.js

The same as above, referenceable but the getSoruce method is not detected.

I find notation a bit nicer.

The third notation: controller/Main.controller.js

This is the way I like it best, because it is the easiest way to define which methods are public and which are private.

But why does the referencing not work here???

WHY??? ;(

view/Main.view.xml

Method: onBeforeVariantFetchSfb is not referencable

Before I provide the other files, here is a summary of the questions:

• How can I include sapui5 controls and access the methods e.g. sap.ui.base.Event -> oEvent.getSource()?
• How can I make the referencing available with the third notation (function onBeforeVariantFetchSfb(){})?
• Which notation do you use and why?
• Which jsdoc/tsdoc annotations do you still use?
• Which annotations can I use above sap.ui.define? (@module controller/Main)
• Which annotation can I use for functions and make sense? (@memberof, @param, @listens etc.)

tsconfig.json

{
    "compilerOptions": {
        "module": "none",
        "target": "es6",
        "noEmit": true,
        "checkJs": true,
        "allowJs": true,
        "skipLibCheck": true,
        "types": ["@sapui5/ts-types"]
    },
    "exclude": ["node_modules", "bower_components", "jspm_packages", "tmp", "temp"]
}

.eslintrc

{
    "env": {
        "browser": true,
        "es6": true
    },
    "globals": {
        "sap": true,
        "jQuery": true
    },
    "parserOptions": {
        "ecmaVersion": 2020
    },
    "rules": {
        "no-cond-assign": 2,
        "no-console": 2,
        "no-constant-condition": 2,
        "comma-dangle": 2,
        "no-control-regex": 2,
        "no-debugger": 2,
        "no-dupe-keys": 2,
        "no-empty": 2,
        "no-empty-character-class": 2,
        "no-ex-assign": 2,
        "no-extra-boolean-cast": 1,
        "no-extra-semi": 2,
        "no-func-assign": 2,
        "no-inner-declarations": 2,
        "no-invalid-regexp": 2,
        "no-unsafe-negation": 2,
        "no-obj-calls": 2,
        "no-regex-spaces": 2,
        "no-sparse-arrays": 2,
        "no-unreachable": 2,
        "use-isnan": 2,
        "valid-jsdoc": [
            2,
            {
                "requireReturn": false
            }
        ],
        "valid-typeof": 2,
        "block-scoped-var": 2,
        "consistent-return": 1,
        "curly": 0,
        "default-case": 2,
        "dot-notation": 0,
        "eqeqeq": 2,
        "guard-for-in": 1,
        "no-alert": 2,
        "no-caller": 2,
        "no-div-regex": 2,
        "no-else-return": 2,
        "no-eq-null": 2,
        "no-eval": 2,
        "no-extend-native": 2,
        "no-fallthrough": 2,
        "no-floating-decimal": 2,
        "no-implied-eval": 2,
        "no-labels": 2,
        "no-iterator": 2,
        "no-lone-blocks": 2,
        "no-loop-func": 2,
        "no-multi-str": 2,
        "no-native-reassign": 2,
        "no-new-func": 2,
        "no-new-wrappers": 2,
        "no-octal": 2,
        "no-octal-escape": 2,
        "no-proto": 2,
        "no-redeclare": 2,
        "no-return-assign": 2,
        "no-script-url": 2,
        "no-self-compare": 2,
        "no-sequences": 2,
        "no-unused-expressions": 2,
        "no-warning-comments": 2,
        "no-with": 2,
        "radix": 2,
        "yoda": 2,
        "strict": 2,
        "no-catch-shadow": 2,
        "no-delete-var": 2,
        "no-label-var": 2,
        "no-shadow": 2,
        "no-shadow-restricted-names": 2,
        "no-undef": 2,
        "no-undefined": 0,
        "no-undef-init": 2,
        "no-unused-vars": 2,
        "no-use-before-define": 0,
        "handle-callback-err": 2,
        "no-mixed-requires": 2,
        "no-new-require": 2,
        "no-path-concat": 2,
        "no-process-exit": 2,
        "no-restricted-modules": 2,
        "no-sync": 2,
        "brace-style": 2,
        "camelcase": 0,
        "consistent-this": 2,
        "eol-last": 2,
        "func-names": 0,
        "new-cap": 2,
        "new-parens": 2,
        "no-nested-ternary": 2,
        "no-array-constructor": 2,
        "no-lonely-if": 2,
        "no-new-object": 2,
        "no-spaced-func": 2,
        "semi-spacing": 2,
        "no-trailing-spaces": 0,
        "no-underscore-dangle": 0,
        "no-mixed-spaces-and-tabs": 0,
        "quotes": 2,
        "quote-props": ["error", "consistent-as-needed"],
        "semi": 2,
        "keyword-spacing": 2,
        "space-infix-ops": 2,
        "space-unary-ops": 2,
        "max-nested-callbacks": 2,
        "one-var": 0,
        "wrap-regex": 2
    },
    "plugins": ["@sap/ui5-jsdocs"],
    "extends": ["plugin:@sap/ui5-jsdocs/recommended", "eslint:recommended"]
}

jsdoc.json

{
    "tags": {
        "allowUnknownTags": false
    },
    "source": {
        "include": ["webapp/"],
        "includePattern": ".+\\.js(doc)?$",
        "excludePattern": "(^|\\/|\\\\)_"
    },
    "plugins": ["plugins/markdown"],
    "templates": {
        "cleverLinks": true,
        "monospaceLinks": false
    },
    "opts": {
        "template": "jsdoc/docdash",
        "encoding": "utf8",
        "lenient": false,
        "sort": false,
        "recurse": true,
        "readme": "README.md"
    },
    "docdash": {
        "sort": false
    }
}

package.json

{
    "name": "project",
    "version": "1.0.0",
    "private": true,
    "sapux": true,
    "keywords": [
        "ui5",
        "openui5",
        "sapui5"
    ],
    "main": "webapp/index.html",
    "scripts": {
        "start": "fiori run --config ./ui5.yaml --open 'index.html?sap-client=100'",
        "start-local": "fiori run --config ./ui5-local.yaml --open 'test/flpSandboxMockServer.html?sap
        "start-noflp": "fiori run --open 'index.html?sap-client=100'",
        "build": "ui5 build -a --clean-dest --include-task=generateManifestBundle generateCachebusterInfo",
        "deploy": "npm run build && fiori deploy --config ui5-deploy.yaml && rimraf archive.zip && rim
        "deploy-grunt": "ui5 build --clean-dest && ui5Deploy.bat",
        "deploy-config": "fiori add deploy-config",
        "start-mock": "fiori run --open 'test/flpSandboxMockServer.html?sap-client=100#ui5testpmmeas-tile'",
        "undeploy": "fiori undeploy --config ui5-deploy.yaml",
        "lint": "eslint ./"
    },
    "devDependencies": {
        "@sap/eslint-plugin-ui5-jsdocs": "^2.0.5",
        "@sap/ux-specification": "UI5-1.71",
        "@sap/ux-ui5-tooling": "^1.3.7",
        "@sapui5/ts-types": "^1.84.20",
        "@ui5/cli": "latest",
        "@ui5/fs": "^2.0.6",
        "@ui5/logger": "^2.0.1",
        "eslint": "^8.0.1",
        "nwabap-ui5uploader": "^1.2.0",
        "prettier": "latest",
        "rimraf": "3.0.2",
        "ui5-middleware-livereload": "latest",
        "ui5-middleware-proxy-basicauth": "latest",
        "ui5-middleware-servestatic": "latest",
        "ui5-middleware-simpleproxy": "latest"
    },
    "ui5": {
        "dependencies": [
            "ui5-middleware-servestatic",
            "ui5-middleware-livereload",
            "ui5-middleware-proxy-basicauth",
            "ui5-middleware-simpleproxy",
            "@sap/ux-ui5-tooling"
        ]
    },
    "dependencies": {
        "keytar": "^7.2.0"
    },
    "prettier": {
        "trailingComma": "none",
        "printWidth": 100,
        "tabWidth": 4
    }
}

Are all my files correct or following the best practices?

Suggestions for improvement?

I look forward to your answers 🙂

Best regards
Markus