面试题：Vue项目中如何通过ESLint保障代码质量

1. 在Vue项目中集成ESLint

初始化项目：
- 如果是新建项目，使用Vue CLI创建项目时，在交互过程中可以选择安装ESLint。例如，运行vue create my - project，在提示Pick a preset:时，选择Manually select features，然后勾选Linter / Formatter，接着按照提示选择ESLint相关配置（如ESLint + Prettier等）。
- 如果是已有项目，先确保安装了Node.js和npm（或yarn）。然后通过npm install eslint eslint - vue - plugin --save - dev（或yarn add eslint eslint - vue - plugin - D）安装ESLint及其Vue插件。
初始化ESLint配置：
- 运行npx eslint --init。这会引导你通过一系列问题来生成.eslintrc配置文件。例如，它会问你项目中使用的JavaScript风格（如ES6、React等）、项目的目标环境（如浏览器、Node.js等）以及你偏好的代码风格（如Airbnb、Google等风格）。根据项目实际情况回答这些问题，ESLint会生成相应的配置文件。
配置Vue CLI：
- 如果是Vue CLI项目，在vue.config.js文件中配置ESLint检查。例如：

module.exports = {
  lintOnSave: true
};

lintOnSave设置为true表示在保存文件时进行ESLint检查。也可以设置为'error'，这样只有在ESLint检查出错误时才会终止构建过程。

2. 配置ESLint规则

规则配置文件：
- ESLint的规则配置主要在.eslintrc文件中（可能是.eslintrc.js、.eslintrc.json或.eslintrc.yml，取决于初始化时的选择）。
- 基本规则示例：
  - 禁止未使用的变量：

{
  "rules": {
    "no - unused - variables": "error"
  }
}

这里"no - unused - variables"是规则名，"error"表示违反该规则时以错误级别提示。 - 强制使用一致的缩进：

{
  "rules": {
    "indent": ["error", 2]
  }
}

这里"indent"是规则名，["error", 2]表示使用2个空格缩进，违反时以错误级别提示。 2. Vue - specific规则：

组件选项顺序：

{
  "rules": {
    "vue/order - in - components": ["error", {
      "order": [
        "el",
        "name",
        "parent",
        "functional",
        ["delimiters", "comments"],
        ["components", "directives", "filters"],
        "extends",
        "mixins",
        "inheritAttrs",
        "model",
        ["props", "propsData"],
        "data",
        "computed",
        "watch",
        "LIFECYCLE_HOOKS",
        "methods",
        ["template", "render"],
        "renderError"
      ]
    }]
  }
}

这个规则确保Vue组件选项按照指定顺序书写，保持代码风格统一。 3. 继承配置：

可以通过"extends"字段继承其他已有的配置。例如，继承ESLint官方推荐配置：

{
  "extends": "eslint:recommended",
  "rules": {
    // 可以在此处覆盖或添加自定义规则
  }
}

对于Vue项目，也可以继承一些流行的Vue - ESLint配置，如"plugin:vue/essential"：

{
  "extends": "plugin:vue/essential",
  "rules": {
    // 自定义规则
  }
}

忽略文件和目录：
- 在项目根目录创建.eslintignore文件。例如，如果要忽略dist目录和node_modules目录，可以在.eslintignore中写入：

dist
node_modules

这样ESLint在检查时会跳过这些文件和目录。

星途面试题库

面试题：Vue项目中如何通过ESLint保障代码质量

知识考点

面试题答案

1. 在Vue项目中集成ESLint

2. 配置ESLint规则