Vue报错 Variable ‘scope‘ is already declared in the upper scope

最新推荐文章于 2024-01-24 14:58:04 发布

原创最新推荐文章于 2024-01-24 14:58:04 发布 · 5.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

前端同时被 2 个专栏收录

39 篇文章

订阅专栏

html

39 篇文章

订阅专栏

在Vue项目中遇到Eslint报错'Variable 'scope' is already declared in the upper scope'。该错误源于eslint-plugin-vue的一个规则。通过查阅文档了解这是防止变量重复声明的规则。解决方法是在.eslintrc.js配置文件中针对此规则进行调整，避免错误提示。

Vue报错 Variable ‘scope’ is already declared in the upper scope’

项目场景：

Vue "vue": "2.6.10",
Eslint : "eslint": "6.7.2",
eslint-plugin-vue : "eslint-plugin-vue": "6.2.2",

问题描述：

		<el-table
          :data="..."
          ...
        >
        <el-table-column align="center" type="expand" width="160" label="详细信息">
            <template slot-scope="scope">
	             <el-table
		          :data="scope.row.x"
		          ...
		        >
		        </el-table>
            </template>
        </el-table-column>
	       
        </el-table>

npm run link会报错:

$ npm run link
> eslint --ext .js,.vue src

/Users/xxx/Desktop/project/web/..../xxx.vue
 xxx:xxx  warning  Variable 'scope' is already declared in the upper scope  vue/no-template-shadow
...

原因分析：

eslint 报的错，提示的是vue/no-template-shadow
搜了一下这个是eslint-plugin-vue中的规则，也就是.eslintrc.js文件中引入的extends: ['plugin:vue/recommended'],里面的规则查看详细文档地址。

解决方案：

.eslintrc.js中修改如下

rules: {
'vue/no-template-shadow':'off',
}

就不会再报错了。