Add TypeScript test case and add TypeScript FAQ to doc. (#110)

Author: ota-meshi

docs/started.md

@@ -79,16 +79,28 @@ eslint "src/**/*.{js,vue,json}"
 # eslint "src/**/*.{js,vue,json5}"
 ```
 
-#### How to use custom parser?
+### How to use custom parser?
 
 If you want to use custom parsers such as [babel-eslint](https://www.npmjs.com/package/babel-eslint) or [typescript-eslint-parser](https://www.npmjs.com/package/typescript-eslint-parser), you have to use `parserOptions.parser` option instead of `parser` option. Because this plugin requires [vue-eslint-parser](https://www.npmjs.com/package/vue-eslint-parser) to parse `.vue` files, so this plugin doesn't work if you overwrote `parser` option.
 
+Also, `parserOptions` configured at the top level affect `.json` and `.yaml`. This plugin needs to use special parsers to parse `.json` and `.yaml`, so to correctly parse each extension, use the `overrides` option and overwrite the options again.
+
 ```diff
 - "parser": "babel-eslint",
   "parserOptions": {
 +     "parser": "babel-eslint",
       "sourceType": "module"
-  }
+  },
++ "overrides": [
++     {
++         "files": ["*.json", "*.json5"],
++         "extends": ["plugin:@intlify/vue-i18n/base"],
++     },
++     {
++         "files": ["*.yaml", "*.yml"],
++         "extends": ["plugin:@intlify/vue-i18n/base"],
++     }
++ ]
 ```
 
 ## :question: FAQ

lib/utils/collect-keys.ts

@@ -136,6 +136,8 @@ function collectKeyResourcesFromFiles(fileNames: string[]) {
   debug('collectKeysFromFiles', fileNames)
 
   const cliEngine = new CLIEngine({})
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  cliEngine.addPlugin('@intlify/vue-i18n', require('../index')) // for Test
 
   const results = []
 

package.json

@@ -97,7 +97,7 @@
     "docs": "vuepress dev docs",
     "docs:build": "vuepress build docs",
     "generate": "ts-node scripts/update.ts",
-    "lint": "eslint --ext js,ts lib scripts tests docs/.vuepress --ignore-pattern \"!.*\"",
+    "lint": "eslint --ext js,ts lib scripts tests/lib docs/.vuepress --ignore-pattern \"!.*\"",
     "lint:docs": "eslint --ext js,vue,md docs --ignore-pattern \"!.*\"",
     "release:prepare": "shipjs prepare",
     "release:trigger": "shipjs trigger",

tests/fixtures/no-unused-keys/invalid/typescript/.eslintrc.js

@@ -0,0 +1,32 @@
+module.exports = {
+  root: true,
+  extends: ['plugin:@intlify/vue-i18n/base'],
+  parserOptions: {
+    parser: '@typescript-eslint/parser'
+  },
+  rules: {
+    '@intlify/vue-i18n/no-unused-keys': ["error", {
+      "src": "./src",
+      "extensions": [".tsx", ".ts", ".vue"],
+      "enableFix": true,
+    }]
+  },
+  settings: {
+    'vue-i18n': {
+      localeDir: {
+        pattern: `./locales/*.{json,yaml,yml}`,
+        localeKey: 'file'
+      }
+    }
+  },
+  overrides: [
+    {
+      files: ['*.json', '*.json5'],
+      extends: ['plugin:@intlify/vue-i18n/base'],
+    },
+    {
+      files: ['*.yaml', '*.yml'],
+      extends: ['plugin:@intlify/vue-i18n/base'],
+    }
+  ]
+}

tests/fixtures/no-unused-keys/invalid/typescript/locales/en.json

@@ -0,0 +1,13 @@
+{
+  "hello": "hello world",
+  "messages": {
+    "hello": "hi DIO!",
+    "link": "@:message.hello",
+    "nested": {
+      "hello": "hi jojo!"
+    }
+  },
+  "hello_dio": "hello underscore DIO!",
+  "hello {name}": "hello {name}!",
+  "hello-dio": "hello hyphen DIO!"
+}

tests/fixtures/no-unused-keys/invalid/typescript/locales/ja.yaml

@@ -0,0 +1,9 @@
+hello: "ハローワールド"
+messages:
+  hello: "こんにちは、DIO！"
+  link: "@:message.hello"
+  nested:
+    hello: "こんにちは、ジョジョ!"
+hello_dio: "こんにちは、アンダースコア DIO！"
+"hello {name}": "こんにちは、{name}！"
+hello-dio: "こんにちは、ハイフン DIO！"

tests/fixtures/no-unused-keys/invalid/typescript/src/App.vue

@@ -0,0 +1,14 @@
+<template>
+  <div id="app">
+    <p v-t="'hello_dio'">{{ $t('messages.hello') }}</p>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'App' as const,
+  created() {
+    this.$i18n.t('hello {name}', { name: 'DIO' })
+  }
+}
+</script>

tests/fixtures/no-unused-keys/invalid/typescript/src/main.ts

@@ -0,0 +1,2 @@
+const $t = (a:any) => {}
+$t('hello')

tests/lib/rules/no-unused-keys.ts

@@ -892,7 +892,7 @@ describe('no-unused-keys with fixtures', () => {
   describe('errors', () => {
     it('settings.vue-i18n.localeDir', () => {
       const linter = new CLIEngine({
-        cwd,
+        cwd: join(cwd, './valid'),
         baseConfig: {
           extends: [baseConfigPath]
         },
@@ -909,7 +909,7 @@ describe('no-unused-keys with fixtures', () => {
       linter.addPlugin('@intlify/vue-i18n', plugin)
 
       const messages = linter.executeOnFiles(['.'])
-      assert.equal(messages.errorCount, 6)
+      assert.equal(messages.errorCount, 3)
       messages.results
         .map(result => {
           return result.messages.filter(
@@ -929,7 +929,7 @@ describe('no-unused-keys with fixtures', () => {
   describe('valid', () => {
     it('should be not detected unsued keys', () => {
       const linter = new CLIEngine({
-        cwd,
+        cwd: join(cwd, './valid/vue-cli-format'),
         baseConfig: {
           extends: [baseConfigPath],
           settings: {
@@ -964,7 +964,7 @@ describe('no-unused-keys with fixtures', () => {
 
     it('should be not detected unsued keys for constructor-option-format', () => {
       const linter = new CLIEngine({
-        cwd,
+        cwd: join(cwd, './valid/constructor-option-format'),
         baseConfig: {
           extends: [baseConfigPath],
           settings: {
@@ -1004,7 +1004,7 @@ describe('no-unused-keys with fixtures', () => {
   describe('invalid', () => {
     it('should be detected unsued keys', () => {
       const linter = new CLIEngine({
-        cwd,
+        cwd: join(cwd, './invalid/vue-cli-format'),
         baseConfig: {
           extends: [baseConfigPath],
           settings: {
@@ -1225,7 +1225,7 @@ hello_dio: "こんにちは、アンダースコア DIO！"
 
     it('should be detected unsued keys for constructor-option-format', () => {
       const linter = new CLIEngine({
-        cwd,
+        cwd: join(cwd, './invalid/constructor-option-format'),
         baseConfig: {
           extends: [baseConfigPath],
           settings: {
@@ -1542,18 +1542,74 @@ hello_dio: "こんにちは、アンダースコア DIO！"
         }
       )
     })
+
+    it('should be detected unsued keys with typescript', () => {
+      process.chdir(join(cwd, './invalid/typescript'))
+      const linter = new CLIEngine({
+        cwd: join(cwd, './invalid/typescript'),
+        extensions: ['.js', '.vue', '.json', '.yaml', '.yml', '.ts']
+      })
+      linter.addPlugin('@intlify/vue-i18n', plugin)
+
+      const messages = linter.executeOnFiles(['.'])
+      assert.equal(messages.errorCount, 6)
+
+      assert.deepStrictEqual(
+        getResult(
+          messages,
+          '../../fixtures/no-unused-keys/invalid/typescript/locales/en.json',
+          { messageOnly: true }
+        ),
+        {
+          errors: [
+            "unused 'messages.link' key",
+            "unused 'messages.nested.hello' key",
+            "unused 'hello-dio' key"
+          ]
+        }
+      )
+
+      assert.deepStrictEqual(
+        getResult(
+          messages,
+          '../../fixtures/no-unused-keys/invalid/typescript/locales/ja.yaml',
+          { messageOnly: true }
+        ),
+        {
+          errors: [
+            "unused 'messages.link' key",
+            "unused 'messages.nested.hello' key",
+            "unused 'hello-dio' key"
+          ]
+        }
+      )
+    })
   })
 })
 
-function getResult(messages: CLIEngine.LintReport, path: string) {
+function getResult(
+  messages: CLIEngine.LintReport,
+  path: string,
+  options?: { messageOnly?: boolean }
+) {
   const fullPath = resolve(__dirname, path)
   const result = messages.results.find(result => result.filePath === fullPath)!
+  const messageOnly = options?.messageOnly ?? false
+  if (messageOnly) {
+    return {
+      errors: result.messages.map(message => {
+        assert.equal(message.ruleId, '@intlify/vue-i18n/no-unused-keys')
+        return message.message
+      })
+    }
+  }
   const output = SourceCodeFixer.applyFixes(result.source, result.messages)
     .output
   return {
     output,
     errors: result.messages.map(message => {
       assert.equal(message.ruleId, '@intlify/vue-i18n/no-unused-keys')
+
       return {
         message: message.message,
         line: message.line,