Eslint报错解决合集

前言：

最近公司来了很多新的小伙伴，为了解决代码混乱的问题，特地了解了eslint这个神器。

花了大概一周，彻底把代码规范过了一遍。得到的大致思路如下。

配齐工具： eslint+prettier+vscode，如果有其他格式化插件，最好卸载禁用。不包括（Vetur），这是为了开发时候可以快速格式化。

定义规则： 在VUE项目的根目录，新建.eslintrc和.prettierrc文件（无后缀），这是为了让规则可定义，更贴合自己公司内的开发习惯；

配置命令（拓展）: 在package.json中配置格式化检测和修复的命令，这是为让开发者更方便检测自己的代码是否符合规范。

本文档根据公司的开发情况不定期进行更新，遇到问题就会添加上去，就酱。

参考文档：

eslintVue文档（使用谷歌翻译即可）

VS Code书写vue项目配置 eslint+prettier 统一代码风格

使用 Eslint + Prettier + husky + lint-staged 提高前端项目质量、统一项目代码风格

报错整理：

1， Prop "test" should define at least its type vue/require-prop-types

表名需要将test设定一个默认值；

假设test为对象，则设定

  props: {
    test: {
      type: Object,
      default: () => {
        return {
          id: ''
        };
      }
    }
  },
复制代码

假定为数组，则设定

    messageList: {
      type: Array,
      default: []
    }
复制代码

2，Strings must use singlequote quotes

表示变量使用了双引号，把表示变量的双引号改为单引号即可。

错误格式：

  data() {
    return {
      activeId: ""
    };
  },
复制代码

正确格式：

  data() {
    return {
      activeId: ''
    };
  },
复制代码

3,Expected to be enclosed by double quotes (vue/html-quotes)

这个报错代表让你要将单引号改为双引号，比如：

错误格式：

  <li v-for="(item,index) in flowContent" :key='index'>
      <rightFlow :flowContent="item"></rightFlow>
  </li>
复制代码

正确格式：

  <li v-for="(item,index) in flowContent" :key="index">
      <rightFlow :flowContent="item"></rightFlow>
  </li>
复制代码

4，Trailing spaces not allowed no-trailing-spaces

代表有的地方空格多余，比如标签结尾处，只要删除多余空格即可

错误格式：

 <div class="title-button" ></div>
复制代码

正确格式：

 <div class="title-button"></div>
复制代码