[eslint] Update lint to include .mjs files

EsLint support .mjs file by default now. But we exclude them from
running previously in our script.

Disabled the `es-modules-import` rule for our script folder
as it's not relevant there.

Added types comment to the EsLint rules.
This should make it easier to build and understand the current rules.

Bug: none
Change-Id: I448efdb055c9cc107e3bced9b3febe5eb226bcf6
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6177719
Commit-Queue: Nikolay Vitkov <[email protected]>
Reviewed-by: Benedikt Meurer <[email protected]>

Author: Lightning00Blade

eslint.config.mjs

@@ -1,3 +1,7 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
 import typescriptPlugin from '@typescript-eslint/eslint-plugin';
 import mochaPlugin from 'eslint-plugin-mocha';
 import rulesdirPlugin from 'eslint-plugin-rulesdir';
@@ -248,10 +252,7 @@ export default [
       'rulesdir/no-commented-out-console': 'error',
       // Prevent imports being commented out rather than deleted.
       'rulesdir/no-commented-out-import': 'error',
-      // DevTools specific rules
-      'rulesdir/es-modules-import': 'error',
       'rulesdir/check-license-header': 'error',
-      'rulesdir/html-tagged-template': 'error',
       /**
        * Ensures that JS Doc comments are properly aligned - all the starting
        * `*` are in the right place.
@@ -480,6 +481,7 @@ export default [
     files: ['scripts/**/*'],
     rules: {
       'no-console': 'off',
+      'rulesdir/es-modules-import': 'off',
     },
   },
   {
@@ -531,6 +533,8 @@ export default [
       'rulesdir/lit-template-result-or-nothing': 'error',
       'rulesdir/inject-checkbox-styles': 'error',
       'rulesdir/jslog-context-list': 'error',
+      'rulesdir/es-modules-import': 'error',
+      'rulesdir/html-tagged-template': 'error',
     },
   },
   {

front_end/Images/rollup.config.mjs

@@ -1,7 +1,6 @@
 // Copyright 2021 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-// eslint-disable-next-line rulesdir/es-modules-import
 import {importMetaAssets} from '@web/rollup-plugin-import-meta-assets';
 import {optimize} from 'svgo';
 

inspector_overlay/css_grid_label_helpers.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {luminance} from '../front_end/core/common/ColorUtils.js';  // eslint-disable-line rulesdir/es-modules-import
+import {luminance} from '../front_end/core/common/ColorUtils.js';
 
 import {type AreaBounds, type Bounds, createChild, type Position} from './common.js';
 import {applyMatrixToPoint, parseHexa} from './highlight_common.js';

inspector_overlay/highlight_common.ts

@@ -28,7 +28,6 @@
 //  (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
 //  THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-// eslint-disable-next-line rulesdir/es-modules-import
 import {
   type Color4D,
   rgbaToHsla,

inspector_overlay/main.ts

@@ -3,28 +3,28 @@
 // found in the LICENSE file.
 
 // @ts-ignore Importing CSS is handled in Rollup.
-import commonStyle from './common.css'; // eslint-disable-line rulesdir/es-modules-import
+import commonStyle from './common.css';
 import {adoptStyleSheet} from './common.js';
 import {gridStyle} from './highlight_grid_common.js';
 import {DistancesOverlay} from './tool_distances.js';
 // @ts-ignore Importing CSS is handled in Rollup.
-import highlightGridStyle from './tool_grid.css'; // eslint-disable-line rulesdir/es-modules-import
+import highlightGridStyle from './tool_grid.css';
 // @ts-ignore Importing CSS is handled in Rollup.
-import highlightStyle from './tool_highlight.css'; // eslint-disable-line rulesdir/es-modules-import
+import highlightStyle from './tool_highlight.css';
 import {HighlightOverlay} from './tool_highlight.js';
 // @ts-ignore Importing CSS is handled in Rollup.
-import pausedStyle from './tool_paused.css'; // eslint-disable-line rulesdir/es-modules-import
+import pausedStyle from './tool_paused.css';
 import {PausedOverlay, type PausedToolMessage} from './tool_paused.js';
 import {PersistentOverlay, type PersistentToolMessage} from './tool_persistent.js';
 // @ts-ignore Importing CSS is handled in Rollup.
-import screenshotStyle from './tool_screenshot.css'; // eslint-disable-line rulesdir/es-modules-import
+import screenshotStyle from './tool_screenshot.css';
 import {ScreenshotOverlay, type ScreenshotToolMessage} from './tool_screenshot.js';
 // @ts-ignore Importing CSS is handled in Rollup.
-import sourceOrderStyle from './tool_source_order.css'; // eslint-disable-line rulesdir/es-modules-import
+import sourceOrderStyle from './tool_source_order.css';
 import {SourceOrderOverlay} from './tool_source_order.js';
 import {ViewportSizeOverlay} from './tool_viewport_size.js';
 // @ts-ignore Importing CSS is handled in Rollup.
-import wcoStyle from './tool_window_controls.css'; // eslint-disable-line rulesdir/es-modules-import
+import wcoStyle from './tool_window_controls.css';
 import {WindowControlsOverlay} from './tool_window_controls.js';
 
 // @ts-ignore Importing CSS is handled in Rollup.

inspector_overlay/tool_highlight.ts

@@ -28,7 +28,6 @@
 //  (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
 //  THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-// eslint-disable-next-line rulesdir/es-modules-import
 import {
   contrastRatio,
   contrastRatioAPCA,

scripts/ai_assistance/to_tsv.mjs

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-
 // Converts a JSON results file into two TSV files: queries and responses.
 // Usage: node to_tsv.mjs path/to/file.json
 
@@ -22,7 +21,7 @@ function formatRequest(request) {
   const lines = [
     ...(request.chat_history || []).map(item => item.text),
     request.input,
-  ]
+  ];
   return lines.join('\n\n===\n\n');
 }
 

scripts/eslint_rules/lib/canvas-context-tracking.js

@@ -4,6 +4,9 @@
 
 'use strict';
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/check-css-import.js

@@ -15,6 +15,9 @@
 const fs = require('fs');
 const path = require('path');
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/check-enumerated-histograms.js

@@ -3,6 +3,9 @@
 // found in the LICENSE file.
 'use strict';
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/check-license-header.js

@@ -124,6 +124,9 @@ function isMissingBlockLineCommentLicense(licenseText) {
   return !BLOCK_REGEX.test(licenseText);
 }
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/check-test-definitions.js

@@ -26,6 +26,9 @@ function getTextValue(node) {
   }
 }
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/check-was-shown-methods.js

@@ -4,6 +4,9 @@
 
 'use strict';
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/enforce-bound-render-for-schedule-render.js

@@ -62,6 +62,9 @@ function isPropertyDefinitionViaArrowFunction(propertyDefinition) {
   return propertyDefinition.value.type === 'ArrowFunctionExpression';
 }
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/enforce-custom-event-names.js

@@ -7,6 +7,9 @@
  */
 const VALID_EVENT_NAME_REGEX = /^([a-z]+)$/;
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/enforce-default-import-name.js

@@ -10,6 +10,9 @@ function isStarAsImportSpecifier(specifiers) {
   return specifiers.length === 1 && specifiers[0].type === 'ImportNamespaceSpecifier';
 }
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/enforce-optional-properties-last.js

@@ -8,6 +8,9 @@
  */
 'use strict';
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/es-modules-import.js

@@ -118,6 +118,9 @@ function checkStarImport(context, node, importPath, importPathForErrorMessage, i
   }
 }
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/html-tagged-template.js

