vue eslint简要配置教程详解

介绍：

Vue代码的质量保证是很有必要的，eslint就是很好的工具之一。在Vue项目中，如何配置eslint呢？下面提供一份简要配置教程。

正文：

1. 安装依赖

要在Vue项目中使用eslint，需要安装对应的依赖：

npm install eslint eslint-loader eslint-plugin-vue -D

这里需要注意，eslint是eslint本身的依赖，eslint-loader是webpack需要用到的一个依赖，eslint-plugin-vue是用于校验Vue文件的依赖。

1. 创建配置文件

在项目根目录中创建文件.eslintrc.js文件，用于存放eslint配置，其中需要包含一些常用的规则配置，如下所示：

module.exports = {
  root: true,
  parserOptions: {
    parser: "babel-eslint",
    ecmaVersion: 7,
    sourceType: "module"
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: ["plugin:vue/recommended", "eslint:recommended"],
  plugins: ["vue"],
  rules: {
    "vue/component-name-in-template-casing": ["error", "PascalCase"],
    "vue/html-closing-bracket-newline": [
      "error",
      {
        singleline: "never",
        multiline: "always"
      }
    ],
    "vue/html-self-closing": [
      "error",
      {
        html: {
          void: "always",
          normal: "never",
          component: "always"
        },
        svg: "always",
        math: "always"
      }
    ],
    "vue/max-attributes-per-line": [
      "error",
      {
        singleline: 5,
        multiline: {
          max: 1,
          allowFirstLine: true
        }
      }
    ]
  }
};

在这份配置中，我们启用了一些常用的规则，如vue/component-name-in-template-casing 用于检查组件名称是否符合规范，vue/html-closing-bracket-newline 用于检查标签的闭合情况，vue/max-attributes-per-line 用于限制元素的最大属性数量等。

1. 使用

在配置完成之后，可以在命令行中执行如下命令，进行代码检查和格式化：

npm run lint

针对vue文件，还可以使用如下命令：

npm run lint:fix

该命令会自动修复代码中的一些错误和警告。

示例：

<template>
  <div>
    <!-- ... -->
  </div>
</template>

<script>
export default {
  name: "myComponent",
  props: {
    name: {
      type: String,
      required: true,
      default: "world"
    },
    age: {
      type: Number,
      default: 18
    }
  },
  computed: {
    // ...
  },
  methods: {
    // ...
  }
};
</script>

<style>
/* ... */
</style>

这是一个最基本的Vue文件，其中包含了模板、脚本和样式。在编辑器中，输入上述代码后，保存并在命令行中执行npm run lint:fix，代码会自动修复成以下形式：

<template>
  <div>
    <!-- ... -->
  </div>
</template>

<script>
export default {
  name: "MyComponent",
  props: {
    name: {
      type: String,
      required: true,
      default: "world"
    },
    age: {
      type: Number,
      default: 18
    }
  },
  computed: {
    // ...
  },
  methods: {
    // ...
  }
};
</script>

<style scoped>
/* ... */
</style>

可见，组件名称被修改为了帕斯卡命名方式(PascalCase)，样式标签也添加了scoped属性。这些都是在我们前面编写的eslint配置中所定义的规则。