Python微信订餐小程序课程视频

https://blog.csdn.net/m0_56069948/article/details/122285951

Python实战量化交易理财系统

https://blog.csdn.net/m0_56069948/article/details/122285941
目录* 新项目了

• Vite搭建
• eslint
  • 先安装eslint
  • 创建.eslintrc.js
  • 引入规则
    • Airbnb
  • 配合prettier
  • 对ts的支持
  • .eslintrc.js
• 在页面上查看eslint报错
• 使用setup sugar的坑

新项目了

浑浑噩噩一个五年前的vue2的项目维护了一年多，要开始重构了。前端还是vue2，要加个后台系统来管理配置化功能。后台管理就捡起vue3吧，好久没写了，看看有啥新东西玩，有空了再更新一下博客。

Vite搭建

之前写了个用vue-cli来搭建的（vue-cli脚手架搭建vue3.0+typescripe项目），还是Vue3刚出来那会踩的坑，现在vite逐渐成熟，性能、速度也比webpack要好，也来踩踩的。
Vite官网已经写的很详细了，不赘述，无坑。
yarn create vite vue-app --template vue-ts

eslint

先安装eslint

yarn add -D eslint

创建.eslintrc.js

先来点基本配置

  module.exports = {
    root: true,
    env: {
    node: true,
    browser: true,
    es2021: true,
    },
    parserOptions: {
    ecmaVersion: 12,
    },
  }

引入规则

我这里就用几个官方规范吧，下面总是要自己配置一堆的，也可以用其他的优秀开源规范（Airbnb）
yarn add -D eslint-plugin-vue
.eslintrc中extends添加'plugin:vue/vue3-recommended'

Airbnb

如果要用Airbnb，需要安装eslint-config-airbnb-base和eslint-plugin-import

yarn add -D eslint-config-airbnb-base eslint-plugin-import

.eslintrc中extends添加'airbnb-base'

配合prettier

yarn add -D eslint-plugin-prettier eslint-config-prettier
yarn add -D -E prettier

.eslintrc差不多就写成这样

  ……
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  plugins: [ 'prettier'],
  rules: {
    'prettier/prettier': 0,
  }
  ……

对ts的支持

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

.eslintrc中添加配置

plugins: ['@typescript-eslint'],
parserOptions: {
  parser: '@typescript-eslint/parser'
}

.eslintrc.js

至此，eslint配置完成，可以正常使用，上代码

  module.exports = {
    root: true,
    env: {
    node: true,
    es2021: true,
    browser: true
    },
    extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    'plugin:prettier/recommended'
    ],
    plugins: ['@typescript-eslint', 'prettier'],
    parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 12
    },
    rules: {
    'prettier/prettier': 0,
    ……
    }
  }

在页面上查看eslint报错

强逼迫福音，经常有时候没注意看命令行，报错就一直留下来，提交代码也会被拦住。添加vite-plugin-eslint插件即可
在vite.config.ts中配置

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

  export default defineConfig({
    plugins: [
    vue(),
    eslintPlugin({
      exclude: ['./node\_modules/**'],
      cache: false
    })
    ]
  })

记笔记！cache这个属性一定要带上false，否则修复的问题还是会不停报出来错，有毒。

使用setup sugar的坑

转载请注明：xuhss » Vite2+Vue3+ts的eslint设置踩坑