feat(eslint-plugin): add key-spacing rule extension for interface & type declarations

packages/eslint-plugin/package.json

@@ -49,6 +49,7 @@
     "@typescript-eslint/utils": "5.46.1",
     "debug": "^4.3.4",
     "ignore": "^5.2.0",
+    "grapheme-splitter": "^1.0.4",
     "natural-compare-lite": "^1.4.0",
     "regexpp": "^3.2.0",
     "semver": "^7.3.7",

packages/eslint-plugin/src/rules/key-spacing.ts

@@ -1,9 +1,24 @@
 import type { TSESTree } from '@typescript-eslint/utils';
 import { AST_NODE_TYPES } from '@typescript-eslint/utils';
+import GraphemeSplitter from 'grapheme-splitter';
 
 import * as util from '../util';
 import { getESLintCoreRule } from '../util/getESLintCoreRule';
 
+let splitter: GraphemeSplitter;
+function isASCII(value: string): boolean {
+  return /^[\u0020-\u007f]*$/u.test(value);
+}
+function getStringLength(value: string): number {
+  if (isASCII(value)) {
+    return value.length;
+  }
+
+  splitter ??= new GraphemeSplitter();
+
+  return splitter.countGraphemes(value);
+}
+
 const baseRule = getESLintCoreRule('key-spacing');
 
 export type Options = util.InferOptionsTypeFromRule<typeof baseRule>;
@@ -35,6 +50,14 @@ export default util.createRule<Options, MessageIds>({
     const sourceCode = context.getSourceCode();
     const baseRules = baseRule.create(context);
 
+    /**
+     * @returns the column of the position after converting all unicode characters in the line to 1 char length
+     */
+    function adjustedColumn(position: TSESTree.Position): number {
+      const line = position.line - 1; // position.line is 1-indexed
+      return getStringLength(sourceCode.lines[line].slice(0, position.column));
+    }
+
     /**
      * Starting from the given a node (a property.key node here) looks forward
      * until it finds the last token before a colon punctuator and returns it.
@@ -241,11 +264,12 @@ export default util.createRule<Options, MessageIds>({
 
       for (const node of group) {
         if (isKeyTypeNode(node)) {
+          const keyEnd = adjustedColumn(getKeyLocEnd(node));
           alignColumn = Math.max(
             alignColumn,
             align === 'colon'
-              ? getKeyLocEnd(node).column + expectedWhitespaceBeforeColon
-              : getKeyLocEnd(node).column +
+              ? keyEnd + expectedWhitespaceBeforeColon
+              : keyEnd +
                   ':'.length +
                   expectedWhitespaceAfterColon +
                   expectedWhitespaceBeforeColon,
@@ -261,7 +285,7 @@ export default util.createRule<Options, MessageIds>({
           align === 'colon'
             ? node.typeAnnotation!
             : node.typeAnnotation!.typeAnnotation;
-        const difference = toCheck.loc.start.column - alignColumn;
+        const difference = adjustedColumn(toCheck.loc.start) - alignColumn;
 
         if (difference) {
           context.report({

packages/eslint-plugin/tests/rules/key-spacing.test.ts

@@ -41,6 +41,20 @@ let x: {
     },
     {
       code: `
+let x: {
+  a:   number;
+  "𐌘": string;
+  [𐌘]: Date;
+  "🌷": "bar", // 2 code points
+  "🎁": "baz", // 2 code points
+  "🇮🇳": "qux", // 4 code points
+  "🏳️‍🌈": "xyz", // 6 code points
+};
+      `,
+      options: [{ align: 'value' }],
+    },
+    {
+      code: `
 interface X {
   a: number;
   abc: string; c: number;
@@ -394,6 +408,32 @@ let x: {
     },
     {
       code: `
+let x: {
+  a: number;
+  "🌷": "bar", // 2 code points
+  "🎁": "baz", // 2 code points
+  "🇮🇳": "qux", // 4 code points
+  "🏳️‍🌈": "xyz", // 6 code points
+  [𐌘]: string
+  "𐌘": string
+};
+      `,
+      output: `
+let x: {
+  a:   number;
+  "🌷": "bar", // 2 code points
+  "🎁": "baz", // 2 code points
+  "🇮🇳": "qux", // 4 code points
+  "🏳️‍🌈": "xyz", // 6 code points
+  [𐌘]: string
+  "𐌘": string
+};
+      `,
+      options: [{ align: 'value' }],
+      errors: [{ messageId: 'missingValue' }],
+    },
+    {
+      code: `
 class X {
   a: number;
   abc: string

yarn.lock

@@ -7908,6 +7908,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.9.tgz#041b05df45755e587a24942279b9d113146e1c96"
   integrity sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==
 
+grapheme-splitter@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
+  integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
+
 gray-matter@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-4.0.3.tgz#e893c064825de73ea1f5f7d88c7a9f7274288798"