vue3 ts引入eslint

Vue3项目中引入ESLint是为了提升代码质量和一致性，它是一种JavaScript代码检查工具，可以帮助开发者检测并修复潜在的问题，比如语法错误、编码风格等。要在Vue3项目中使用TypeScript同时集成ESLint，你可以按照以下步骤操作：

1. **安装依赖**：
- 首先，在项目根目录下运行命令安装`@vue/cli-plugin-eslint` 和 `eslint`（如果你还没有安装的话）：

     npm install @vue/cli-plugin-eslint eslint --save-dev

2. **配置`.eslintrc.js`**：
- 创建或打开项目的`.eslintrc.js`文件，配置规则集，例如`airbnb-typescript`或自定义规则。对于TypeScript项目，你需要启用对TS的支持：

     module.exports = {
       parser: '@typescript-eslint/parser',
       parserOptions: {
         ecmaVersion: 2022,
         sourceType: 'module',
         ecmaFeatures: { jsx: true },
       },
       extends: ['plugin:@typescript-eslint/recommended', 'prettier'],
       rules: {
         // 自定义或配置其他规则
       },
     };

3. **集成到`vue.config.js`**：
- 如果你在使用Vue CLI 4.x及以上版本，还需要在`vue.config.js`中配置，使其自动加载ESLint：

     module.exports = {
       chainWebpack: (config) => {
         config.resolve.symlinks(true); // 解决Symlink模块导入问题
         config.module.rule('typescript')
           .test /\.tsx?$/i
           .use('ts-loader')
           .loader('ts-loader')
           .options({
             transpileOnly: true,
           });
       },
       lintOnSave: true, // 开启保存时自动检查
       configureEslint(config) {
         if (process.env.NODE_ENV === 'production') {
           // 生产环境可以禁用某些规则，以提高构建速度
           config.module.rules[0].exclude.add(path.resolve(__dirname, 'src/client'));
         }
       },
     };

4. **启动项目时检查**：
- 现在每次保存文件时，ESLint将自动检查你的代码。