vite设置eslint

vite 设置 eslint

设置 vue 的基础规则，有一系列的集合

设置 vue 关于 ts 的一些高级规则

vite 的 plugin 插件

安装：

// vite eslint 的插件
"@vitejs/plugin-vue": "^4.0.0",
"eslint": "^8.32.0",

// 有了插件还需要安装关于 vue 单独的规则
"eslint-plugin-vue": "^9.9.0",


// 为了eslint 验证的方式更多，我们还可以安装关于 vue 结合 ts 的更多规则
"@vue/eslint-config-typescript": "^11.0.2",


// 除了规则，因为我们是 ts 写的，还需要单独安装 ts 的 parser，这样可以解析 vue 当中的 ts 代码
// 这个vite可以不装，因为 vite 可以自动解析 typescript
"@typescript-eslint/parser": "^5.49.0",
// 相关的配置就是：
parserOptions: {
  ecmaVersion: 2020,
  parser: '@typescript-eslint/parser'
},

配置：

// .eslintrc.cjs
// 注意是 cjs，因为 vite 默认 esmodules 会报错
module.exports = {
  env: {
    browser: true,
    es2021: true,
    'vue/setup-compiler-macros': true
  },
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/eslint-config-typescript'
  ],
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json']
  },
  plugins: [
    'vue'
  ],
  rules: {
  }
}

//vite config
import eslintPlugin from 'vite-plugin-eslint'

export default defineConfig({
  plugins: [vue(),eslintPlugin({cache: false})]
})

转载：https://vikingmute.notion.site/vite-eslint-be715e3f9797487895412f487b2a1864