vite+vue3配置eslint+prettier+ts

情绪乱了思绪

已于 2022-10-09 11:05:07 修改

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js typescript

于 2022-10-09 10:31:08 首次发布

本文链接：https://blog.youkuaiyun.com/xiaodingdang222/article/details/126833891

本文介绍了如何在Vite+Vue3项目中配置ESLint、Prettier和TypeScript，包括所需安装的第三方库、.eslintrc.cjs、vite.config.js和setting.json的配置细节，确保代码风格一致并提供错误提示。

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

vite+vue3配置eslint+prettier+ts

很多人使用不同的编辑器开发，不仅仅只是vscode，即便是统一的vscode，也会有一些基本的差异。接下来我们在项目中。接入针对ts、prettier、vue3的eslint错误警示。

packjson的第三方库下载

prettier // prettier的核心代码
eslint-config-prettier // 这将禁用 ESLint 中的格式化规则，而 Prettier 将负责处理这些规则
eslint-plugin-prettier // 把 Prettier 推荐的格式问题的配置以 ESLint rules 的方式写入，统一代码问题的来源。
eslint // ESLint的核心代码
@typescript-eslint/parser // ESLint的解析器，用于解析typescript，从而检查和规范Typescript代码
@typescript-eslint/eslint-plugin // ESLint插件，包含了各类定义好的检测Typescript代码的规范
eslint-plugin-vue // 支持对vue文件检验
vite-plugin-eslint // 错误将在浏览器中报告，而不止在终端，按需使用
因为当前框架使用的是vite的项目，所以需要单独下载vite-plugin-eslint后，此时若不符合eslint要求，则会在浏览器内和终端内显示错误。在vite.config.js里需要在plugins里写入eslintPlugin

在eslint.cjs里需要针对prettier在rules进行抛出错误，并且根据我们刚刚下载的插件去进行绑定和扩展

.eslintrc.cjs代码

module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true,
    },
    extends: [
        'eslint:recommended',
        'plugin:vue/vue3-essential',
        'plugin:@typescript-eslint/recommended',
        'plugin:prettier/recommended',
    ],
    overrides: [],
    parser: 'vue-eslint-parser',
    parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        parser: '@typescript-eslint/parser',
    },
    plugins: ['vue', '@typescript-eslint'],
    rules: {
        // 'quotes': [
        //     'error',
        //     'single'
        // ], //必须为单引号
        // 'semi': [
        //     'error',
        //     'always'
        // ], //必须有分号
        'vue/multi-word-component-names': 'off',
        'prettier/prettier': 'error',
    },
};

vite.config.js代码

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import eslintPlugin from 'vite-plugin-eslint';
export default defineConfig({
    plugins: [vue(), eslintPlugin()],
    // , eslintPlugin()
    resolve: {
        //resolve配置alias的路径别名
        alias: {
            // 设置路径 这里resolve和join可自行选用
            '~': path.resolve(__dirname, './'),
            // 设置别名
            '@': path.resolve(__dirname, './src'),
        },
        extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
    },
    css: {
        preprocessorOptions: {
            less: {
                modifyVars: {
                    hack: `true; @import (reference) "${path.resolve(
                        'src/assets/css/base.less'
                    )}";`,
                },
                javascriptEnabled: true,
            },
        },
    },
    server: {
        proxy: {
            '/api': {
                target: 'http://test-jyrczp-admin.iguanwei.com/',
                changeOrigin: true,
            },
        },
    },
});

在根目录创建.prettierrc.cjs文件，vite内使用js文件，格式化效果不生效。当项目内同时存在cjs和.vscode-.setting.json文件，针对prettier样式，以cjs为主，若没有cjs，以setting.json配置的方式去格式化文件。.prettierrc.cjs配置了一些格式化文件规则，这样当我们使用编辑器的保存时会按照此规格去格式化代码。

module.exports = {
    endOfLine: 'auto',
    printWidth: 80,
    semi: true, //必须加分号
    tabWidth: 4, //tab缩进大小
    singleQuote: true, //最佳实践->单引号
    trailingComma: 'es5',
    bracketSpacing: true,
    arrowParens: 'avoid', //箭头函数参数只有一个时是否要有小括号
    proseWrap: 'preserve', //代码超出是否要换行 preserve保留
};

若prettier规则不生效，很有可能是没有编辑器没有以prettier插件作为格式化插件，我们可以在setting.json里设置

setting.json代码

{
    "editor.formatOnSave": true, // 文件保存自动格式化
    "editor.fontSize": 16, //字体发小
    // "prettier.printWidth": 80, //prettier的格式化规则使用.prettierrc.cjs来进行导入
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": false //执行的是eslint –fix，禁用eslint格式化，以prettier为主
    },
    // 格式化插件设置为 prettier，此代码是设置vscode的格式化插件为prettier
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
    "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
    "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
    "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
    "[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
    "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
    "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
}