Supports for Vue custom block (#26)

* Supports for Vue custom block

* fix

* add package

* fix

* add testcase

* Update

* rename rule

* Add auto rule and deprecate jsonc/auto-config

* Fix playgroud

* Update doc

* update documents

* update

Author: ota-meshi

.github/workflows/GHPages.yml

@@ -6,7 +6,7 @@ on:
 
 jobs:
   deploy-docs:
-    runs-on: macos-latest
+    runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v1

README.md

@@ -16,8 +16,13 @@
 
 This ESLint plugin provides linting rules relate to better ways to help you avoid problems when using [JSON], [JSONC] and [JSON5].
 
-- You can apply rules similar to the rules you use for JavaScript to JSON using the shareable config `"plugin:jsonc/auto-config"` provided by this plugin.
+- You can use ESLint to lint [JSON].
+- You can apply rules similar to the rules you use for JavaScript to JSON using the [`"jsonc/auto"`](https://ota-meshi.github.io/eslint-plugin-jsonc/rules/auto.html) rule provided by this plugin.
 - You can choose the appropriate config provided by this plugin depending on whether you are using [JSON], [JSONC] or [JSON5].
+- Supports [Vue SFC](https://vue-loader.vuejs.org/spec.html) custom blocks such as `<i18n>`.  
+  Requirements `vue-eslint-parser` v7.3.0 and above.
+- Supports ESLint directives. e.g. `// eslint-disable-next-line`
+- You can check your code in real-time using the ESLint editor integrations.
 
 You can check on the [Online DEMO](https://ota-meshi.github.io/eslint-plugin-jsonc/playground/).
 
@@ -47,7 +52,7 @@ npm install --save-dev eslint eslint-plugin-jsonc
 ```
 
 > **Requirements**
-> 
+>
 > - ESLint v6.0.0 and above
 > - Node.js v8.10.0 and above
 
@@ -84,7 +89,6 @@ This plugin provides configs:
 - `plugin:jsonc/recommended-with-json` ... Recommended configuration for JSON.
 - `plugin:jsonc/recommended-with-jsonc` ... Recommended configuration for JSONC.
 - `plugin:jsonc/recommended-with-json5` ... Recommended configuration for JSON5.
-- `plugin:jsonc/auto-config` ... Automatically apply jsonc rules similar to your configured ESLint core rules to JSON.
 
 See [the rule list](https://ota-meshi.github.io/eslint-plugin-jsonc/rules/) to get the `rules` that this plugin provides.
 
@@ -137,6 +141,7 @@ The rules with the following star :star: are included in the config.
 
 | Rule ID | Description | Fixable | JSON | JSONC | JSON5 |
 |:--------|:------------|:-------:|:----:|:-----:|:-----:|
+| [jsonc/auto](https://ota-meshi.github.io/eslint-plugin-jsonc/rules/auto.html) | apply jsonc rules similar to your configured ESLint core rules | :wrench: |  |  |  |
 | [jsonc/key-name-casing](https://ota-meshi.github.io/eslint-plugin-jsonc/rules/key-name-casing.html) | enforce naming convention to property key names |  |  |  |  |
 | [jsonc/no-bigint-literals](https://ota-meshi.github.io/eslint-plugin-jsonc/rules/no-bigint-literals.html) | disallow BigInt literals |  | :star: | :star: | :star: |
 | [jsonc/no-comments](https://ota-meshi.github.io/eslint-plugin-jsonc/rules/no-comments.html) | disallow comments |  | :star: |  |  |
@@ -146,6 +151,7 @@ The rules with the following star :star: are included in the config.
 | [jsonc/no-template-literals](https://ota-meshi.github.io/eslint-plugin-jsonc/rules/no-template-literals.html) | disallow template literals | :wrench: | :star: | :star: | :star: |
 | [jsonc/no-undefined-value](https://ota-meshi.github.io/eslint-plugin-jsonc/rules/no-undefined-value.html) | disallow `undefined` |  | :star: | :star: | :star: |
 | [jsonc/valid-json-number](https://ota-meshi.github.io/eslint-plugin-jsonc/rules/valid-json-number.html) | disallow invalid number for JSON | :wrench: | :star: | :star: |  |
+| [jsonc/vue-custom-block/no-parsing-error](https://ota-meshi.github.io/eslint-plugin-jsonc/rules/vue-custom-block/no-parsing-error.html) | disallow parsing errors in Vue custom blocks |  | :star: | :star: | :star: |
 
 ### Extension Rules
 

docs/.vuepress/components/components/EslintPluginEditor.vue

@@ -42,12 +42,25 @@ export default {
         dark: {
             type: Boolean,
         },
+        language: {
+            type: String,
+            default:"json"
+        },
+        fileName: {
+            type: String,
+            default: "a.json"
+        },
+        parser: {
+            type: String,
+            default: "jsonc-eslint-parser"
+        },
     },
 
     data() {
         return {
             eslint4b: null,
-            parseForESLint: null,
+            jsoncESLintParser: null,
+            vueESLintParser: null,
             format: {
                 insertSpaces: true,
                 tabSize: 2,
@@ -84,29 +97,22 @@ export default {
                     SharedArrayBuffer: false,
                 },
                 rules: this.rules,
-                parser: "jsonc-eslint-parser",
+                parser: this.parser,
                 parserOptions: {
                     sourceType: "script",
                     ecmaVersion: 2021,
                 },
             }
         },
-        fileName() {
-            return "a.json"
-        },
-        language() {
-            return "json"
-        },
         linter() {
-            if (!this.eslint4b || !this.parseForESLint) {
+            if (!this.eslint4b || !this.jsoncESLintParser || !this.vueESLintParser) {
                 return null
             }
             const Linter = this.eslint4b
 
             const linter = new Linter()
-            linter.defineParser("jsonc-eslint-parser", {
-                parseForESLint: this.parseForESLint,
-            })
+            linter.defineParser("jsonc-eslint-parser", this.jsoncESLintParser)
+            linter.defineParser("vue-eslint-parser", this.vueESLintParser)
 
             for (const k of Object.keys(plugin.rules)) {
                 const rule = plugin.rules[k]
@@ -119,13 +125,14 @@ export default {
 
     async mounted() {
         // Load linter asynchronously.
-        const [{ default: eslint4b }, { parseForESLint }] = await Promise.all([
+        const [{ default: eslint4b }, jsoncESLintParser, vueESLintParser] = await Promise.all([
             import("eslint4b"),
-            // eslint-disable-next-line node/no-extraneous-import -- DEMO
             import("espree").then(() => import("jsonc-eslint-parser")),
+            import("espree").then(() => import("vue-eslint-parser")),
         ])
         this.eslint4b = eslint4b
-        this.parseForESLint = parseForESLint
+        this.jsoncESLintParser = jsoncESLintParser
+        this.vueESLintParser = vueESLintParser
 
         const editor = this.$refs.editor
 

docs/.vuepress/components/components/RulesSettings.vue

@@ -11,16 +11,16 @@
                     <label class="category-title">
                         <input
                             :checked="
-                                category.rules.every((rule) =>
+                                filterRules(category.rules).every((rule) =>
                                     isErrorState(rule.ruleId)
                                 )
                             "
                             type="checkbox"
                             :indeterminate.prop="
-                                !category.rules.every((rule) =>
+                                !filterRules(category.rules).every((rule) =>
                                     isErrorState(rule.ruleId)
                                 ) &&
-                                !category.rules.every(
+                                !filterRules(category.rules).every(
                                     (rule) => !isErrorState(rule.ruleId)
                                 )
                             "
@@ -32,7 +32,7 @@
 
                 <ul class="rules">
                     <li
-                        v-for="rule in category.rules"
+                        v-for="rule in filterRules(category.rules)"
                         :key="rule.ruleId"
                         class="rule"
                         :class="rule.classes"
@@ -90,9 +90,12 @@ export default {
     },
     watch: {},
     methods: {
+        filterRules(rules) {
+            return rules.filter(rule=>rule.ruleId !== 'jsonc/auto')
+        },
         onAllClick(category, e) {
             const rules = Object.assign({}, this.rules)
-            for (const rule of category.rules) {
+            for (const rule of this.filterRules(category.rules)) {
                 if (e.target.checked) {
                     rules[rule.ruleId] = "error"
                 } else {

docs/.vuepress/components/eslint-code-block.vue

@@ -6,6 +6,9 @@
         :rules="rules"
         dark
         :fix="fix"
+        :language="language"
+        :file-name="fileName"
+        :parser="parser"
     />
 </template>
 
@@ -25,6 +28,18 @@ export default {
                 return {}
             },
         },
+        language: {
+            type: String,
+            default:undefined
+        },
+        fileName: {
+            type: String,
+            default:undefined
+        },
+        parser: {
+            type: String,
+            default:undefined
+        },
     },
 
     computed: {

docs/.vuepress/components/rules/index.js

@@ -88,6 +88,9 @@ categories.sort((a, b) =>
 
 // eslint-disable-next-line node/no-unsupported-features/es-syntax -- DEMO
 export const DEFAULT_RULES_CONFIG = allRules.reduce((c, r) => {
+    if(r.ruleId === "jsonc/auto") {
+        return c
+    }
     if (r.ruleId === "vue/no-parsing-error") {
         c[r.ruleId] = "error"
     } else {

docs/README.md

@@ -16,8 +16,12 @@
 
 This ESLint plugin provides linting rules relate to better ways to help you avoid problems when using [JSON], [JSONC] and [JSON5].
 
-- You can apply rules similar to the rules you use for JavaScript to JSON using the shareable config `"plugin:jsonc/auto-config"` provided by this plugin.
+- You can use ESLint to lint [JSON].
+- You can apply rules similar to the rules you use for JavaScript to JSON using the [`"jsonc/auto"`](./rules/auto.md) rule provided by this plugin.
 - You can choose the appropriate config provided by this plugin depending on whether you are using [JSON], [JSONC] or [JSON5].
+- Supports [Vue SFC](https://vue-loader.vuejs.org/spec.html) custom blocks such as `<i18n>`.
+- Supports ESLint directives. e.g. `// eslint-disable-next-line`
+- You can check your code in real-time using the ESLint editor integrations.
 
 You can check on the [Online DEMO](./playground/).
 

docs/rules/README.md

@@ -13,6 +13,7 @@ The rules with the following star :star: are included in the `plugin:jsonc/recom
 
 | Rule ID | Description | Fixable | JSON | JSONC | JSON5 |
 |:--------|:------------|:-------:|:----:|:-----:|:-----:|
+| [jsonc/auto](./auto.md) | apply jsonc rules similar to your configured ESLint core rules | :wrench: |  |  |  |
 | [jsonc/key-name-casing](./key-name-casing.md) | enforce naming convention to property key names |  |  |  |  |
 | [jsonc/no-bigint-literals](./no-bigint-literals.md) | disallow BigInt literals |  | :star: | :star: | :star: |
 | [jsonc/no-comments](./no-comments.md) | disallow comments |  | :star: |  |  |
@@ -22,6 +23,7 @@ The rules with the following star :star: are included in the `plugin:jsonc/recom
 | [jsonc/no-template-literals](./no-template-literals.md) | disallow template literals | :wrench: | :star: | :star: | :star: |
 | [jsonc/no-undefined-value](./no-undefined-value.md) | disallow `undefined` |  | :star: | :star: | :star: |
 | [jsonc/valid-json-number](./valid-json-number.md) | disallow invalid number for JSON | :wrench: | :star: | :star: |  |
+| [jsonc/vue-custom-block/no-parsing-error](./vue-custom-block/no-parsing-error.md) | disallow parsing errors in Vue custom blocks |  | :star: | :star: | :star: |
 
 ## Extension Rules
 

docs/rules/auto.md

@@ -0,0 +1,29 @@
+---
+pageClass: "rule-details"
+sidebarDepth: 0
+title: "jsonc/auto"
+description: "apply jsonc rules similar to your configured ESLint core rules"
+---
+# jsonc/auto
+
+> apply jsonc rules similar to your configured ESLint core rules
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+Automatically apply jsonc rules similar to your configured ESLint core rules to JSON.
+
+This rule checks the ESLint core rules you are already using in your configuration and internally turns ON the [Extension Rules](./README.md#extension-rules) provided by this plugin.
+
+If you already have the `jsonc/*` rule turned ON, that rule will not apply. Instead, that rule will check your JSON.
+The rules contained in the sharable configuration work as well. If you use the `"plugin:jsonc/recommended-with-json"` configuration, the `auto` rule will not turn ON the `jsonc/comma-dangle` rule even if you were using the `comma-dangle` rule.
+
+## :wrench: Options
+
+Nothing.
+
+## Implementation
+
+- [Rule source](https://github.com/ota-meshi/eslint-plugin-jsonc/blob/master/lib/rules/auto.ts)
+- [Test source](https://github.com/ota-meshi/eslint-plugin-jsonc/blob/master/tests/lib/rules/auto.js)

docs/rules/vue-custom-block/no-parsing-error.md

@@ -0,0 +1,42 @@
+---
+pageClass: "rule-details"
+sidebarDepth: 0
+title: "jsonc/vue-custom-block/no-parsing-error"
+description: "disallow parsing errors in Vue custom blocks"
+---
+# jsonc/vue-custom-block/no-parsing-error
+
+> disallow parsing errors in Vue custom blocks
+
+- :gear: This rule is included in all of `"plugin:jsonc/recommended-with-json"`, `"plugin:jsonc/recommended-with-json5"` and `"plugin:jsonc/recommended-with-jsonc"`.
+
+## :book: Rule Details
+
+This rule reports JSON parsing errors in Vue custom blocks.
+
+<eslint-code-block parser="vue-eslint-parser" file-name="sample.vue" language="html">
+
+```vue
+<i18n>
+{ "foo": }
+</i18n>
+
+<my-block lang="json">
+{ "foo": }
+</my-block>
+
+<script>
+/* eslint jsonc/vue-custom-block/no-parsing-error: 'error' */
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## Implementation
+
+- [Rule source](https://github.com/ota-meshi/eslint-plugin-jsonc/blob/master/lib/rules/vue-custom-block/no-parsing-error.ts)
+- [Test source](https://github.com/ota-meshi/eslint-plugin-jsonc/blob/master/tests/lib/rules/vue-custom-block/no-parsing-error.js)