vite集成新版eslint踩坑之旅

背景

笔者目前正在进行从零单排系列文章的写作，目前正在进行第四篇章：搭建脚手架，所以需要提前创建一个完整的vue3+vite的项目移动端模板，这个模板后续也会用在公司的项目上，在集成eslint的时候发现对ts不进行检验，通过阅读eslint官方的更新公告，发现集成新版的eslint时，需要将配置添加到.eslintrc.cjs文件中

创建项目

npm init vite
选择vue和ts

集成eslint

vscode需安装eslint插件

安装依赖

npm install eslint -D

初始化eslint

npm init @eslint/config

如图选择

解决对ts不生效问题

修改.eslintrc.cjs文件如下

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/vue3-strongly-recommended',
    'standard-with-typescript'
  ],
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json']
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {
  }
}

重点是project: ['./tsconfig.json']