@gitlab/eslint-plugin 19.4.0 → 19.6.0

package/.tool-versions

@@ -1,2 +1,2 @@
-nodejs 18.16.0
+nodejs 20.13.1
 yarn 1.22.19

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [19.6.0](https://gitlab.com/gitlab-org/frontend/eslint-plugin/compare/v19.5.0...v19.6.0) (2024-07-15)
+
+
+### Features
+
+* **config:** add TypeScript configuration ([5f7c042](https://gitlab.com/gitlab-org/frontend/eslint-plugin/commit/5f7c0427f60c9778bdf799c2a883d083e5ec08de))
+
+# [19.5.0](https://gitlab.com/gitlab-org/frontend/eslint-plugin/compare/v19.4.0...v19.5.0) (2024-03-27)
+
+
+### Features
+
+* **require-valid-i18n-helpers:** lint against string interpolation ([268d858](https://gitlab.com/gitlab-org/frontend/eslint-plugin/commit/268d858f8bd02cab06ea74f2c6844166489d0d89))
+
 # [19.4.0](https://gitlab.com/gitlab-org/frontend/eslint-plugin/compare/v19.3.0...v19.4.0) (2024-01-10)
 
 

package/docs/rules/require-valid-i18n-helpers.md

@@ -5,6 +5,8 @@ following:
 
 - All helpers should be called with string-literal arguments to ensure the strings are properly
   collected by the `gettext:regenerate` script.
+- The helpers' arguments should not use string interpolation as this also prevents the strings from
+  being collected.
 - `__` should not be called with a namespace.
 - `s__` requires a translation namespace to be provided.
 - `n__` should use the same namespace, or no namespace at all, for both the singular and plural forms.
@@ -21,6 +23,11 @@ const description = __(getDescription());
 // Extraneous namespace
 const globalTranslation = __('Global|Translation');
 
+// String interpolation
+const withStringInterpolation1 = __(`String ${interpolation}`);
+const withStringInterpolation2 = s__("SomeContext", `String ${interpolation}`);
+const withStringInterpolation3 = n__("%d apple", `%d ${apples}`, appleCount);
+
 // Missing translation namespace
 const namespacedTranslation = s__('NamespacedTranslation');
 

package/docs/rules/vue-require-valid-i18n-helpers.md

@@ -13,6 +13,11 @@ This rule is like [require-valid-i18n-helpers](./require-valid-i18n-helpers.md)
     {{ __(LABEL) }}
     {{ __(getDescription()) }}
 
+    <!-- String interpolation -->
+    {{ __(`String ${interpolation}`) }}
+    {{ s__("SomeContext", `String ${interpolation}`) }}
+    {{ n__("%d apple", `%d ${apples}`, appleCount) }}
+
     <!-- Missing translation namespace -->
     {{ s__('NamespacedTranslation') }}
   </div>

package/lib/configs/base.js

@@ -0,0 +1,92 @@
+const [, ...restrictedGlobals] = require('eslint-config-airbnb-base/rules/variables').rules[
+  'no-restricted-globals'
+];
+
+/*
+  This plugin contains rules related to GitLab JavaScript style guide
+  Vue specific rules are in lib/configs/vue.js
+*/
+module.exports = {
+  env: {
+    browser: true,
+    es2020: true,
+  },
+  extends: ['airbnb-base', 'prettier', 'plugin:promise/recommended'],
+  parserOptions: {
+    parser: 'espree',
+    ecmaVersion: 'latest',
+  },
+  plugins: ['unicorn', 'promise', 'import', '@gitlab'],
+  rules: {
+    camelcase: [
+      'error',
+      {
+        properties: 'never',
+        ignoreDestructuring: true,
+      },
+    ],
+    'default-param-last': 'off',
+    'unicorn/filename-case': ['error', { case: 'snakeCase' }],
+    'unicorn/no-array-callback-reference': 'error',
+    'import/prefer-default-export': 'off',
+    'import/no-default-export': 'error',
+    'import/no-deprecated': 'error',
+    'import/no-dynamic-require': ['error', { esmodule: true }],
+    'no-implicit-coercion': [
+      'error',
+      {
+        boolean: true,
+        number: true,
+        string: true,
+      },
+    ],
+    'no-param-reassign': [
+      'error',
+      {
+        props: true,
+        ignorePropertyModificationsFor: ['acc', 'accumulator', 'el', 'element', 'state'],
+      },
+    ],
+    'no-restricted-exports': [
+      'error',
+      {
+        restrictedNamedExports: [
+          'then', // avoid confusion when used with dynamic `import()` promise
+        ],
+      },
+    ],
+    'no-restricted-syntax': 'off',
+    'no-sequences': [
+      'error',
+      {
+        allowInParentheses: false,
+      },
+    ],
+    'promise/catch-or-return': [
+      'error',
+      {
+        allowFinally: true,
+      },
+    ],
+    'no-restricted-globals': [
+      'error',
+      ...restrictedGlobals,
+      {
+        name: 'escape',
+        message:
+          "The global `escape` function is unsafe. Did you mean to use `encodeURI`, `encodeURIComponent` or lodash's `escape` instead?",
+      },
+      {
+        name: 'unescape',
+        message:
+          "The global `unescape` function is unsafe. Did you mean to use `decodeURI`, `decodeURIComponent` or lodash's `unescape` instead?",
+      },
+    ],
+    'import/order': [
+      'error',
+      {
+        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
+      },
+    ],
+  },
+};

package/lib/configs/default.js

@@ -1,150 +1,18 @@
-const [, ...restrictedGlobals] = require('eslint-config-airbnb-base/rules/variables').rules[
-  'no-restricted-globals'
-];
+const baseConfig = require('./base');
+const vueConfig = require('./vue');
 
 module.exports = {
-  env: {
-    browser: true,
-    es2020: true,
-  },
+  ...baseConfig,
   extends: [
     'airbnb-base',
-    'plugin:vue/recommended',
     'prettier',
-    'prettier/vue',
     'plugin:promise/recommended',
+    'plugin:vue/recommended',
+    'prettier/vue',
   ],
-  parserOptions: {
-    parser: 'espree',
-    ecmaVersion: 'latest',
-  },
-  plugins: ['unicorn', 'promise', 'import', '@gitlab'],
   rules: {
-    camelcase: [
-      'error',
-      {
-        properties: 'never',
-        ignoreDestructuring: true,
-      },
-    ],
-    'default-param-last': 'off',
-    'unicorn/filename-case': ['error', { case: 'snakeCase' }],
-    'unicorn/no-array-callback-reference': 'error',
-    'import/prefer-default-export': 'off',
-    'import/no-default-export': 'error',
-    'import/no-deprecated': 'error',
-    'import/no-dynamic-require': ['error', { esmodule: true }],
-    'no-implicit-coercion': [
-      'error',
-      {
-        boolean: true,
-        number: true,
-        string: true,
-      },
-    ],
-    'no-param-reassign': [
-      'error',
-      {
-        props: true,
-        ignorePropertyModificationsFor: ['acc', 'accumulator', 'el', 'element', 'state'],
-      },
-    ],
-    'no-restricted-exports': [
-      'error',
-      {
-        restrictedNamedExports: [
-          'then', // avoid confusion when used with dynamic `import()` promise
-        ],
-      },
-    ],
-    'no-restricted-syntax': 'off',
-    'no-sequences': [
-      'error',
-      {
-        allowInParentheses: false,
-      },
-    ],
-    'promise/catch-or-return': [
-      'error',
-      {
-        allowFinally: true,
-      },
-    ],
-    'vue/html-self-closing': [
-      'error',
-      {
-        html: {
-          void: 'any',
-          normal: 'never',
-          component: 'always',
-        },
-        svg: 'always',
-        math: 'always',
-      },
-    ],
-    'vue/component-tags-order': [
-      'error',
-      {
-        order: ['script', 'template', 'style'],
-      },
-    ],
-    'vue/component-options-name-casing': ['error', 'PascalCase'],
-    'vue/component-name-in-template-casing': ['error', 'kebab-case'],
-    '@gitlab/vue-require-required-key': 'error',
-    'no-restricted-globals': [
-      'error',
-      ...restrictedGlobals,
-      {
-        name: 'escape',
-        message:
-          "The global `escape` function is unsafe. Did you mean to use `encodeURI`, `encodeURIComponent` or lodash's `escape` instead?",
-      },
-      {
-        name: 'unescape',
-        message:
-          "The global `unescape` function is unsafe. Did you mean to use `decodeURI`, `decodeURIComponent` or lodash's `unescape` instead?",
-      },
-    ],
-    'vue/v-slot-style': [
-      'error',
-      {
-        atComponent: 'shorthand',
-      },
-    ],
-    '@gitlab/vue-no-data-toggle': 'error',
-    '@gitlab/vue-prefer-dollar-scopedslots': 'error',
-    '@gitlab/vue-slot-name-casing': 'error',
-    '@gitlab/no-runtime-template-compiler': 'error',
-    'import/order': [
-      'error',
-      {
-        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
-      },
-    ],
-    // See https://gitlab.com/gitlab-org/frontend/eslint-plugin/-/issues/52.
-    'vue/component-api-style': ['error', ['options']],
-    // BEGIN rules to aid migration from Vue 2.x to 3.x.
-    // See https://gitlab.com/groups/gitlab-org/-/epics/3174 for more details.
-    'vue/no-deprecated-data-object-declaration': 'error',
-    'vue/no-deprecated-events-api': 'error',
-    'vue/no-deprecated-filter': 'error',
-    'vue/no-deprecated-functional-template': 'error',
-    'vue/no-deprecated-html-element-is': 'error',
-    'vue/no-deprecated-inline-template': 'error',
-    'vue/no-deprecated-props-default-this': 'error',
-    'vue/no-deprecated-scope-attribute': 'error',
-    'vue/no-deprecated-slot-attribute': 'error',
-    'vue/no-deprecated-slot-scope-attribute': 'error',
-    'vue/no-deprecated-v-on-number-modifiers': 'error',
-    'vue/no-deprecated-vue-config-keycodes': 'error',
-    // END rules to aid migration from Vue 2.x to 3.x.
+    ...baseConfig.rules,
+    ...vueConfig.rules,
   },
-  overrides: [
-    {
-      files: ['**/*.vue'],
-      rules: {
-        'import/no-default-export': 'off',
-      },
-    },
-  ],
+  overrides: vueConfig.overrides,
 };

package/lib/configs/typescript.js

@@ -0,0 +1,88 @@
+const baseConfig = require('./base');
+
+const tsConfig = {
+  env: {
+    mocha: true,
+    jest: true,
+  },
+  parserOptions: baseConfig.parserOptions,
+  extends: [...baseConfig.extends],
+  plugins: [...baseConfig.plugins],
+  rules: {
+    ...baseConfig.rules,
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: ['**/*.ts'],
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+        project: ['./tsconfig.json'],
+      },
+      plugins: ['@typescript-eslint', 'import'],
+      extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/strict',
+        'plugin:import/typescript',
+      ],
+      reportUnusedDisableDirectives: true,
+      rules: {
+        semi: [2, 'always'],
+        'no-throw-literal': 'off',
+        'no-shadow': 'off',
+        'no-empty-function': 'off',
+        'no-plusplus': 'off',
+        'unicorn/no-array-callback-reference': 'off',
+        '@typescript-eslint/no-throw-literal': 'error',
+        '@typescript-eslint/no-unused-vars': 'error',
+        '@typescript-eslint/no-shadow': 'error',
+        '@typescript-eslint/return-await': 'error',
+        '@typescript-eslint/no-floating-promises': 'error',
+        'class-methods-use-this': 'off',
+        'import/no-cycle': 'error',
+        'promise/param-names': 'off',
+        'no-use-before-define': ['warn', 'nofunc'],
+        'no-restricted-syntax': [
+          'error',
+          {
+            selector: ':matches(PropertyDefinition, MethodDefinition)[accessibility="private"]',
+            message: 'Use # prefix instead of `private` to indicate private class members.',
+          },
+          {
+            selector: 'ForInStatement',
+            message:
+              'for..in loops iterate over the entire prototype chain, which is virtually never what you want. Use Object.{keys,values,entries}, and iterate over the resulting array.',
+          },
+          {
+            selector: 'LabeledStatement',
+            message:
+              'Labels are a form of GOTO; using them makes code confusing and hard to maintain and understand.',
+          },
+          {
+            selector: 'WithStatement',
+            message:
+              '`with` is disallowed in strict mode because it makes code impossible to predict and optimize.',
+          },
+        ],
+      },
+    },
+    {
+      files: ['*.test.ts', '*.test.js'],
+      rules: {
+        'max-classes-per-file': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'off',
+      },
+    },
+  ],
+};
+
+module.exports = tsConfig;

package/lib/configs/vue.js

@@ -0,0 +1,81 @@
+/*
+  This plugin contains rules related to GitLab Vue style guide
+  base JavaScript rules are in lib/configs/base.js
+*/
+
+module.exports = {
+  env: {
+    browser: true,
+    es2020: true,
+  },
+  extends: ['plugin:vue/recommended', 'prettier/vue'],
+  parserOptions: {
+    parser: 'espree',
+    ecmaVersion: 'latest',
+  },
+  plugins: ['unicorn', 'promise', 'import', '@gitlab'],
+  rules: {
+    'vue/html-self-closing': [
+      'error',
+      {
+        html: {
+          void: 'any',
+          normal: 'never',
+          component: 'always',
+        },
+        svg: 'always',
+        math: 'always',
+      },
+    ],
+    'vue/component-tags-order': [
+      'error',
+      {
+        order: ['script', 'template', 'style'],
+      },
+    ],
+    'vue/component-options-name-casing': ['error', 'PascalCase'],
+    'vue/component-name-in-template-casing': ['error', 'kebab-case'],
+    '@gitlab/vue-require-required-key': 'error',
+    'vue/v-slot-style': [
+      'error',
+      {
+        atComponent: 'shorthand',
+      },
+    ],
+    '@gitlab/vue-no-data-toggle': 'error',
+    '@gitlab/vue-prefer-dollar-scopedslots': 'error',
+    '@gitlab/vue-slot-name-casing': 'error',
+    '@gitlab/no-runtime-template-compiler': 'error',
+    'import/order': [
+      'error',
+      {
+        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
+      },
+    ],
+    // See https://gitlab.com/gitlab-org/frontend/eslint-plugin/-/issues/52.
+    'vue/component-api-style': ['error', ['options']],
+    // BEGIN rules to aid migration from Vue 2.x to 3.x.
+    // See https://gitlab.com/groups/gitlab-org/-/epics/3174 for more details.
+    'vue/no-deprecated-data-object-declaration': 'error',
+    'vue/no-deprecated-events-api': 'error',
+    'vue/no-deprecated-filter': 'error',
+    'vue/no-deprecated-functional-template': 'error',
+    'vue/no-deprecated-html-element-is': 'error',
+    'vue/no-deprecated-inline-template': 'error',
+    'vue/no-deprecated-props-default-this': 'error',
+    'vue/no-deprecated-scope-attribute': 'error',
+    'vue/no-deprecated-slot-attribute': 'error',
+    'vue/no-deprecated-slot-scope-attribute': 'error',
+    'vue/no-deprecated-v-on-number-modifiers': 'error',
+    'vue/no-deprecated-vue-config-keycodes': 'error',
+    // END rules to aid migration from Vue 2.x to 3.x.
+  },
+  overrides: [
+    {
+      files: ['**/*.vue'],
+      rules: {
+        'import/no-default-export': 'off',
+      },
+    },
+  ],
+};

package/lib/index.js

@@ -20,6 +20,9 @@ module.exports = {
   },
   configs: {
     default: require('./configs/default.js'),
+    typescript: require('./configs/typescript.js'),
+    base: require('./configs/base.js'),
+    vue: require('./configs/vue.js'),
     i18n: require('./configs/i18n.js'),
     jest: require('./configs/jest.js'),
   },

package/lib/utils/i18n-utils.js

@@ -10,6 +10,8 @@ const P_GETTEXT = 's__';
 const N_GETTEXT = 'n__';
 
 const ERROR_MESSAGE_STRING_LITERAL = 'Translation helpers must be called with a string literal.';
+const ERROR_MESSAGE_STRING_INTERPOLATION =
+  'Translation helpers should not use string interpolation.';
 const ERROR_MESSAGE_EXTRANEOUS_NAMESPACE =
   '__ should not be used with a translation namespace, consider using s__ instead.';
 const ERROR_MESSAGE_MISSING_NAMESPACE = 's__ requires a translation namespace to be provided.';
@@ -38,6 +40,16 @@ const mustBeCalledWithStringLiteralArguments = (context, node) => {
   }
 };
 
+const mustNotHaveStringInterpolation = (context, node) => {
+  const [arg1, arg2] = node.arguments;
+  if ([arg1, arg2].some((arg) => arg?.expressions?.length)) {
+    context.report({
+      node,
+      message: ERROR_MESSAGE_STRING_INTERPOLATION,
+    });
+  }
+};
+
 const mustHaveNamespace = (context, node) => {
   if (node.arguments.length === 2) {
     return;
@@ -94,9 +106,21 @@ const namespacesMustMatch = (context, node) => {
 };
 
 const VALIDATORS = {
-  [GETTEXT]: [mustBeCalledWithStringLiteralArguments, mustNotHaveNamespace],
-  [P_GETTEXT]: [mustBeCalledWithStringLiteralArguments, mustHaveNamespace],
-  [N_GETTEXT]: [mustBeCalledWithStringLiteralArguments, namespacesMustMatch],
+  [GETTEXT]: [
+    mustBeCalledWithStringLiteralArguments,
+    mustNotHaveStringInterpolation,
+    mustNotHaveNamespace,
+  ],
+  [P_GETTEXT]: [
+    mustBeCalledWithStringLiteralArguments,
+    mustNotHaveStringInterpolation,
+    mustHaveNamespace,
+  ],
+  [N_GETTEXT]: [
+    mustBeCalledWithStringLiteralArguments,
+    mustNotHaveStringInterpolation,
+    namespacesMustMatch,
+  ],
 };
 
 const validateI18nHelperCallFactory = (context) => (node) => {
@@ -113,6 +137,7 @@ const validateI18nHelperCallFactory = (context) => (node) => {
 module.exports = {
   validateI18nHelperCallFactory,
   ERROR_MESSAGE_STRING_LITERAL,
+  ERROR_MESSAGE_STRING_INTERPOLATION,
   ERROR_MESSAGE_EXTRANEOUS_NAMESPACE,
   ERROR_MESSAGE_MISSING_NAMESPACE,
   ERROR_MESSAGE_NAMESPACES_MISMATCH,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/eslint-plugin",
-  "version": "19.4.0",
+  "version": "19.6.0",
   "description": "GitLab package for our custom eslint rules",
   "main": "lib/index.js",
   "scripts": {
@@ -30,6 +30,7 @@
     "node": ">=14"
   },
   "dependencies": {
+    "@typescript-eslint/eslint-plugin": "^7.14.1",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^6.10.0",
     "eslint-plugin-import": "^2.28.0",
@@ -37,6 +38,7 @@
     "eslint-plugin-promise": "^6.0.1",
     "eslint-plugin-unicorn": "^40.1.0",
     "eslint-plugin-vue": "^9.17.0",
+    "vue-eslint-parser": "^9.3.1",
     "lodash": "^4.17.21"
   },
   "peerDependencies": {
@@ -48,7 +50,6 @@
     "jest": "^27.5.1",
     "prettier": "^2.6.1",
     "pretty-quick": "^3.1.3",
-    "vue-eslint-parser": "^9.3.1",
     "yarn-deduplicate": "^6.0.2"
   },
   "release": {