配置vue3+vite+eslint+prettierrc项目

置顶

三年模拟五年烧烤

已于 2024-08-13 16:35:34 修改

阅读量1.7k

点赞数 25

文章标签： vue.js 前端 javascript

于 2023-12-06 18:32:00 首次发布

本文链接：https://blog.csdn.net/weixin_54000091/article/details/134838450

版权

本文详细介绍了如何在Vite项目中集成Vue3、EsLint和Prettier，包括安装过程、配置.eslintrc.cjs和.prettierrc.cjs文件，以及在VSCode中设置自动格式化和保存时的eslint校验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vite + Vue3 + EsLint + Prettier 超简单配置步骤

1、使用 vite 创建一个 vue3 项目，并同时在 vscode 中安装 EsLint，和 Prettier-Code formatter 插件

2、安装整个流程 EsLint+prettier 所需要的包记住一定要符合版本。不然可能会报错。最好直接全部复制到 package.json 中下载

"devDependencies": {
   
// eslint 解析相关的包
"@babel/core": "^7.18.2",
"@babel/eslint-parser": "^7.18.2",
// eslint相关的包
"eslint": "^8.17.0",
"eslint-plugin-vue": "^9.1.0",
"vue-eslint-parser": "^9.0.2",
// prettier相关的包
"prettier": "^2.6.2",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^5.0.0-alpha.1",
}

3、在项目根创建 EsLint 插件的配置文件.eslintrc.cjs 文件

为什么是以 cjs 后缀结尾的文件呢，因为高版本的 vite 创建的项目 package.json 中的 type 字段是 module，也就是告诉整个项目下所有 js 的文件默认以 esmodule 模块化的形式，我们这里使用的是 module.exports 语法属于 commonjs，所以使用 cjs 后缀结尾则表示告诉项目编译该配置文件时需要使用 commonjs 的方式来读取该文件。那为什么该配置文件不直接使用 esmodule 语法呢，因为好像运行时会报错所以这里我就用普遍的 commonjs 语法来导出配置信息

这里就是 vscode 中 EsLint 插件的配置信息都写在这里了

module.exports = {
   
    env: {
   
        browser: true,
        es2021: true,
        node: true
    },
        parser: 'vue-eslint-parser',
    extends: [
        'plugin:vue/vue3-essential',
        'plugin:vue/essential',
        'eslint:recommended', // 使用推荐的eslint
        'plugin:vue/vue3-recommended', // 使用插件支持vue3
        // 如果你没有安装第7步,以下两个包不要引入,否则报错
        'plugin:prettier/recommended',
        'eslint-config-prettier'
    ],
    parserOptions: {
   
        ecmaVersion: 13,
        sourceType: 'module',
        ecmaFeatures: {
   
            modules: true,
            jsx: true
        },
        requireConfigFile: false,
        //js项目使用babel解析
        parser: '@babel/eslint-parser',
        //ts项目使用ts插件解析 项目中使用ts 必须要使用该解析方式
        // parser: '@typescript-eslint/parser' 
    },
    // eslint-plugin-vue
    plugins: [
        'vue', // 引入vue的插件 vue <==> eslint-plugin-vue
    //   '@typescript-eslint',//ts项目需要使用该插件
        // 这个包需要安装了第7步的三个包再引入
        'prettier' // 引入规范插件  prettier <==>  eslint-plugin-prettier
    ],
    overrides: [
        {
   
            files: [
                '*.js',
                '*.jsx',
                '*.vue',
                'src/**/*.js',
                'src/**/*.vue',
                'src/*.js',
                'src/*.vue',
                //'*.ts',
                //'*.jsx',
            ],
            rules: {
   
                'no-undef': 'off'
            }
        }
    ],
    globals: {
   
        defineProps: 'readonly',
        defineEmits: 'readonly',
        defineExpose: 'readonly'