当前位置： 首页 > article >正文

vue3 vite项目安装eslint

article 2025/3/10 20:02:51

  • npm install eslint -D 安装eslint库

  • npx eslint --init 初始化配置，按项目实际情况选
    在这里插入图片描述

  • 自动生成eslint.config.js，可以添加自定义rules
    在这里插入图片描述

  • 安装ESLint插件
    在这里插入图片描述
    此时打开vue文件就会标红有问题的位置

  • 安装prettier npm install prettier eslint-config-prettier eslint-plugin-prettier -D

  • 创建.prettierrc.json

    {
  "semi": false,
  "singleQuote": false,
  "tabWidth": 2,
  "printWidth": 80,
  "trailingComma": "none"
}

  • 安装prettier插件
    在这里插入图片描述

  • 打开vscode用户配置Ctrl + Shift + p -> Settings
    在这里插入图片描述

  • 添加内容：

    {
	  "editor.formatOnSave": true,
	  "editor.defaultFormatter": "esbenp.prettier-vscode",
	  "[javascript]": {
	    "editor.defaultFormatter": "esbenp.prettier-vscode"
	  },
	  "[vue]": {
	    "editor.defaultFormatter": "esbenp.prettier-vscode"
	  },
	  "eslint.validate": ["javascript", "vue"],
	  "eslint.run": "onType",
	  "eslint.format.enable": true
}

  • 到这里应该就配好了，在vue文件中执行Ctrl + s验证保存自动格式化

  • 参考链接


http://www.kler.cn/a/579005.html

相关文章：

  • python将目录下的所欲md文件转化为html和pdf
  • JVM常用概念之移动GC和局部性
  • k8s下部署ansible进行node-export二安装
  • electron builder打包时，出现errorOut=ERROR: Cannot create symbolic link
  • 【AVRCP】协议深入解析(1):从框架到数据单元
  • 负载均衡集群和高可用集群
  • 【神经网络】0.深度学习基础：解锁深度学习，重塑未来的智能新引擎
  • chatgpt完成python提取PDF简历指定内容的案例
  • 【2025深夜随笔】简单认识一下Android Studio
  • kafka单机部署实战
  • 10分钟看明白爆火的本地知识库! 掌握本地知识库基本概念与RAG的完整架构
  • C++学习之格斗小游戏综合案例
  • 6-5，web3浏览器链接区块链（react+区块链实战）
  • 【已解决】AttributeError: module ‘numpy‘ has no attribute ‘object‘.
  • css实现元素垂直居中显示的7种方式
  • Vue、React、原生小程序的写法对比差异
  • 基于python大数据的招聘数据可视化与推荐系统
  • STM32 串口升级程序方法说明
  • 基于Spring Boot的学院商铺管理系统的设计与实现（LW+源码+讲解）
  • 微软云计算[2]之微软云关系数据库SQL Azure