vite2+eslint+prettier

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(),
// 设置eslinteslintPlugin({
    include: ['src/**/*.vue', 'src/**/*.js'], // 检查的文件})],resolve: {
    alias: {
    '@': path.resolve(__dirname, 'src'),},},
})