⭐ new(rule): No raw text ignore options (#31) by @stevelacey

Author: stevelacey

docs/rules/no-raw-text.md

@@ -65,3 +65,19 @@ export default {
   // ...
 }
 ```
+
+## :gear: Options
+
+```json
+{
+  "vue-i18n/no-raw-text": ["error", {
+    "ignoreNodes": ["md-icon", "v-icon"],
+    "ignorePattern": "^[-#:()&]+$",
+    "ignoreText": ["EUR", "HKD", "USD"]
+  }]
+}
+```
+
+- `ignoreNodes`: specify nodes to ignore such as icon components
+- `ignorePattern`: specify a regexp pattern that matches strings to ignore
+- `ignoreText`: specify an array of strings to ignore

docs/rules/no-unused-keys.md

@@ -76,7 +76,7 @@ const i18n = new VueI18n({
 i18n.t('hi')
 ```
 
-## Options
+## :gear: Options
 
 ```json
 {

lib/rules/no-raw-text.js

@@ -6,7 +6,8 @@
 const { parse, AST } = require('vue-eslint-parser')
 const { defineTemplateBodyVisitor } = require('../utils/index')
 
-const hasOnlyLineBreak = value => /^[\r\n\t\f\v]+$/.test(value.replace(/ /g, ''))
+const config = {}
+const hasOnlyWhitespace = value => /^[\r\n\s\t\f\v]+$/.test(value)
 const INNER_START_OFFSET = '<template>'.length
 
 function calculateLoc (node, base = null) {
@@ -65,7 +66,11 @@ function checkVExpressionContainerText (context, node, baseNode = null) {
 }
 
 function checkRawText (context, value, loc) {
-  if (typeof value !== 'string' || hasOnlyLineBreak(value)) { return }
+  if (typeof value !== 'string' || hasOnlyWhitespace(value)) { return }
+
+  if (config.ignorePattern.test(value.trim())) { return }
+
+  if (config.ignoreText.includes(value.trim())) { return }
 
   context.report({
     loc,
@@ -107,12 +112,30 @@ function getComponentTemplateNode (value) {
 }
 
 function create (context) {
+  config.ignorePattern = /^$/
+  config.ignoreNodes = []
+  config.ignoreText = []
+
+  if (context.options[0] && context.options[0].ignorePattern) {
+    config.ignorePattern = new RegExp(context.options[0].ignorePattern, 'u')
+  }
+
+  if (context.options[0] && context.options[0].ignoreNodes) {
+    config.ignoreNodes = context.options[0].ignoreNodes
+  }
+
+  if (context.options[0] && context.options[0].ignoreText) {
+    config.ignoreText = context.options[0].ignoreText
+  }
+
   return defineTemplateBodyVisitor(context, { // template block
     VExpressionContainer (node) {
       checkVExpressionContainerText(context, node)
     },
 
     VText (node) {
+      if (config.ignoreNodes.includes(node.parent.name)) { return }
+
       checkRawText(context, node.value, node.loc)
     }
   }, { // script block or scripts
@@ -148,7 +171,22 @@ module.exports = {
       recommended: true
     },
     fixable: null,
-    schema: []
+    schema: [
+      {
+        type: "object",
+        properties: {
+          ignoreNodes: {
+            type: "array"
+          },
+          ignorePattern: {
+            type: "string"
+          },
+          ignoreText: {
+            type: "array"
+          },
+        }
+      }
+    ]
   },
   create
 }

tests/lib/rules/no-raw-text.js

@@ -19,18 +19,20 @@ const tester = new RuleTester({
 
 tester.run('no-raw-text', rule, {
   valid: [{
-    code: `<template>
-      <div class="app">
-        <p class="a1">{{ $t('hello') }}</p>
-        <p class="inner">{{ $t('click') }}<a href="/foo">{{ $t('here') }}</a>{{ $t('terminal') }}</p>
-      </div>
-    </template>`
-  }, {
-    code: `
-    <template>
-      <comp :value="1" :msg="$t('foo.bar')"/>
-      <p>{{ hello }}</p>
-    </template>
+    code: `
+      <template>
+        <div class="app">
+          <p class="a1">{{ $t('hello') }}</p>
+          <p class="inner">{{ $t('click') }}<a href="/foo">{{ $t('here') }}</a>{{ $t('terminal') }}</p>
+        </div>
+      </template>
+    `
+  }, {
+    code: `
+      <template>
+        <comp :value="1" :msg="$t('foo.bar')"/>
+        <p>{{ hello }}</p>
+      </template>
     `
   }, {
     filename: 'test.vue',
@@ -55,6 +57,29 @@ tester.run('no-raw-text', rule, {
         }
       }
     `
+  }, {
+    code: `
+      <template>
+        <md-icon>person</md-icon>
+        <v-icon>menu</v-icon>
+      </template>
+    `,
+    options: [{ ignoreNodes: ['md-icon', 'v-icon'] }],
+  }, {
+    code: `
+      <template>
+        <p>{{ $t('foo') }}: {{ $t('bar') }}</p>
+      </template>
+    `,
+    options: [{ ignorePattern: '^[-.#:()&]+$' }],
+  }, {
+    code: `
+      <template>
+        <p>hello</p>
+        <p>world</p>
+      </template>
+    `,
+    options: [{ ignoreText: ['hello', 'world'] }],
   }],
 
   invalid: [{
@@ -191,5 +216,39 @@ tester.run('no-raw-text', rule, {
     errors: [{
       message: `raw text 'hello' is used`, line: 4
     }]
+  }, {
+    code: `
+      <template>
+        <md-icon>person</md-icon>
+        <v-icon>menu</v-icon>
+        <p>hello</p>
+      </template>
+    `,
+    options: [{ ignoreNodes: ['md-icon', 'v-icon'] }],
+    errors: [{
+      message: `raw text 'hello' is used`, line: 5
+    }]
+  }, {
+    code: `
+      <template>
+        <p>{{ $t('foo') }}: {{ $t('bar') }}</p>
+        <p>hello</p>
+      </template>
+    `,
+    options: [{ ignorePattern: '^[-.#:()&]+$' }],
+    errors: [{
+      message: `raw text 'hello' is used`, line: 4
+    }]
+  }, {
+    code: `
+      <template>
+        <p>hello</p>
+        <p>world</p>
+      </template>
+    `,
+    options: [{ ignoreText: ['hello'] }],
+    errors: [{
+      message: `raw text 'world' is used`, line: 4
+    }]
   }]
 })