vue报错：'XX' is defined but never used no-unused-vars-阿里云开发者社区

vue报错：'XX' is defined but never used no-unused-vars

2022-05-12 1935

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue报错：'XX' is defined but never used no-unused-vars

参考地址：http://www.gold404.cn/info/87

导致这个报错的原因就是eslint校验，

就是你当初在vue创建脚手架的时候选择了eslint校验；

后面你绝对会碰到这样的报错，毋庸置疑。

而这个报错信息也很简单，就是你定义了某个变量，但是你没有使用它。

eslint规范就是你要么不定义，要么定义了就一定得用，就像那个啥，你必须得负责任

下面说说怎么一劳永逸的解决这个报错吧。如果你是使用vue-clii3以上版本，打开你的.eslintrc.js文件，在rule中添加：

.eslintrc.js文件

module.exports = {
    root: true,
    parserOptions: {
      sourceType: 'module'
    },
    parser: "vue-eslint-parser",
    env: {
      browser: true,
      node: true,
      es6: true,
    },
    rules: {
      'no-console': 'off',
     'no-unused-vars':'off'//意思就是不让eslint校验我定义有没有用了。
    }
  }

如果你没有这个文件创建这样的文件即可。

这样你就可以解决这个问题了

eslint简介

eslint是用来管理和检测js代码风格的工具，可以和编辑器搭配使用，如vscode的eslint插件当有不符合配置文件内容的代码出现就会报错或者警告

// http://eslint.org/docs/user-guide/configuring
module.exports = {
    //此项是用来告诉eslint找当前配置文件不能往父级查找
    root: true, 
    //此项是用来指定eslint解析器的，解析器必须符合规则，babel-eslint解析器是对babel解析器的包装使其与ESLint解析
    parser: 'babel-eslint',
    //此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式
    parserOptions: {
        sourceType: 'module'
    },
    //此项指定环境的全局变量，下面的配置指定为浏览器环境
    env: {
        browser: true,
    },
    // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
    // 此项是用来配置标准的js风格，就是说写代码的时候要规范的写，如果你使用vs-code我觉得应该可以避免出错
    extends: 'standard',
    // required to lint *.vue files
    // 此项是用来提供插件的，插件名称省略了eslint-plugin-，下面这个配置是用来规范html的
    plugins: [
        'html'
    ],
    // add your custom rules here
    // 下面这些rules是用来设置从插件来的规范代码的规则，使用必须去掉前缀eslint-plugin-
    // 主要有如下的设置规则，可以设置字符串也可以设置数字，两者效果一致
    // "off" -> 0 关闭规则
    // "warn" -> 1 开启警告规则
    //"error" -> 2 开启错误规则
    // 了解了上面这些，下面这些代码相信也看的明白了
    'rules': {
        // allow paren-less arrow functions
        'arrow-parens': 0,
        // allow async-await
        'generator-star-spacing': 0,
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
    }
}