Chores: Add JSDoc type checking with TypeScript (#1206)

* Chores: Add JSDoc type checking with TypeScript

* update

* update

* update guide

Author: ota-meshi

.eslintrc.js

@@ -37,24 +37,6 @@ module.exports = {
     'dot-notation': 'error'
   },
   overrides: [
-    // Introduce prettier. but ignore files to avoid conflicts with PR.
-    {
-      files: [
-        // https://github.com/vuejs/eslint-plugin-vue/pull/819
-        'lib/rules/attributes-order.js',
-        'tests/lib/rules/attributes-order.js'
-      ],
-      extends: [
-        'plugin:eslint-plugin/recommended',
-        'plugin:vue-libs/recommended'
-      ],
-      rules: {
-        'prettier/prettier': 'off',
-
-        'rest-spread-spacing': 'error',
-        'no-mixed-operators': 'error'
-      }
-    },
     {
       files: ['lib/rules/*.js'],
       rules: {

.gitignore

@@ -8,3 +8,4 @@
 yarn.lock
 yarn-error.log
 docs/.vuepress/dist
+typings/eslint/lib/rules

.vscode/settings.json

@@ -6,6 +6,7 @@
     "eslint.validate": [
         "javascript",
         "javascriptreact",
-        { "language": "vue", "autoFix": true }
-    ]
+        "vue"
+    ],
+    "typescript.tsdk": "node_modules/typescript/lib"
 }

docs/developer-guide/README.md

@@ -47,3 +47,10 @@ Check out an [example rule](https://github.com/vuejs/eslint-plugin-vue/blob/mast
 Please be aware that regarding what kind of code examples you'll write in tests, you'll have to accordingly setup the parser in `RuleTester` (you can do it on per test case basis though). [See an example here](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/attribute-hyphenation.js#L19)
 
 If you'll stuck, remember there are plenty of rules you can learn from already, and if you can't find the right solution - don't hesitate to reach out in issues. We're happy to help!
+
+## :white_check_mark: JSDoc type checking with TypeScript
+
+We have type checking enabled via TypeScript and JSDoc.  
+The command to perform type checking is: `npm run tsc`
+
+This is just to help you write the rules, not to do strict type checking. If you find it difficult to resolve type checking warnings, feel free to suppress warnings using the `// @ts-nocheck` and `// @ts-ignore` comment.

lib/processor.js

@@ -13,6 +13,7 @@
  */
 
 module.exports = {
+  /** @param {string} code */
   preprocess(code) {
     return [code]
   },
@@ -34,6 +35,7 @@ module.exports = {
         disableRuleKeys: new Map()
       }
     }
+    /** @type {string[]} */
     const usedDisableDirectiveKeys = []
     /** @type {Map<string,LintMessage>} */
     const unusedDisableDirectiveReports = new Map()
@@ -88,15 +90,15 @@ module.exports = {
         if (state.line.disableAllKeys.size) {
           disableDirectiveKeys.push(...state.line.disableAllKeys)
         }
-        if (state.block.disableRuleKeys.has(message.ruleId)) {
-          disableDirectiveKeys.push(
-            ...state.block.disableRuleKeys.get(message.ruleId)
-          )
-        }
-        if (state.line.disableRuleKeys.has(message.ruleId)) {
-          disableDirectiveKeys.push(
-            ...state.line.disableRuleKeys.get(message.ruleId)
-          )
+        if (message.ruleId) {
+          const block = state.block.disableRuleKeys.get(message.ruleId)
+          if (block) {
+            disableDirectiveKeys.push(...block)
+          }
+          const line = state.line.disableRuleKeys.get(message.ruleId)
+          if (line) {
+            disableDirectiveKeys.push(...line)
+          }
         }
 
         if (disableDirectiveKeys.length) {
@@ -153,8 +155,8 @@ function messageToKey(message) {
 
 /**
  * Compares the locations of two objects in a source file
- * @param {{line: number, column: number}} itemA The first object
- * @param {{line: number, column: number}} itemB The second object
+ * @param {Position} itemA The first object
+ * @param {Position} itemB The second object
  * @returns {number} A value less than 1 if itemA appears before itemB in the source file, greater than 1 if
  * itemA appears after itemB in the source file, or 0 if itemA and itemB have the same location.
  */

lib/rules/arrow-spacing.js

@@ -5,5 +5,5 @@
 
 const { wrapCoreRule } = require('../utils')
 
-// eslint-disable-next-line
+// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
 module.exports = wrapCoreRule(require('eslint/lib/rules/arrow-spacing'))

lib/rules/attribute-hyphenation.js

@@ -45,7 +45,7 @@ module.exports = {
       }
     ]
   },
-
+  /** @param {RuleContext} context */
   create(context) {
     const sourceCode = context.getSourceCode()
     const option = context.options[0]
@@ -61,6 +61,10 @@ module.exports = {
       useHyphenated ? 'kebab-case' : 'camelCase'
     )
 
+    /**
+     * @param {VDirective | VAttribute} node
+     * @param {string} name
+     */
     function reportIssue(node, name) {
       const text = sourceCode.getText(node.key)
 
@@ -78,6 +82,9 @@ module.exports = {
       })
     }
 
+    /**
+     * @param {string} value
+     */
     function isIgnoredAttribute(value) {
       const isIgnored = ignoredAttributes.some((attr) => {
         return value.indexOf(attr) !== -1
@@ -101,7 +108,9 @@ module.exports = {
         const name = !node.directive
           ? node.key.rawName
           : node.key.name.name === 'bind'
-          ? node.key.argument && node.key.argument.rawName
+          ? node.key.argument &&
+            node.key.argument.type === 'VIdentifier' &&
+            node.key.argument.rawName
           : /* otherwise */ false
         if (!name || isIgnoredAttribute(name)) return