【Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化】

China_YF

已于 2023-01-16 11:52:59 修改

阅读量6.6k

点赞数 13

分类专栏： VUE 文章标签：代码规范 javascript vue.js

于 2023-01-15 16:52:50 首次发布

本文链接：https://blog.youkuaiyun.com/m0_37873510/article/details/128692295

版权

本文介绍了如何在Vue3+TS的Vite项目中集成ESlint和Prettier，包括安装初始化ESlint、配置Prettier、设置VSCode自动格式化、解决ESLint与Prettier冲突，以及配置Vite在运行时检查ESLint规范。通过这些步骤，确保代码质量和格式的一致性。

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

前言

本篇文章主要讲解如何在Vite创建的Vue3 + ts项目中集成Eslint + Perttier实现代码规范检查以及在vscode编辑器中配置保存代码自动格式化，因为通过vite创建的项目默认是没有eslint代码检查功能的，但是在多人开发的项目中代码检查和代码格式化功能又不能没有，所以在此以博客的形式总结一下，希望对老铁们有所帮助，如果老铁觉得对你有帮助还望点赞 + 收藏，希望帮助到更多的人！

创建项目

我在这里直接是通过vite提供的默认模板来创建一个vue3 + ts的项目

# 如果npm 的版本是6.x版本，则使用下面这条命令创建项目
npm create vite@latest vite-vue3-ts --template vue-ts

# 如果npm 的版本是7+ 以上版本，则使用以下命令
npm create vite@latest vite-vue3-ts -- --template vue-ts

这样一个vue3 + ts的项目就创建好了，使用vscode打开该项目，然后执行npm i 安装依赖
依赖安装完成后，执行npm run dev 启动项目就可以在浏览器中正常访问了。
在这里插入图片描述

安装初始化ESlint

安装ESlint：

# 安装eslint
npm i eslint -D

初始化ESlint：

执行npx eslint --init命令初始化eslint
根据提示依次选择以下选项

You can also run this command directly using 'npm init @eslint/config'.
 
? How would you like to use ESLint? ...
To check syntax and find problems
 
? What type of modules does your project use? ...
JavaScript modules (import/export)
 
? Which framework does your project use? ...
Vue.js
 
? Does your project use TypeScript? » No / Yes
Yes
 
? Where does your code run? ... (用空格选中两个，回车确定)
√ Browser
√ Node
 
? What format do you want your config file to be in? ...
JavaScript
 
The config that you've selected requires the following dependencies:
eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now?
No

最后一个提示我们选择No，然后手动npm安装提示的依赖

npm i -D eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest

初始化完成后会在项目根目录下看到一个.eslintrc.cjs的文件，这个文件就是eslint的配置文件

module.exports = {
   
    "env": {
   
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended"