@sap-ux/eslint-plugin-fiori-tools

Custom linting plugin for SAP Fiori apps

Installation

npm: npm install --save @sap-ux/eslint-plugin-fiori-tools

Yarn: yarn add @sap-ux/eslint-plugin-fiori-tools

pnpm: pnpm add @sap-ux/eslint-plugin-fiori-tools

Usage

To consume this module, add @sap-ux/eslint-plugin-fiori-tools to your project's eslint config file, for example, eslint.config.mjs. You must specify one of the following configurations:

• recommended: Contains rules for JavaScript & TypeScript on both production and test code.

• recommended-for-s4hana: contains rules for JavaScript & TypeScript on both production and test code. This configuration is recommended for SAP internal use.

eslint.config.mjs

import fioriTools from '@sap-ux/eslint-plugin-fiori-tools';

export default [
    ...fioriTools.configs.recommended
];

Manually Migrate from eslint@8, @sap-ux/[email protected], or eslint-plugin-fiori-custom

All rules from eslint-plugin-fiori-custom have been migrated to @sap-ux/eslint-plugin-fiori-tools version 9.

Note: ESLint 9 requires you to use the new flat config.

1. Create the eslint.config.mjs file.

import fioriTools from '@sap-ux/eslint-plugin-fiori-tools';

export default [
    ...fioriTools.configs.recommended
];

