从0开始搭建webpack-eslint配置教程

从0开始搭建eslint配置

前言

为了提高代码可读性，以及团队风格统一。便于日后维护，代码风格统一就显得尤为重要。本文从0开始为生成的vue项目增加webpack，脚手架使用webpack simple

1、准备工作

首先初始化项目，打开命令行执行vue init webpack-simple eslint-demo,接下来我们进入项目文件夹内。项目目前是没有eslint规范的。接下来我们一步步为这个项目添加eslint并依照我们团队的代码规范进行配置。

2、安装eslint

首先肯定要先安装eslint拉，npm i eslint -D ,安装完成之后，我们要接着初始化项目，执行eslint -init (之后一路next)，会在当前项目下生成一个.eslintrc.js文件如下：

module.exports = {
    "env": {
        "browser": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 5
    },
    "rules": {
        "indent": [
            "error",
            "tab"
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
};

当然这样的配置肯定是不行的，我们需要修改一些配置，首先dev属性下，我们将其加入{es6: true}的配置，接着我们需要在"parserOptions"配置下加入"ecmaVersion": 2018,（解析器的配置版本这里用的是2018版应该是最新的，你也可以根据需要来设置这个属性）。

3、rules

接下来就要开始最主要的设置规则环节了，我们先运行项目先来试试eslint起作用了没，我们打开main.js，会发现已经有错误警告了，在我们所有’'的地方都有错误提示，这是因为"quotes"配置的为“double”属性，我们平时开发由于用的是单引号这里给改成"single"就可以了，接下来我们就可以往rules里添加配置了，比如我们加入"eqeqeq": "error"这个配置(比较运算符强制使用严格相等)，接下来我们去main.js里输入console.log(1==2)就会发现已经有了报错了。(关于具体的rules请移步eslint中文官网查看)

4、为vue文件增加eslint检测

现在我们进入vue文件，会发现eslint并没有起作用，接下来我们就来配置vue文件的代码风格检测了。由于需要检测vue文件，所以我们需要安装些插件来支持npm - eslint-loader eslint-plugin-vue -D 安装需要的插件。接下来还需要配置下webpack，让eslint知道我们需要去检测哪些文件，接下来打开webpack.config.js，在test中加入如下配置：

{
	test: /\.(js|vue)$/,
	loader: 'eslint-loader',
	enforce: 'pre',
	include: [path.resolve('src'), path.resolve('test')],
	options: {
		// formatter: require('eslint-friendly-formatter'),
		emitWarning: false
	}
}

意思就是告诉webpack，我们需要检测.vue文件。接着我们在.eslintrc.js加入对vue的一些rules配置，我们重启项目后加入配置试一下’vue/no-shared-component-data’: “error”，ok，你会发现vue文件也可以被检测了。还记不记得我们初始化vue项目自带的eslint会出现遮罩提示，有些同学如果不喜欢的话在刚才我们加入的test中，有个emitWarning设置为true，就会关闭这个功能。至此一个完整的增加eslint就配置好了。最后贴出我整理的配置。大部分是根据项目代码风格来配置的，如有不当可以一起修完完善。

{
    "env": {
        "browser": true,
        "es6": true
    },
    extends: ['plugin:vue/essential'],
    plugins: [
        'vue'
    ],
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {
        
        "indent": [
            "error",
            "tab"
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ],
        "no-dupe-keys": "error",
        "use-isnan": "error",
        "block-scoped-var": "error",
        "class-methods-use-this": "error",
        "eqeqeq": "error", // 强制要求严格相等
        "no-alert": "error", // 不允许出现alert
        "no-else-return": "error",
        "no-eval": "error",
        "no-redeclare": "error", // 禁止重复生命变量
        "no-self-assign":"error", // 禁止自我赋值
        "no-self-compare":"error", // 禁止自我比较
        "no-shadow":"error", // 禁止变量声明与外层作用域的变量同名
        "no-unused-vars":"error", // 禁止出现未使用的变量
        "no-use-before-define":"error", // 禁止在变量出现之前就用
        "global-require":"error", // require必须出现在顶部
        "array-bracket-spacing": ["error", "never"], // 禁止出现数组[]左右出现空格
        "comma-dangle":"error", // 禁止末尾出现多余逗号
        "comma-spacing":"error", // 逗号与元素要有空格
        "comma-style":"error", // 逗号要在元素之后
        "func-call-spacing":"error",
        "function-paren-newline":"error",
        "indent":["error", "tab"], // 强制tab缩进
        "keyword-spacing":"error",
        "key-spacing":["error"],
        "line-comment-position": "error", // 强制代码注释在行上方
        "new-cap": "error", // 构造函数首字母大写
        "no-lonely-if": "error", // 禁止 if 作为唯一的语句出现在 else 语句中
        "no-mixed-spaces-and-tabs": "error", // 禁止tab和空格的混合缩进
        "no-inline-comments": "error", // 禁止在代码后放注释，应将其放置在代码上方
        "no-trailing-spaces": "error", // 禁止行尾出现空格
        "no-whitespace-before-property": "error", // 禁止属性前有空白
        "object-curly-spacing": "error",
        "object-property-newline": "error", // 强制将对象属性放在不同行上
        "space-before-function-paren": "error",
        "space-infix-ops": "error", // 操作符周围有空格
        "arrow-spacing": "error", // 剪头函数用大括号
        "arrow-body-style": "error", // 箭头函数参数圆括号
        "arrow-parens": "error", // 箭头函数前后一致的空格
        "constructor-super": "error", // 构造函数必须调用supper
        "no-class-assign": "error", // 禁止修改class生命的变量
        "no-const-assign": "error", // 禁止修改const变量
        "no-dupe-class-members": "error", // 禁止类成员出现重复名称
        "no-duplicate-imports": "error",
        "no-var": "error",
        "prefer-arrow-callback": "error", //  回调函数使用箭头函数
        //vue
      'vue/no-dupe-keys': "error",
      'vue/no-parsing-error': "error", // 禁止出现语法错误
      'vue/no-shared-component-data': "error", // 组件的 data 属性的值必须是一个函数
      'vue/no-template-key': 'off', // 可以让 <template> 使用 key 属性
      'vue/require-render-return': "error", // render 函数必须有返回值
      'vue/require-valid-default-prop': "error", // prop 的默认值必须匹配它的类型
      'vue/return-in-computed-property': "error",// 计算属性必须有返回值
      'vue/valid-template-root': "error", // template 的根节点必须合法
      'vue/valid-v-bind': "error", // v-bind 指令必须合法
      'vue/valid-v-cloak': "error", // v-cloak 指令必须合法
      'vue/valid-v-else-if': "error",// v-else-if 指令必须合法
      'vue/valid-v-else': "error", // v-else 指令必须合法
      'vue/valid-v-for': "error", // v-for 指令必须合法
      'vue/valid-v-html': "error",  // v-html 指令必须合法
      'vue/valid-v-if': "error", // v-if 指令必须合法
      'vue/valid-v-model': "error", // v-model 指令必须合法
      'vue/valid-v-on': "error", // v-on 指令必须合法
      'vue/valid-v-once': "error", // v-once 指令必须合法
      'vue/valid-v-pre': "error", // v-pre 指令必须合法
      'vue/valid-v-show': "error", // v-show 指令必须合法
      'vue/valid-v-text': "error", // v-text 指令必须合法
      'vue/html-end-tags': 'off',
      'vue/no-async-in-computed-properties': "error", // 计算属性禁止包含异步方法
      'vue/no-confusing-v-for-v-if': "error", // 禁止出现难以理解的 v-if 和 v-for
      'vue/no-duplicate-attributes': "error", // 禁止出现重复的属性
      'vue/no-textarea-mustache': "error", // 禁止在 <textarea> 中出现 {{message}}
      'vue/order-in-components': ["error", { // 组件的属性必须为一定的顺序
        "order": [
          "el",
          ["name", "parent"],
          "functional",
          "delimiters",
          ["components", "directives", "filters"],
          ["extends", "mixins"],
          ["model", "props", "propsData"],
          ["data", "computed"],
          ["watch", "LIFECYCLE_HOOKS"],
          "methods",
          ["template", "render", "renderError"]
        ]
      }],
      'vue/require-component-is': "error",// <component> 必须有 v-bind:is
      'vue/require-prop-types': "error", // prop 必须有类型限制
      'vue/require-v-for-key': "error", // v-for 指令的元素必须有 v-bind:key
      'vue/v-bind-style': "error", // @fixable 限制 v-bind 的风格, 统一简写形式
      'vue/v-on-style': "error", // @fixable 限制 v-on 的风格，统一简写形式
    }
};