@@ -2,6 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/inject-checkbox-styles.js

@@ -12,6 +12,9 @@ const FRONT_END_DIRECTORY = path.join(__dirname, '..', '..', '..', 'front_end');
 // input.js as that's what the import statement would reference.
 const COMMON_INPUT_STYLES = path.join(FRONT_END_DIRECTORY, 'ui', 'components', 'input', 'input.js');
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/inline-type-imports.js

@@ -3,6 +3,9 @@
 // found in the LICENSE file.
 'use strict';
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/jslog-context-list.js

@@ -16,6 +16,9 @@ const LICENSE_HEADER = `// Copyright 2024 The Chromium Authors. All rights reser
 
 `;
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/l10n-filename-matches.js

@@ -24,6 +24,9 @@ function isRegisterUIStringsCall(callExpression) {
   return true;
 }
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/l10n-i18nString-call-only-with-uistrings.js

@@ -19,6 +19,9 @@ function isArgumentValid(argument) {
   return argument.object.type === 'Identifier' && argument.object.name === 'UIStrings';
 }
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/l10n-no-i18nString-calls-module-instantiation.js

@@ -17,6 +17,9 @@ function isI18nStringCall(callExpression) {
   return callExpression.callee.type === 'Identifier' && callExpression.callee.name === 'i18nString';
 }
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/l10n-no-locked-or-placeholder-only-phrase.js

@@ -9,6 +9,9 @@ const l10nHelper = require('./l10n-helper.js');
 const FULLY_LOCKED_PHRASE_REGEX = /^`[^`]*`$/;
 const SINGLE_PLACEHOLDER_REGEX = /^\{\w+\}$/;  // Matches the PH regex in `collect-strings.js`.
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/l10n-no-uistrings-export.js

@@ -8,6 +8,9 @@ const l10nHelper = require('./l10n-helper.js');
 
 const MODULE_UI_STRINGS_FILENAME_REGEX = /ModuleUIStrings\.(js|ts)$/;
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/l10n-no-unused-message.js

@@ -19,6 +19,9 @@ function isStandardUIStringsMemberExpression(expr) {
   return expr.property.type === 'Identifier';
 }
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/lit-html-host-this.js

@@ -5,6 +5,9 @@
 
 const {isLitHtmlRenderCall} = require('./utils.js');
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/lit-html-no-attribute-quotes.js

@@ -33,6 +33,9 @@ function removeQuotesFromAttribute({fixer, firstPart, secondPart}) {
   return [fixer.removeRange(startingQuoteRangeToRemove), fixer.removeRange(endingQuoteRangeToRemove)];
 }
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/lit-template-result-or-nothing.js

@@ -3,6 +3,9 @@
 // found in the LICENSE file.
 'use strict';
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/no-a-tags-in-lit-html.js

@@ -5,6 +5,9 @@
 
 const {isLitHtmlTemplateCall} = require('./utils.js');
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/no-assert-equal.js

@@ -12,6 +12,9 @@
 // Rule Definition
 // ------------------------------------------------------------------------------
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',

scripts/eslint_rules/lib/no-assert-strict-equal-for-arrays-and-objects.js

@@ -12,6 +12,9 @@
 // Rule Definition
 // ------------------------------------------------------------------------------
 
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
 module.exports = {
   meta: {
     type: 'problem',