2. Copy any values from the .eslintignore file (if it exists) into the eslint.config.mjs file by adding the ignores array.

   For more information, see [https://eslint.org/docs/latest/use/configure/configuration-files#excluding-files-with-ignores](Excluding files with ignores).

   import fioriTools from '@sap-ux/eslint-plugin-fiori-tools';
   
   export default [
      {
         ignores: ['dist']
      },
         ...fioriTools.configs.recommended
   ];

3. Delete the .eslintignore file.

4. If the .eslintrc file contains only either of the following options, it can be deleted.

   {
    "extends": "plugin:@sap-ux/eslint-plugin-fiori-tools/defaultJS",
    "root": true
   }

   or

   {
    "extends": "plugin:@sap-ux/eslint-plugin-fiori-tools/defaultTS",
    "root": true
   }

   Note: If you have custom rules or configuration in your .eslintrc file, do not delete your .eslintrc file. For information about how to migrate your custom rules, see Migrate to v9.x.

5. In the package.json file, performing the following:

   • Remove eslint-plugin-fiori-custom, if it exists.

   • Update eslint to version ^9.

   Update @sap-ux/eslint-plugin-fiori-tools to version ^9.

6. Execute in the project root directory: npm install.

7. Find any references to fiori-custom/ in your source code and replace them with @sap-ux/fiori-tools/:

   for example,

   //eslint-disable fiori-custom/sap-browser-api-warning

   becomes

   //eslint-disable @sap-ux/fiori-tools/sap-browser-api-warning

8. Execute in the project root directory: npm run lint. Check the output for errors or warnings and fix them.

Automatically Migrate from eslint@8, @sap-ux/[email protected], or eslint-plugin-fiori-custom

To automatically migrate from eslint@8, @sap-ux/[email protected], or eslint-plugin-fiori-custom to eslint@9 and @sap-ux/eslint-plugin-fiori-tools@9 (or higher), execute the following command in the project root directory:

npx --yes @sap-ux/create@latest convert eslint-config

For more information about the @sap-ux/create command, run

npx --yes @sap-ux/create@latest convert eslint-config --help

Rules

| Since | Rule | Description | Recommended | Recommended for S/4HANA | |:---------:|------|-------------|:-----------:|:-----------------------:| | new | sap-text-arrangement-hidden | Ensures that the text property referenced by a UI.TextArrangement annotation using the Common.Text annotation is not hidden by the UI.Hidden annotation | | ✅ | | 9.11.0 | sap-no-data-field-intent-based-navigation | Ensures neither DataFieldForIntentBasedNavigation nor DataFieldWithIntentBasedNavigation are used in tables or form fields in SAP Fiori elements applications. | | ✅ | | 9.10.0 | sap-condensed-table-layout | Requires condensedTableLayout to be enabled when using a grid table, analytical table, or tree table. | | ✅ | | 9.9.0 | sap-strict-uom-filtering | Ensures that disableStrictUomFiltering is not set to true in sap.fe.app manifest configuration | | ✅ | | 9.8.0 | sap-table-personalization | Ensures that all table personalization options are enabled in the OData V4 applications. | | ✅ | | 9.7.0 | sap-anchor-bar-visible | Anchor Bar Visible should not be set to false in manifest settings for object page headers (except form entry object pages). | | ✅ | | 9.5.0 | sap-table-column-vertical-alignment | Ensures tableColumnVerticalAlignment Configuration for Responsive Type Tables in SAP Fiori Elements applications | | ✅ | | 9.4.0 | sap-enable-export | Ensures that the export to Excel functionality in any OData V4 applications tables is available | | ✅ | | 9.4.0 | sap-enable-paste | Ensures that the paste functionality in any OData V4 applications tables is available | | ✅ | | 9.3.1 | sap-state-preservation-mode | Ensures Valid statePreservationMode Configuration in SAP Fiori Elements | | ✅ | | 9.1.0 | sap-copy-to-clipboard | Ensures that the copy functionality in any table is enabled. "Copy" button is shown by default. | | ✅ | | 9.1.0 | sap-creation-mode-for-table | Validates that the table creation mode (createMode in OData V2 and creationMode in OData V4) is correctly configured to ensure an optimal user experience when creating new table entries. | | ✅ | | 9.1.0 | sap-flex-enabled | Ensures that the flexEnabled property is set to true in the sap.ui5 section of the manifest.json file for applications using UI5 version 1.56 or higher. | | ✅ | | 9.1.0 | sap-width-including-column-header | Ensures that small tables (less than six columns) have the widthIncludingColumnHeader property set to true for better calculation of column width. | | ✅ | | 9.0.0 | sap-bookmark-performance | Ensure the correct usage of the auto-refresh interval options for sap.ushell.ui.footerbar.AddBookmarkButton. | ✅ | ✅ | | 9.0.0 | sap-browser-api-error | Detect forbidden usages of (window.)document APIs. | | | | 9.0.0 | sap-browser-api-warning | Detect warnings for usages of (window.)document APIs. | ✅ | ✅ | | 9.0.0 | sap-cross-application-navigation | Do not use a static list of cross-application navigation targets. | ✅ | ✅ | | 9.0.0 | sap-forbidden-window-property | Detect the definition of global properties in the window object. | ✅ | ✅ | | 9.0.0 | sap-message-toast | Ensure the usage of the correct method options for sap.m.MessageToast.show. | ✅ | ✅ | | 9.0.0 | sap-no-absolute-component-path | Detect the absolute path to the component. | ✅ | ✅ | | 9.0.0 | sap-no-br-on-return | Detect the usage of document.queryCommandSupported with the insertBrOnReturn argument. | ✅ | ✅ | | 9.0.0 | sap-no-commons-usage | Detect the usage of sap.ui.commons objects. | ✅ | ✅ | | 9.0.0 | sap-no-dom-access | Detect direct DOM access. Use the jQuery selector instead. | ✅ | ✅ | | 9.0.0 | sap-no-dom-insertion | Detect direct DOM insertion. | ✅ | ✅ | | 9.0.0 | sap-no-dynamic-style-insertion | Detect the usage of document.styleSheets (dynamic style insertion). | ✅ | ✅ | | 9.0.0 | sap-no-element-creation | Detect direct element creation. | ✅ | ✅ | | 9.0.0 | sap-no-encode-file-service | Detect the usage of /sap/bc/ui2/encode_file. | ✅ | ✅ | | 9.0.0 | sap-no-event-prop | Flag use of private members from sap.ui.base.Event. Use sap-no-ui5base-prop instead. | | | | 9.0.0 | sap-no-exec-command | Detect the usage of execCommand. | ✅ | ✅ | | 9.0.0 | sap-no-global-define | Detect the definition of global properties in the window object. | ✅ | ✅ | | 9.0.0 | sap-no-global-event | Detect the global event handling override. | ✅ | ✅ | | 9.0.0 | sap-no-global-selection | Detect global selection modification. | ✅ | ✅ | | 9.0.0 | sap-no-global-variable | Disallow global variable declarations. | ✅ | ✅ | | 9.0.0 | sap-no-hardcoded-color | Flag use of hardcoded colors. | ✅ | ✅ | | 9.0.0 | sap-no-hardcoded-url | Flag use of hardcoded (non-relative) URLs. | ✅ | ✅ | | 9.0.0 | sap-no-history-manipulation | Detect warnings for usages of history manipulation APIs. | ✅ | ✅ | | 9.0.0 | sap-no-inner-html-access | Detect access of the innerHTML property. | ✅ | ✅ | | 9.0.0 | sap-no-inner-html-write | Detect overriding of innerHTML. | ✅ | ✅ | | 9.0.0 | sap-no-jquery-device-api | Flag use of the deprecated jQuery.device API. | ✅ | ✅ | | 9.0.0 | sap-no-localhost | Detect the usage of localhost. | ✅ | ✅ | | 9.0.0 | sap-no-localstorage | Detect the usage of localStorage. | ✅ | ✅ | | 9.0.0 | sap-no-location-reload | Detect the usage of location.reload. | ✅ | ✅ | | 9.0.0 | sap-no-location-usage | Detect the usage of location assignments. | ✅ | ✅ | | 9.0.0 | sap-no-navigator | Detect the usage of the navigator object. | ✅ | ✅ | | 9.0.0 | sap-no-override-rendering | Flag override of rendering, getters, or setters for SAPUI5 objects. | ✅ | ✅ | | 9.0.0 | sap-no-override-storage-prototype | Detect override of the storage prototype. | ✅ | ✅ | | 9.0.0 | sap-no-proprietary-browser-api | Detect warnings for usages of proprietary browser APIs. | ✅ | ✅ | | 9.0.0 | sap-no-sessionstorage | Detect the usage of sessionStorage. | ✅ | ✅ | | 9.0.0 | sap-no-ui5-prop-warning | Flag use of private members of the sap.ui.model.odata.v2.ODataModel. | ✅ | ✅ | | 9.0.0 | sap-no-ui5base-prop | Flag use of private members from sap.ui.base classes. | ✅ | ✅ | | 9.0.0 | sap-no-ui5eventprovider-prop | Detect private property usage of sap.ui.base.EventProvider. Use sap-no-ui5base-prop instead. | | | | 9.0.0 | sap-no-ui5odatamodel-prop | Detect private property usage of the UI5 OData model. Use sap-no-ui5base-prop instead. | | | | 9.0.0 | sap-no-window-alert | Flag use of window.alert. | | | | 9.0.0 | sap-opa5-autowait-true | Check if autowait is true in Opa5.extendConfig. | ✅ | ✅ | | 9.0.0 | sap-timeout-usage | Detect setTimeout usage with a value greater than zero. | ✅ | ✅ | | 9.0.0 | sap-ui5-forms | Detect invalid content for SimpleForm, Form, and SmartForm. | ✅ | ✅ | | 9.0.0 | sap-ui5-global-eval | Detect the usage of globalEval() and eval(). | ✅ | ✅ | | 9.0.0 | sap-ui5-legacy-factories | Detect legacy UI5 factories that lead to synchronous loading. | ✅ | ✅ | | 9.0.0 | sap-ui5-legacy-jquerysap-usage | Detect legacy jQuery.sap usage. | ✅ | ✅ | | 9.0.0 | sap-ui5-no-private-prop | Detect the usage of private properties and functions of UI5 elements. | | | | 9.0.0 | sap-usage-basemastercontroller | Detect the usage of the deprecated BaseMasterController. | ✅ | ✅ |