From 856643bbd46f6010d1562f6ca8b1266ac9bcf476 Mon Sep 17 00:00:00 2001 From: IWANABETHATGUY <974153916@qq.com> Date: Sun, 16 May 2021 16:54:48 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20https://github.com/v?= =?UTF-8?q?uejs/eslint-plugin-vue/issues/1492?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/rules/this-in-template.js | 11 ++++++-- tests/lib/rules/this-in-template.js | 44 +++++++++++++++++++++++++++++ 2 files changed, 53 insertions(+), 2 deletions(-) diff --git a/lib/rules/this-in-template.js b/lib/rules/this-in-template.js index 8ed42345c..671ac56a0 100644 --- a/lib/rules/this-in-template.js +++ b/lib/rules/this-in-template.js @@ -23,7 +23,7 @@ module.exports = { categories: ['vue3-recommended', 'recommended'], url: 'https://eslint.vuejs.org/rules/this-in-template.html' }, - fixable: null, + fixable: 'code', schema: [ { enum: ['always', 'never'] @@ -91,6 +91,10 @@ module.exports = { context.report({ node, loc: node.loc, + fix(fixer) { + // node.parent should be some code like `this.test`, `this?.['result']` + return fixer.replaceText(node.parent, propertyName) + }, message: "Unexpected usage of 'this'." }) } @@ -116,7 +120,10 @@ module.exports = { context.report({ node: reference.id, loc: reference.id.loc, - message: "Expected 'this'." + message: "Expected 'this'.", + fix(fixer) { + return fixer.insertTextBefore(reference.id, 'this.') + } }) } } diff --git a/tests/lib/rules/this-in-template.js b/tests/lib/rules/this-in-template.js index f2a40ff61..5d081f468 100644 --- a/tests/lib/rules/this-in-template.js +++ b/tests/lib/rules/this-in-template.js @@ -121,41 +121,73 @@ function createInvalidTests(prefix, options, message, type) { return [ { code: ``, + output: ``, errors: [{ message, type }], options }, { code: ``, + output: ``, errors: [{ message, type }], options }, { code: ``, + output: ``, errors: [{ message, type }], options }, { code: ``, + output: ``, errors: [{ message, type }], options }, { code: ``, + output: ``, errors: [{ message, type }], options }, { code: ``, + output: ``, errors: [{ message, type }], options }, { code: ``, + output: ``, errors: [{ message, type }], options }, { code: ``, + output: ``, errors: [{ message, type }], options } @@ -172,11 +204,13 @@ function createInvalidTests(prefix, options, message, type) { : [ { code: ``, + output: ``, errors: [{ message, type }], options }, { code: ``, + output: ``, errors: [{ message, type }], options } @@ -225,13 +259,23 @@ ruleTester.run('this-in-template', rule, { .concat([ { code: ``, + output: ``, errors: ["Unexpected usage of 'this'."], options: ['never'] }, { code: ``, + output: ``, errors: ["Unexpected usage of 'this'."], options: ['never'] } ]) }) + +function suggestionPrefix(prefix, options) { + if (options[0] === 'always' && !['this.', 'this?.'].includes(prefix)) { + return 'this.' + } else { + return '' + } +} From b161c20f358e43722e2e2c8d3fd85b97f77a7480 Mon Sep 17 00:00:00 2001 From: IWANABETHATGUY <974153916@qq.com> Date: Sun, 16 May 2021 17:00:00 +0800 Subject: [PATCH 2/3] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20update=20doc?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/rules/README.md | 4 ++-- docs/rules/this-in-template.md | 5 +++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/rules/README.md b/docs/rules/README.md index e34e4ca2b..9717d49ae 100644 --- a/docs/rules/README.md +++ b/docs/rules/README.md @@ -157,7 +157,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi | [vue/no-multiple-slot-args](./no-multiple-slot-args.md) | disallow to pass multiple arguments to scoped slots | | | [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack | | | [vue/order-in-components](./order-in-components.md) | enforce order of properties in components | :wrench: | -| [vue/this-in-template](./this-in-template.md) | disallow usage of `this` in template | | +| [vue/this-in-template](./this-in-template.md) | disallow usage of `this` in template | :wrench: | ## Priority A: Essential (Error Prevention) for Vue.js 2.x @@ -267,7 +267,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi | [vue/no-multiple-slot-args](./no-multiple-slot-args.md) | disallow to pass multiple arguments to scoped slots | | | [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack | | | [vue/order-in-components](./order-in-components.md) | enforce order of properties in components | :wrench: | -| [vue/this-in-template](./this-in-template.md) | disallow usage of `this` in template | | +| [vue/this-in-template](./this-in-template.md) | disallow usage of `this` in template | :wrench: | ## Uncategorized diff --git a/docs/rules/this-in-template.md b/docs/rules/this-in-template.md index 7924ad3b5..f193e7e37 100644 --- a/docs/rules/this-in-template.md +++ b/docs/rules/this-in-template.md @@ -10,12 +10,13 @@ since: v3.13.0 > disallow usage of `this` in template - :gear: This rule is included in `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`. +- :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 This rule aims at preventing usage of `this` in Vue templates. - + ```vue