vue3 + vite + js 配置Eslint + prettier_vite+js+vue3配置eslint

要在Vue 3项目中使用ESLint和Prettier，您需要按照以下步骤操作：

1. 安装必要的包：

npm install eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier --save-dev

2. 在项目根目录下创建一个.eslintrc.js文件，并配置ESLint：

module.exports = {
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  rules: {
    // 在这里添加或覆盖规则
  }
};

3. 创建.prettierrc文件并配置Prettier：

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

4. 在package.json中添加scripts来运行ESLint：

{
  "scripts": {
    "lint": "eslint --ext .js,.vue src",
    // 可以添加一个脚本来在保存时自动格式化
    "format": "prettier --write \"src/**/*.{js,vue}\""
  }
}

5. 运行npm run lint来检查代码质量，运行npm run format来格式化代码。

确保在Vite配置文件中启用了eslint插件（如果使用的是Vite官方提供的Volar插件，则可能不需要额外配置）：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// 如果使用的是eslint-plugin-vue，则可能需要配置以下内容
// 请参考eslint-plugin-vue的文档以确保配置正确
 
export default defineConfig({
  plugins: [vue()],
  // ...
})

以上步骤将设置ESLint和Prettier以确保代码质量和格式一致性。