vite2+eslint+prettier

vite2热更新时启用eslint+prettier检查代码规范

安装eslint和prettier相关依赖

eslint:

  npm i  eslint babel-eslint eslint-plugin-vue @vue/eslint-config-standard eslint-plugin-node eslint-plugin-promise   eslint-plugin-import -D

然后在项目的根目录下添加.eslintrc.js文件

module.exports = {
root: true,
env: {
 node: true,
},
extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/standard', '@vue/prettier'], // "@vue/prettier"
parserOptions: {
 parser: 'babel-eslint',
},
rules: {
 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
 'prettier/prettier': [
   'warn',
   {
     // singleQuote: none,
     // semi: false,
     trailingComma: 'es5',
   },
 ],
},
}

prettier:

    npm i prettier eslint-plugin-prettier @vue/eslint-config-prettier -D

然后在项目的根目录下添加prettier.config.js文件，内容如下：

module.exports = {
  printWidth: 120, // 每行代码长度（默认80）
  tabWidth: 2, // 每个tab相当于多少个空格（默认2）
  useTabs: false, // 是否使用tab进行缩进（默认false）
  singleQuote: true, // 使用单引号（默认false）
  semi: false, // 声明结尾使用分号(默认true)
  trailingComma: 'es5', // 多行使用拖尾逗号（默认none）
  bracketSpacing: true, // 对象字面量的大括号间使用空格（默认true）
  arrowParens: 'avoid', // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid）
}

最后需要在vite中做如下配置:
安装vite-plugin-eslint

npm install vite-plugin-eslint -D

在vite.config.js中配置plugins

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
// 设置eslint
    eslintPlugin({
      include: ['src/**/*.vue', 'src/**/*.js'], // 检查的文件
    })
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})