ESLint 是如何检查 .vue 文件的

ESLint是一个开源的JavaScript代码检查工具，可以用于检查JavaScript、JSX和Vue等类型的文件。ESLint在检查.vue文件时，主要是借助eslint-plugin-vue插件来实现的。

具体而言，ESLint在检查.vue文件时，需要额外配置一些参数来让它正常工作。以下是基本的配置：

{
  "plugins": [
    "vue"
  ],
  "parserOptions": {
    "parser": "babel-eslint",
    "sourceType": "module",
    "ecmaVersion": 2018
  },
  "extends": [
    "plugin:vue/recommended"
  ]
}

具体解释如下：

• plugins：指定要使用的插件，这里加入了vue插件。
• parserOptions：指定解析器和语法版本，这里使用了babel-eslint作为解析器。
• sourceType：指定使用了ES module作为模块导入。
• ecmaVersion：指定使用了ECMAScript 2018的语法版本。
• extends：指定用于检查Vue文件的标准配置。

以上基础配置完成后，就可以进行.vue文件的检查了。下面是两个示例：

示例1

如下是一段.vue文件的示例：

<template>
  <div>
    <h1>{{title}}</h1>
    <p>{{content}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello World',
      content: 'ESLint is awesome'
    }
  }
}
</script>

<style>
h1 {
  font-size: 24px;
}
p {
  font-size: 18px;
}
</style>

该文件包含了模板、脚本和样式三部分内容。如果代码中有一些语法错误，或者没有按照规范来书写，ESLint会指出错误和警告。

下面是一些在该示例中常见的错误和警告：

• 标签属性值应使用双引号：<h1 v-show='msg'></h1> 应该改为 <h1 v-show="msg"></h1>。
• data 必须是一个函数：data() {} 应该改为 data: function() {}。
• 没有使用引号包裹字符串：<h1>{{title}}</h1> 应该改为 <h1>{{'title'}}</h1>。

ESLint也可以为你检查命名空间、属性等问题。当你写代码时，若出现类型错误、命名有误等，ESLint也会发出警告。

示例2

另一个示例是检查.vue文件是否符合特定的代码规范。比如可以设置以下规则：

{
  // 禁用 console 和 debugger 语句
  "no-console": "warn",
  "no-debugger": "warn",
  // 禁用全局变量
  "no-undef": "error",
  // 对象必须换行
  "object-curly-newline": ["error", {
    "consistent": true
  }],
}

以上规则中，“no-console”表示禁用 console 语句，如果有用到 console 语句就会发出警告；“no-debugger”表示禁用 debugger 语句，如果有用到 debugger 语句会发出警告；“no-undef”表示禁用全局变量，在代码中没有声明就调用变量，也会发出警告；“object-curly-newline”表示对象必须换行，在对象的定义之前和之后都要有空行，如果没有，ESLint也会发出警告。

总的来说，ESLint能够方便地检测.vue文件中的语法错误、代码风格规范等问题，能够帮助你提高代码的质量。