Improved indent rules to support TypeScript syntax (#1520)

* Make the indent rules supports TypeScript * fix * Update docs * update * update ci * update ci * update testcase for node 8 * Fix decorator indent * update
vuejs · Jun 25, 2021 · f2b9ccc · f2b9ccc
1 parent a969878
commit f2b9ccc
Show file tree

Hide file tree

Showing 96 changed files with 3,382 additions and 571 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -43,7 +43,7 @@ jobs:
       - run:
           name: Install eslint@6
           command: |
-            npm install -D eslint@6.2.0
+            npm install --save-exact eslint@6.8.0 @typescript-eslint/parser@3.10.1 typescript@4.0.8
       - run:
           name: Install dependencies
           command: npm install

diff --git a/docs/rules/html-indent.md b/docs/rules/html-indent.md
@@ -17,7 +17,7 @@ since: v3.14.0
 This rule enforces a consistent indentation style in `<template>`. The default style is 2 spaces.
 
 - This rule checks all tags, also all expressions in directives and mustaches.
-- In the expressions, this rule supports ECMAScript 2020 syntaxes. It ignores unknown AST nodes, but it might be confused by non-standard syntaxes.
+- In the expressions, this rule supports ECMAScript 2022 syntaxes. It ignores unknown AST nodes, but it might be confused by non-standard syntaxes.
 
 <eslint-code-block fix :rules="{'vue/html-indent': ['error']}">
 

diff --git a/docs/rules/script-indent.md b/docs/rules/script-indent.md
@@ -13,7 +13,7 @@ since: v4.2.0
 
 ## :book: Rule Details
 
-This rule is similar to core [indent](https://eslint.org/docs/rules/indent) rule, but it has an option for inside of `<script>` tag.
+This rule enforces a consistent indentation style in `<script>`. The default style is 2 spaces.
 
 <eslint-code-block fix :rules="{'vue/script-indent': ['error']}">
 
@@ -117,7 +117,7 @@ This rule only checks `.vue` files and does not interfere with other `.js` files
 
 - [indent](https://eslint.org/docs/rules/indent)
 - [vue/html-indent](./html-indent.md)
-- [@typescript-eslint/indent](https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/indent.md). The `vue/script-indent` rule does not understand TypeScript AST. Please use `@typescript-eslint/indent` rule instead of this one inside of `<script lang="ts"`
+- [@typescript-eslint/indent](https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/indent.md)
 
 ## :rocket: Version
 

diff --git a/lib/rules/no-restricted-component-options.js b/lib/rules/no-restricted-component-options.js
@@ -50,9 +50,13 @@ function parseOption(option) {
   }
 
   /**
-   * @typedef {object} Step
-   * @property {Matcher} [test]
-   * @property {boolean} [wildcard]
+   * @typedef {object} StepForTest
+   * @property {Matcher} test
+   * @property {undefined} [wildcard]
+   * @typedef {object} StepForWildcard
+   * @property {undefined} [test]
+   * @property {true} wildcard
+   * @typedef {StepForTest | StepForWildcard} Step
    */
 
   /** @type {Step[]} */
@@ -76,28 +80,28 @@ function parseOption(option) {
    * @returns {Tester}
    */
   function buildTester(index) {
-    const { wildcard, test } = steps[index]
+    const step = steps[index]
     const next = index + 1
     const needNext = steps.length > next
     return (node) => {
       /** @type {string} */
       let keyName
-      if (wildcard) {
+      if (step.wildcard) {
         keyName = '*'
       } else {
         if (node.type !== 'Property') {
           return null
         }
         const name = utils.getStaticPropertyName(node)
-        if (!name || !test(name)) {
+        if (!name || !step.test(name)) {
           return null
         }
         keyName = name
       }
 
       return {
         next: needNext ? buildTester(next) : undefined,
-        wildcard,
+        wildcard: step.wildcard,
         keyName
       }
     }

diff --git a/lib/rules/order-in-components.js b/lib/rules/order-in-components.js
@@ -156,6 +156,7 @@ function isNotSideEffectsNode(node, visitorKeys) {
   let skipNode = null
   traverseNodes(node, {
     visitorKeys,
+    /** @param {ASTNode} node */
     enterNode(node) {
       if (!result || skipNode) {
         return
@@ -193,6 +194,7 @@ function isNotSideEffectsNode(node, visitorKeys) {
         result = false
       }
     },
+    /** @param {ASTNode} node */
     leaveNode(node) {
       if (skipNode === node) {
         skipNode = null

diff --git a/lib/rules/sort-keys.js b/lib/rules/sort-keys.js
@@ -206,8 +206,8 @@ module.exports = {
                   ''
                 chainLevel = 1
               } else {
-                propName = upperVueState.propName
-                chainLevel = upperVueState.chainLevel + 1
+                propName = upperVueState.propName || ''
+                chainLevel = (upperVueState.chainLevel || 0) + 1
               }
               vueState.propName = propName
               vueState.chainLevel = chainLevel

diff --git a/lib/utils/html-comments.js b/lib/utils/html-comments.js
@@ -110,8 +110,8 @@ function defineParser(sourceCode, config) {
 
   /**
    * Parse HTMLComment.
-   * @param {ASTToken} node a comment token
-   * @returns {HTMLComment | null} the result of HTMLComment tokens.
+   * @param {Token} node a comment token
+   * @returns {ParsedHTMLComment | null} the result of HTMLComment tokens.
    */
   return function parseHTMLComment(node) {
     if (node.type !== 'HTMLComment') {