【Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化】
目录
- 前言
- 创建项目
- 安装初始化ESlint
- 安装ESlint:
- 初始化ESlint:
- 安装配置Prettier
- 安装prettier:
- 配置prettier:
- 配置VScode保存时自动格式化代码
- 在vscode中安装以下两个插件:
- 修改vscode的配置文件:
- 解决ESLint与Prettier的冲突
- 冲突的原因:
- 解决冲突:
- 配置vite运行的时候自动检测eslint规范
- 安装vite-plugin-eslint:
- 配置 vite.config.ts文件:
前言
本篇文章主要讲解如何在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? ...
JavaScriptThe 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"],"overrides": [],"parser": "@typescript-eslint/parser","parserOptions": {"ecmaVersion": "latest","sourceType": "module"},"plugins": ["vue","@typescript-eslint"],"rules": {}
}
- 在package.json,添加命令
"scripts": {// 执行该命令eslint会检测当前项目下所有的.vue,.js,.ts,.jsx,.tsx文件是否符合eslint的代码规范,并尝试自动修复"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"},
- 执行
npm run lint
命令,会看到有如下报错
- 修改.eslintrc.cjs 文件
module.exports = {"env": {"browser": true,"es2021": true,"node": true},"extends": ["eslint:recommended","plugin:vue/vue3-essential","plugin:@typescript-eslint/recommended"],"overrides": [],// 配置解析vue文件"parser":"vue-eslint-parser","parserOptions": {"ecmaVersion": "latest","parser": "@typescript-eslint/parser","sourceType": "module"},"plugins": ["vue","@typescript-eslint"],// 添加规则"rules": {"@typescript-eslint/ban-types": ["error",{"extendDefaults": true,"types": {"{}": false}}]}
}
然后重新执行npm run lint
命令就不会报错了。
安装配置Prettier
安装prettier:
npm install prettier -D
配置prettier:
在项目的根目录下创建.prettierrc.cjs文件,这个文件是Prettier的配置文件,可以在这个文件中配置Prettier格式化代码的规则,添加配置如下:
// prettier的默认配置文件
module.exports = {// 一行最多 100 字符printWidth: 100,// 使用 2 个空格缩进tabWidth: 2,// 不使用缩进符,而使用空格useTabs: false,// 不尾随分号semi: false,// 使用单引号singleQuote: true,// 多行逗号分割的语法中,最后一行不加逗号trailingComma: 'none',// 单个参数的箭头函数不加括号 x => xarrowParens: 'avoid', // 对象大括号内两边是否加空格 { a:0 }bracketSpacing: true,
}
配置VScode保存时自动格式化代码
在vscode中安装以下两个插件:
- ESLint:安装这个插件,它会自动查找项目中的ESlint规则,给出验证提示,ESlint也可以对代码进行格式化
- Prettier - Code formatter:安装这个插件对代码进行格式化,但并不关注代码质量潜在问题的检查
修改vscode的配置文件:
打开:File -> Preferences -> Settings -> 在 settings.json 中编辑
在setttings.json文件中添加一些配置:
{// vscode默认启用了根据文件类型自动设置tabsize的选项"editor.detectIndentation": false,// 重新设定tabsize"editor.tabSize": 2,// 每次保存的时候自动格式化"editor.formatOnSave": true,"editor.codeActionsOnSave": {// 使用eslint来fix,包括格式化会自动fix和代码质量检查会给出错误提示"source.fixAll.eslint": true},// 把prettier设置为vscode默认的代码格式化工具"editor.defaultFormatter": "esbenp.prettier-vscode",// vue文件的默认格式化工具选择prettier"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}
}
配置到这里当我们在vscode编辑器中保存代码时,就可以自动格式化代码了!
解决ESLint与Prettier的冲突
冲突的原因:
因为ESLint和Prettier都可以进行代码格式化,而且我们在setttings.json文件中同时开启了ESLint和Prettier进行代码格式化,所以两者重叠的格式化规则不一致时就导致了格式化代码时出现冲突的问题。
解决冲突:
安装 eslint-config-prettier 和 eslint-plugin-prettier 依赖:
npm install eslint-config-prettier eslint-plugin-prettier -D
- eslint-config-prettier 会关闭ESLint中有关代码格式化的配置
- eslint-plugin-prettier 把Prettier配置成ESLint的一个插件,让其当做一个linter规则来运行
然后在 .eslintrc.cjs 中 extends的最后添加一个配置:
extends: ['eslint:recommended','plugin:vue/vue3-essential','plugin:@typescript-eslint/recommended',"plugin:prettier/recommended" // 解决ESlint和Prettier冲突],
这样配置后,ESLint进行格式化时就会忽略跟Prettier重叠的格式规则,这些交由Prettier来进行格式化,这样就解决了ESlint和Prettier的冲突问题了。
配置vite运行的时候自动检测eslint规范
vite运行的时候默认是不会自动检测eslint规范的,如下图,我们在main.ts文件中声明了变量a,但是没有使用,但是vite可以正常运行却没有给出eslint警告,而执行npm run lint
命令时却可以看到有eslint的警告信息
如果想要vite运行的时候自动检测eslint规范,只需要安装vite-plugin-eslint依赖和添加相关配置即可。
安装vite-plugin-eslint:
npm install vite-plugin-eslint -D
配置 vite.config.ts文件:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),// 配置vite在运行的时候自动检测eslint规范eslintPlugin({include: ['src/**/*.ts', 'src/**/*.js', 'src/**/*.vue', 'src/*.ts', 'src/*.js', 'src/*.vue']})]
})
在vite.config.ts文件中添加了vite-plugin-eslint插件的配置后,就会看到vite在运行的时候对代码进行eslint规范检查了。
以上就是在Vue3+Vite+TS目集成ESlint +Prettier实现代码规范检查和代码格式化的具体实现,希望对各位老铁有所帮助!
【Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化】相关推荐
- vue3+vite+ts项目集成科大讯飞语音识别(项目搭建过程以及踩坑记录)
- 在vue3+vite+ ts 项目中使用svg
一:components下新建svgIcon.vue文件 <template> <svg :class="svgClass" v-bind="$attr ...
- vue3 + vite + ts 集成mars3d
vue3 + vite + ts 集成mars3d 文章目录 vue3 + vite + ts 集成mars3d 前言 一.创建一个vue3 + vite + ts项目 二.引入mars3d相关依赖 ...
- vue3 +vite+ts实战项目添加 eslint + prettier + lint-staged 踩坑指南
初始化项目 // 创建一个空的 vue3-ts 项目, yarn create vite my-vue-app --template vue-ts // 安装依赖 cd my-vue-app & ...
- vue3+vite配置项目运行前eslint检查以及git提交前eslint检查的方案总结
vue3+vite配置项目运行前eslint检查以及git提交前eslint检查的方案总结 1.需求背景 最近在新项目搭建过程中有这样一个需求:由于是团队协同开发,所以在开发是代码规范是一个很重要的环 ...
- vue3:vue3+vite+ts+pinia
一.背景 记录一套技术方案. 二.项目基础 2.1.创建项目 yarn create vite 输入名字后,这里出现了几个选项,不清楚都是干啥的,下来研究 选择后完成 2.2.vite.config. ...
- 如何在vue3+vite+ts中使用require
vue3+vite+ts中不能使用require 之前使用vue2,去动态设置图片src属性时,采用require,但是vue3+vite+ts中使用require,项目能够运行,但浏览器中报错req ...
- vue3 vite ts引入vue文件报错 ts(2307)
vue3 vite ts 生成的项目模板,在ts文件中引入vue文件报错 ts(2307),只是ts报错,并不影响项目运行. 官方文档有说明:http://vue.dragonlm.com/guide ...
- vue3+vite+electron项目搭建
vue3+vite+electron项目搭建 一.vite创建新项目 二.安装项目依赖 三.修改package.json文件 添加build节点 修改scripts节点 添加main节点 packag ...
最新文章
- 【linux】串口编程(一)——配置串口
- 第二节 MATLAB中图像数据导入、导出和转换
- python爬虫bilibili_Python爬虫 bilibili视频弹幕提取过程详解
- 信息倒流php,PHP向客户端广播信息
- hadoop日常运维
- 系统无法在消息文件中为application_iOS 14 Filza 文件消息,M1 能用 win 系统
- RabbitMQ 关键词解释
- 转一篇好文,虽然争议颇多,还是觉得有必要转一下看看 来自博客园
- 解决Linux下Tomcat日志目录下的catalina.log日志文件过大的问题
- storm32云台说明书_STorM32 BGC三轴云台控制板电机驱动电路设计(驱动芯片DRV8313)
- 局域网技术,涉及到VLAN,TRUNK,链路聚合,VLAN间路由,单臂路由,
- Java实现斗地主发牌
- python 截取一段内容_python正则表达式截取一段内容
- java语言就业方向_学习java以后的就业方向有哪些-百度经验
- 人脸识别原理:(初级篇)内含PPT
- Web全栈开发训练营
- 神经网络模型的基本原理,如何建立神经网络模型
- 推荐 -- 《分布式系统的工程化开发方法》
- CornerStone Unresolved conflicts exist for some items
- L2-001. 紧急救援 (dijkstra算法)
热门文章
- mysql二亿大表_面对有2亿条数据的mysql表
- 微信小程序 基本认识
- 吉他弹唱精通——运用空弦音的分解和弦
- 【邱锡鹏-神经网络与深度学习】第一章绪论 知识点汇总
- 如何实现windows命令提示符的tab补全
- 世界顶级黑客,都有哪些神仙操作?这篇文章带你了解一下!
- android系统架构,文件目录
- token 微信access 过期_.Net微信开发之如何解决access_token过期问题
- jupyter notebook误删怎么办
- Godot Engine:格斗游戏中的必杀技(大招/绝招/特殊技/Special Move )输入系统实现