vite eslint配置

创建项目

npm create vite@5.1.0

npm i

安装eslint

npm install eslint@8.2.0 -D

配置格式化

npx eslint --init

修改配置文件

module.exports = {
    //"env": {
    //    "browser": true,
    //    "es2021": true
    //},
    "parser": "vue-eslint-parser",
    "extends": [
        "eslint:recommended",
        //"plugin:vue/essential",
        "plugin:@typescript-eslint/recommended",
        "plugin:vue/vue3-recommended",
    ],
    "parserOptions": {
        "ecmaVersion": 2020,
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
        "quotes": ["error", "double",
            { "avoidEscape": true, "allowTemplateLiterals": true }
        ],
        "semi": ["error", "never"]
    }
};

创建.eslintignore 文件

/public

安装vite插件

npm install vite-plugin-eslint -D

修改vite.config.ts文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
  eslintPlugin({
    include: ['src/**/*.ts', 'src/**/*.vue', 'src/*.vue', 'src/*.vue']
  })
  ],
})

修改package.json

"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"

安装node和vue/runtime-dom

npm install @types/node
npm install --save-dev @vue/runtime-dom

创建或更新 Vue 类型声明文件

// src/vue-shims.d.ts
declare module "*.vue" {
  import { DefineComponent } from 'vue';
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

修改tsconfig.json文件

{
  "compilerOptions": {
    "types": [
      "vite/client",
      "@vue/runtime-dom"
    ],
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": [
      "ES2020",
      "DOM",
      "DOM.Iterable"
    ],
    "skipLibCheck": true,
    /* Bundler mode */
    "moduleResolution": "node",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

修改vite.config.ts

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import path from "path"
import eslintPlugin from "vite-plugin-eslint"

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  plugins: [vue(),
  eslintPlugin({
    include: ["src/**/*.ts", "src/**/*.vue", "src/*.vue", "src/*.vue"]
  })
  ],
})