Add enableFix option to @intlify/vue-i18n/no-unused-keys rule (#83)

* Add quick fix to remove unused keys to the `@intlify/vue-i18n/no-unused-keys` rule.

- Other Updates
  - Change to use eslint-plugin-jsonc.
  - Remove json processor as it is no longer needed.
  - Add `/base` config for testcases.

* Add `enableFix` option to `@intlify/vue-i18n/no-unused-keys` rule

Author: ota-meshi

docs/rules/README.md

@@ -17,5 +17,5 @@
 | Rule ID | Description |    |
 |:--------|:------------|:---|
 | [@intlify/vue-i18n/<wbr>no-dynamic-keys](./no-dynamic-keys.html) | disallow localization dynamic keys at localization methods |  |
-| [@intlify/vue-i18n/<wbr>no-unused-keys](./no-unused-keys.html) | disallow unused localization keys |  |
+| [@intlify/vue-i18n/<wbr>no-unused-keys](./no-unused-keys.html) | disallow unused localization keys | :black_nib: |
 

docs/rules/no-unused-keys.md

@@ -2,6 +2,8 @@
 
 > disallow unused localization keys
 
+- :black_nib:️ The `--fix` option on the [command line](http://eslint.org/docs/user-guide/command-line-interface#fix) can automatically fix some of the problems reported by this rule.
+
 Localization keys that not used anywhere in the code are most likely an error due to incomplete refactoring. Such localization keys take up code size and can lead to confusion by readers.
 
 ## :book: Rule Details
@@ -101,10 +103,12 @@ i18n.t('hi')
 {
   "@intlify/vue-i18n/no-unused-keys": ["error", {
     "src": "./src",
-    "extensions": [".js", ".vue"]
+    "extensions": [".js", ".vue"],
+    "enableFix": false
   }]
 }
 ```
 
 - `src`: specify the source codes directory to be able to lint. If you don't set any options, it set to `process.cwd()` as default.
 - `extensions`: an array to allow specified lintable target file extension. If you don't set any options, it set to `.js` and` .vue` as default.
+- `enableFix`: if `true`, enable automatically remove unused keys on `eslint --fix`. If you don't set any options, it set to `false` as default. (This is an experimental feature.)

docs/started.md

@@ -89,6 +89,7 @@ The most rules of `eslint-plugin-vue-i18n` require `vue-eslint-parser` to check
 Make sure you have one of the following settings in your **.eslintrc**:
 
 - `"extends": ["plugin:@intlify/vue-i18n/recommended"]`
+- `"extends": ["plugin:@intlify/vue-i18n/base"]`
 
 If you already use other parser (e.g. `"parser": "babel-eslint"`), please move it into `parserOptions`, so it doesn't collide with the `vue-eslint-parser` used by this plugin's configuration:
 

lib/configs.js

@@ -2,5 +2,6 @@
 'use strict'
 
 module.exports = {
+  'base': require('./configs/base'),
   'recommended': require('./configs/recommended')
 }

lib/configs/base.js

@@ -0,0 +1,17 @@
+'use strict'
+
+module.exports = {
+  parser: require.resolve('vue-eslint-parser'),
+  plugins: ['@intlify/vue-i18n'],
+  overrides: [
+    {
+      files: ['*.json', '*.json5'],
+      // TODO: If you do not use vue-eslint-parser, you will get an error in vue rules.
+      // see https://github.com/vuejs/eslint-plugin-vue/pull/1262
+      parser: require.resolve('vue-eslint-parser'),
+      parserOptions: {
+        parser: require.resolve('eslint-plugin-jsonc')
+      }
+    }
+  ]
+}

lib/configs/recommended.js

@@ -2,7 +2,7 @@
 'use strict'
 
 module.exports = {
-  parser: require.resolve('vue-eslint-parser'),
+  extends: [require.resolve('./base')],
   parserOptions: {
     ecmaVersion: 2018,
     sourceType: 'module',
@@ -14,7 +14,6 @@ module.exports = {
     browser: true,
     es6: true
   },
-  plugins: ['@intlify/vue-i18n'],
   rules: {
     '@intlify/vue-i18n/no-html-messages': 'warn',
     '@intlify/vue-i18n/no-missing-keys': 'warn',

lib/index.js

@@ -6,6 +6,5 @@
 
 module.exports = {
   configs: require('./configs'),
-  rules: require('./rules'),
-  processors: require('./processors')
+  rules: require('./rules')
 }

lib/processors.js

@@ -5,28 +5,13 @@
 
 const { extname } = require('path')
 const parse5 = require('parse5')
-const {
-  getLocaleMessages,
-  extractJsonInfo,
-  generateJsonAst
-} = require('../utils/index')
+const { getLocaleMessages } = require('../utils/index')
+const { traverseNodes } = require('eslint-plugin-jsonc')
 const debug = require('debug')('eslint-plugin-vue-i18n:no-html-messages')
 
-function traverseNode (node, fn) {
-  if (node.type === 'Object' && node.children.length > 0) {
-    node.children.forEach(child => {
-      if (child.type === 'Property') {
-        const keyNode = child.key
-        const valueNode = child.value
-        if (keyNode.type === 'Identifier' && valueNode.type === 'Object') {
-          return traverseNode(valueNode, fn)
-        } else {
-          return fn(valueNode)
-        }
-      }
-    })
-  }
-}
+/**
+ * @typedef {import('eslint-plugin-jsonc').AST.JSONLiteral} JSONLiteral
+ */
 
 function findHTMLNode (node) {
   return node.childNodes.find(child => {
@@ -39,28 +24,24 @@ function findHTMLNode (node) {
 function create (context) {
   const filename = context.getFilename()
 
-  function verifyJson (jsonString, jsonFilename, offsetLoc = { line: 1, column: 1 }) {
-    const ast = generateJsonAst(context, jsonString, jsonFilename)
-    if (!ast) { return }
-
-    traverseNode(ast, messageNode => {
-      const htmlNode = parse5.parseFragment(messageNode.value, { sourceCodeLocationInfo: true })
-      const foundNode = findHTMLNode(htmlNode)
-      if (!foundNode) { return }
-      const loc = {
-        line: messageNode.loc.start.line,
-        column: messageNode.loc.start.column + foundNode.sourceCodeLocation.startOffset
-      }
-      if (loc.line === 1) {
-        loc.line += offsetLoc.line - 1
-        loc.column += offsetLoc.column - 1
-      } else {
-        loc.line += offsetLoc.line - 1
-      }
-      context.report({
-        message: `used HTML localization message`,
-        loc
-      })
+  /**
+   * @param {JSONLiteral} node
+   */
+  function verifyJSONLiteral (node) {
+    const parent = node.parent
+    if (parent.type === 'JSONProperty' && parent.key === node) {
+      return
+    }
+    const htmlNode = parse5.parseFragment(`${node.value}`, { sourceCodeLocationInfo: true })
+    const foundNode = findHTMLNode(htmlNode)
+    if (!foundNode) { return }
+    const loc = {
+      line: node.loc.start.line,
+      column: node.loc.start.column + 1/* quote */ + foundNode.sourceCodeLocation.startOffset
+    }
+    context.report({
+      message: `used HTML localization message`,
+      loc
     })
   }
 
@@ -70,27 +51,40 @@ function create (context) {
         const documentFragment = context.parserServices.getDocumentFragment && context.parserServices.getDocumentFragment()
         /** @type {VElement[]} */
         const i18nBlocks = documentFragment && documentFragment.children.filter(node => node.type === 'VElement' && node.name === 'i18n') || []
+        if (!i18nBlocks.length) {
+          return
+        }
+        const localeMessages = getLocaleMessages(context)
 
         for (const block of i18nBlocks) {
-          if (block.startTag.attributes.some(attr => !attr.directive && attr.key.name === 'src') || !block.endTag) {
+          if (block.startTag.attributes.some(attr => !attr.directive && attr.key.name === 'src')) {
+            continue
+          }
+
+          const targetLocaleMessage = localeMessages.findBlockLocaleMessage(block)
+          if (!targetLocaleMessage) {
             continue
           }
-          const tokenStore = context.parserServices.getTemplateBodyTokenStore()
-          const tokens = tokenStore.getTokensBetween(block.startTag, block.endTag)
-          const jsonString = tokens.map(t => t.value).join('')
-          if (jsonString.trim()) {
-            verifyJson(jsonString, filename, block.startTag.loc.start)
+          const ast = targetLocaleMessage.getJsonAST()
+          if (!ast) {
+            continue
           }
+
+          traverseNodes(ast, {
+            enterNode (node) {
+              if (node.type !== 'JSONLiteral') {
+                return
+              }
+              verifyJSONLiteral(node)
+            },
+            leaveNode () {}
+          })
         }
       }
     }
-  } else if (extname(filename) === '.json' && getLocaleMessages(context).findExistLocaleMessage(filename)) {
+  } else if (context.parserServices.isJSON && getLocaleMessages(context).findExistLocaleMessage(filename)) {
     return {
-      Program (node) {
-        const [jsonString, jsonFilename] = extractJsonInfo(context, node)
-        if (!jsonString || !jsonFilename) { return }
-        verifyJson(jsonString, jsonFilename)
-      }
+      JSONLiteral: verifyJSONLiteral
     }
   } else {
     debug(`ignore ${filename} in no-html-messages`)