sap / ui5-linter Goto Github PK
View Code? Open in Web Editor NEWA static code analysis tool for UI5
License: Apache License 2.0
A static code analysis tool for UI5
License: Apache License 2.0
Provide an ESLint plugin to easily integrate UI5 linter checks into existing development workflows.
Or why this was not our initial design goal
manifest.json
or ui5.yaml
, we would need to provide a set of custom processors or even a custom parser
typescript
(required for linting and transpilation), while typescript-eslint requires projects to define the dependency themselvesui5lint
should just work for the majority of today's UI5 projects. Projects should typically not need to be modifiedRunning the linter today, you can specify specific files, but not folders to lint. It doesn't make sense to expand file paths to allow folders, it does make sense that we should be able to set an ignore file to ignore generated files like the component.js
for instance, or 3rd-party code and libraries.
The workaround right now is to specify every individual file in the project to be linted, which is a bit tedious but works for now.
I would prefer to be able to set a global ignore file for use across projects.
UI5 linter should process our project without running into an internal error.
When executing the UI5 linter on one of our projects, we see a "Maximum call stack size exceeded" error.
I can't share internal URLs here. I'll provide the information via a different channel.
unknown
Linux (no further details known)
n/a
nothing
Run UI5 linter on project ######## in repository ######
...
⚠️ Process Failed With Error
Error Message:
Failed to produce report for ###################################: Maximum call stack size exceeded
For details, execute the same command again with an additional '--verbose' parameter
at ChildProcess.exithandler (node:child_process:422:12)
at ChildProcess.emit (node:events:518:28)
at maybeClose (node:internal/child_process:1105:16)
at ChildProcess._handle.onexit (node:internal/child_process:305:5) {
code: 2,
killed: false,
signal: null,
cmd: 'npx -c ############################/node_modules/@ui5/linter/bin/ui5lint.js --format json --details'
I´d like to run the ui5-linter for my Component. Out of the box this does not work because of the type: module
in my ui5.yaml
file. Because of this i think this is more a feature request then bug.
Recreate the problem:
git clone https://github.com/spreadsheetimporter/ui5-cc-spreadsheetimporter
cd packages/ui5-cc-spreadsheetimporter
ui5lint
Output when i run ui5lint
:
⚠️ Process Failed With Error
Error Message:
Projects of type module have more than one source path
Error comes from https://github.com/SAP/ui5-project/blob/a085232514ebdd8ad11f5fd49323b0c0bb5c240b/lib/specifications/types/Module.js#L31
I use the middleware ui5-middleware-ui5
to use the Component in my UI5 App, so use a special yaml file for this anyway ui5-serve.yaml change the type to application
.
Most simple solution would that there would be a option so i can use the ui5-serve.yaml
instead of the default ui5.yaml
. I did not see the option in the cli yet.
Something like ui5lint --configFile ui5-serve.yaml
I think i need to change my type in the ui5.yaml
anyway, because application
fits better to my project, right?
Either way, a option to change the default yaml file would be great
When saving the results of the linter to a file the ANSI codes should always be removed.
When saving the results of the linter to a file within a CI pipeline on AzDO the ANSI codes were not removed. Running the same command on the terminal (MacOS 13.2.1 + zsh/bash) the ANSI codes are removed and everything is fine.
We are writing the lint results back to a pull request in AzDO and this is how it is looking like (without the sed workaround being applied)
I did not yet check any other CI/CD platform like GitHub Actions, Jenkins, etc.
pool:
vmImage: 'ubuntu-latest'
steps:
- script: |
corepack enable
corepack prepare pnpm@latest-9 --activate
displayName: "🛠 Setup pnpm..."
- script: >
pnpm install -D @ui5/[email protected]
displayName: "🛠 Install dependencies..."
- script:
npx ui5lint --details &> $(Build.ArtifactStagingDirectory)/ui5lint-results.txt || true
# sed 's/\x1b\[[0-9;]*m//g' $(Build.ArtifactStagingDirectory)/ui5lint-results.txt > $(Build.ArtifactStagingDirectory)/ui5lint-results-no-color.txt # workaround
displayName: "🔍 Run ui5lint..."
- task: PublishBuildArtifacts@1
displayName: "📦 Publish build..."
pnpm 9.4.0
Ubuntu 22.04
When running the linter on a large project, the user has no feedback for progress during execution of linter.
I personally was not sure if the linter was actually running, or if it was stuck.
I was running a linter on a large folder structure, and linting took ~1.5 minutes (10k+ files)
Having no progress indication also is visible for smaller projects/ folders.
To easily get a sample project where linting also takes several seconds i used https://github.com/SAP/generator-easy-ui5 to get a fresh project.
Running ui5lint in this sample project also takes ~5seconds and no progress indication is visible.
It would be great to have some sort of visible progress indicator to know that linting is in progress.
Some options i can think of are:
Steps to reproduce:
I added ui5linter to my CAP project using
npm install --save-dev @ui5/linter
There is an error when building the CAP project:
mbt build -p=cf
Error Message (root cause)
Unsupported platform for @esbuild/[email protected]: wanted {"os":"aix","cpu":"ppc64"} (current: {"os":"win32","cpu":"x64"})
Error Message (full)
[2024-03-13 18:56:19] INFO executing the "npm clean-install --production" command... npm WARN config production Use
--omit=dev instead. .npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '@ui5/[email protected]', npm WARN EBADENGINE required: { node: '^18.14.2 || ^20.11.0 || >=21.2.0', npm: '>= 9.5.0' }, npm WARN EBADENGINE current: { node: 'v20.9.0', npm: '10.4.0' } npm WARN EBADENGINE } npm ERR! code EBADPLATFORM npm ERR! notsup Unsupported platform for @esbuild/[email protected]: wanted {"os":"aix","cpu":"ppc64"} (current: {"os":"win32","cpu":"x64"}) npm ERR! notsup Valid os: aix npm ERR! notsup Actual os: win32 npm ERR! notsup Valid cpu: ppc64 npm ERR! notsup Actual cpu: x64
Reason:
In package-lock.json there is following dependency which came from ui5linter installation. This esbuild library has "aix" defined as operating system (os):
"node_modules/@ui5/linter/node_modules/@esbuild/aix-ppc64": { "version": "0.19.12", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz", "integrity": "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==", "cpu": [ "ppc64" ], "extraneous": true, "os": [ "aix" ], "engines": { "node": ">=12" } }
The linter should not complain about allowed globals, no matter how they are accessed.
The linter complains about calls to sap.ui.define
or other allowed globals when they are accessed via globalThis
or one of the other names that refer to the global JavaScript context (e.g. self
, window
, top
, parent
, top level this
).
Example:
if (typeof self.sap?.ui?.define === 'function') {
sap.ui.define(['sap/ui/thirdparty/URI'], factory);
(found in sap/ui/documentation/sdk/util/Resources.js)
Hi guys,
I got this one:
"idVehicleTableTitle" should match pattern: "/^idVehicleItems.*?Title$/"TagAttributeLinter(UI5plugin)
How can I change/disable existing checks?
Thanks,
Jan
Declaring a dependency to a deprecated module (e.g. via sap.ui.define) should yield an error, even when no API of that module is being used.
Declaring a dependency to a deprecated module which exports an interface (e.g. sap.ui.core.Configuration) does not yield an error.
I suspect that this is related to check for symbol.valueDeclaration
and the different behavior for interfaces.
The valueDeclaration
can be undefined
. This happens when there are no declarations associated with a symbol that could hold a value. If a symbol only represents an interface declaration, valueDeclaration
would be undefined
because an interface itself cannot hold a value. The code should probably check for all declarations of the symbol (symbol.getDeclarations()
).
Run ui5lint
for this code:
sap.ui.define(["sap/ui/core/Configuration"]);
0.2.1
v20.11.1
10.2.4
macOS 14.4.1
UI5 linter report:
0 problems (0 errors, 0 warnings)
Findings should be reported at the exact place where they are in the code.
More specifically, findings for different functions should not be reported at the exact same line/column position.
Some tools or IDEs only display one finding per line/column, which currently prevents some findings from being displayed.
One example of this are the tasks in VS Code, which can be used to display problems based on the output of a task, like running ui5lint
.
The code
sap.ui.getCore().attachInit(() => {});
should create two findings
Call to deprecated function 'getCore' (sap.ui.getCore)
pointing to column 8
(getCore
)Call to deprecated function 'attachInit' of class 'Core'
pointing to column 18
(attachInit
)[
{
"filePath": "webapp/Test.js",
"messages": [
{
"ruleId": "ui5-linter-no-deprecated-api",
"severity": 2,
"line": 1,
"column": 18,
"message": "Call to deprecated function 'attachInit' of class 'Core'"
},
{
"ruleId": "ui5-linter-no-deprecated-api",
"severity": 2,
"line": 1,
"column": 8,
"message": "Call to deprecated function 'getCore' (sap.ui.getCore)"
}
],
"errorCount": 2,
"warningCount": 0,
"fatalErrorCount": 0
}
]
Both findings point to column 1
[
{
"filePath": "webapp/Test.js",
"messages": [
{
"ruleId": "ui5-linter-no-deprecated-api",
"severity": 2,
"line": 1,
"column": 1,
"message": "Call to deprecated function 'attachInit' of class 'Core'"
},
{
"ruleId": "ui5-linter-no-deprecated-api",
"severity": 2,
"line": 1,
"column": 1,
"message": "Call to deprecated function 'getCore' (sap.ui.getCore)"
}
],
"errorCount": 2,
"warningCount": 0,
"fatalErrorCount": 0
}
]
See example above.
0.2.2
20.12.2
10.5.0
macOS
unknown
nothing
See above.
When running the linter in a newly generated Fiori elements application then an error is shown in the Component.js
. The error indicates that the component needs to implement the interface sap.ui.core.IAsyncContentCreation
, however, the interface is already implemented by the base class (sap/fe/core/AppComponent
), therefore, it shouldn't be necessary.
No error in the Component.js
6:16 **error** Component Routing is not configured to load its targets asynchronously.. Details: Use Asynchronous Loading (https://ui5.sap.com/#/topic/676b636446c94eada183b1218a824717). Implement sap.ui.core.IAsyncContentCreation interface in Component.js or set the "async" flag for "sap.ui5/routing/config" in the component manifest.
npx --yes @ui5/linter@latest --details
latest
unknown
unknown
unknown
unknown
nothing
{...}
Currently, the UI5 Linter outputs results in an ESLint-like style to the console. To make these findings transferrable to the VSCode "Reports" tab, we need to adopt VSCode's formatter style.
Set up VSCode tasks for the project using the following sample code:
// .vscode > tasks.json
{
"version": "2.0.0",
"tasks": [
{
"label": "UI5 version 2.0 check",
"type": "shell",
"command": "npx --yes @ui5/linter@latest",
"problemMatcher": ["$eslint-stylish"]
}
]
}
Run the task on a Windows machine.
The VSCode "Reports" tab should correctly parse the output from the UI5 Linter and display all findings.
On Windows machines, the output format is not properly parsed, and not all findings are transferred to the "Reports" tab.
For more information on configuring VSCode tasks, refer to the documentation: VSCode Tasks Documentation.
Currently, on Windows, when a new row is added by the terminal (not programmatically by the linter), it adds some whitespaces. These whitespaces are interpreted by the "problemMatcher": ["$eslint-stylish"]
as a data separator, causing the description to be cut off.
We must find a way to make the problemMatcher
treat the description as a whole text.
Hint: The issue is not related to the chalk
module. It does add some ANSI characters, but the issue is reproducible even without it.
A possible solution is to check ESLint's formatter implementation: ESLint Stylish Formatter. The table
module used in the implementation orders the data in columns and rows, and the "divider" is a whitespace, which is likely causing the formatting issue on Windows.
As of now it is only possibe to display the linter reports as text style comments in pull requests (see #175).
For better readability and interactivity (links to documentation, API reference, ...) it would be great to have a markdown style output that can be just displayed as is in the comment section of pull requests. Therefore a new format option markdown
could be introduced that ensures proper output of the linter results in markdown.
I ran ui5lint and expected a code quality report.
Running ui5lint failed with the following error: "Unable to find a UI5 Project"
$ ui5lint --verbose
verb cli:middlewares:base using ui5lint version 0.1.3 (from C:\Users\Roland_Bouman\AppData\Roaming\npm\node_modules\@ui5\linter\bin\ui5lint.js)
verb cli:middlewares:base using node version v20.11.1
⚠️ Process Failed With Error
Error Message:
Unable to find a UI5 project at C:\roland\projects\s4explorer\zsavis-launchpad\web\zsavis.
Please make sure to run "ui5lint" in the root directory of your UI5 project.
Stack Trace:
Error: Unable to find a UI5 project at C:\roland\projects\s4explorer\zsavis-launchpad\web\zsavis.
Please make sure to run "ui5lint" in the root directory of your UI5 project.
at getProjectGraph (file:///C:/Users/Roland_Bouman/AppData/Roaming/npm/node_modules/@ui5/linter/lib/linter/linter.js:61:15)
at async lintProject (file:///C:/Users/Roland_Bouman/AppData/Roaming/npm/node_modules/@ui5/linter/lib/linter/linter.js:79:19)
at async Object.handleLint [as handler] (file:///C:/Users/Roland_Bouman/AppData/Roaming/npm/node_modules/@ui5/linter/lib/cli/base.js:95:17)
If you think this is an issue of the ui5-linter, you might report it using the following URL: https://github.com/SAP/ui5-linter/issues/new/choose
See above
Error: Unable to find a UI5 project at C:\roland\projects\s4explorer\zsavis-launchpad\web\zsavis.
Please make sure to run "ui5lint" in the root directory of your UI5 project.
at getProjectGraph (file:///C:/Users/Roland_Bouman/AppData/Roaming/npm/node_modules/@ui5/linter/lib/linter/linter.js:61:15)
at async lintProject (file:///C:/Users/Roland_Bouman/AppData/Roaming/npm/node_modules/@ui5/linter/lib/linter/linter.js:79:19)
at async Object.handleLint [as handler] (file:///C:/Users/Roland_Bouman/AppData/Roaming/npm/node_modules/@ui5/linter/lib/cli/base.js:95:17)
I expected the linter would pick up the ui5 version from the bootstrap script in my index.html
I changed the ui5 version from 1.108.27 to 1.120.11 by changing the url in my bootstrap script tag in index.html:
<script
id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/1.120.11/resources/sap-ui-core.js"
....
>
I ran the linter but the error report was identical. However, when running the ui5 app with the 1.120 version, there were numerous deprecation messages in the console log. I would love to catch those with the linter without having to run the app (and access every feature to see if the runtime generates deprecation messages)
UI5 linter package and version: 0.1.3
Node.js Version: v20.11.1
npm 9.6.4
OS/Platform: Microsoft Windows 10 Enterprise
Our source folder is called app instead of webapp. Therefore, we cannot use the ui5-linter.
Even with a direct file path, ui5-linter refuses to lint the file:
ui5lint --details --file-paths /home/xxx/dev/project/app/folder123/business-objects/business-objects.controller.js
Error Message:
File path /home/xxx/dev/project/app/folder123/business-objects/business-objects.controller.js is not located within the detected source or test directories of the project
There should be an option to specify the source directory. Or at least a way to forcefully lint a file using a direct file path without being patronized by the ui5-linter.
This issue describes the currently foreseen changes for the first stable release of @ui5/linter
. The list is not exhaustive and may change over time.
When reporting the use of a deprecated method, the linter should name the correct type that provides the method (Naming the subclass on which the method is called instead of naming the type that defines the method would be acceptable, too).
In the case of method call chains, the linter might name a totally different type, which is confusing for developers.
Lint the following module
sap.ui.define(["sap/m/Button"], (Button) => {
const ctrl = new Button();
ctrl.$().control(document.body); // jQuery.fn.control is deprecated
});
The linter reports the following
"Call to deprecated function 'control' of class 'Button'"
but Button
neither defines nor inherits method control
. control
is a method of jQuery.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.