一、知识背景

1、构建工具（前端的构建工具千篇一律，高效的构建原理万里挑一）

 构建工具是可以帮助开发者管理本地源文件，优化开发流程，降低开发复杂度，使开发者更加专注在业务逻辑开发上的一种工具。

目前常见的前端构建工具有Vite、webpack、Rollup、ESbuild、babel、grunt，gulp，parcel，fis等。 关于构建工具的理解：zhuanlan.zhihu.com/p/33692774

二、应用场景

1、基于vue-cli（webpack）的项目

正常使用eslint官网的配置方法

$ npm install eslint --save-dev

$ ./node_modules/.bin/eslint --init

按以上命令可自行配置好eslint并生成对应的eslintrc配置文件

2、基于vite的项目

由于eslint使用 Espree 解析 JavaScript，不支持typescript，且vite项目中不再支持vue-cli，所以eslint对vue文件无法正常解析。 关于这个：eslint-plugin-vue官方给出了明确的解释（eslint.vuejs.org/user-guide/… 先按正常步骤生成eslintrc配置文件，然后在配置文件中加上下面的一行代码

parser: 'vue-eslint-parser', // 这里必须加上，否则.vue文件中eslint无效