vue3项目 - Eslint 配置代码风格

Eslint 自定义配置

总结:

Prettier  (代码规范的插件,格式化 )---> 美观

Eslint  (规范、纠错、检验错误 )-----> 纠错

首先,禁用 Prettier 插件,安装 ESLint 插件,配置保存时自动修复

配置代码风格文件 .eslintrc.cjs(Prettier 配置 + ESLint 配置,附配置代码

配置内容 如,

  • Prettier:单引号、无分号、每行宽度限制 80字符、不加对象/数组最后逗号、换行符号不限制(win mac不一样)
  • ESLint:vue组件名称多单词组成(忽略 index.vue)、props解构关闭、未定义变量错误提示

流程:

配置文件 .eslintrc.cjs 文件

配置代码如下: 

rules: {
    // 前置
    // 1. 禁用格式化插件  prettier   format on save 关闭
    // 2. 安装Eslint插件,并配置保存时自动修复

    // prettier 专注于美观度
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printWidth: 80, // 每行宽度至多80字符
        trailingComma: 'none', // 不加对象|数组最后逗号
        endOfLine: 'auto' // 换行符号不限制(win mac 不一致)
      }
    ],

    // ESLint专注于规范,不符合规范 则报错
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue组件名称多单词组成(忽略index.vue / index.vue除外)
      }
    ],
    'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验(props解构丢失响应式)
    // 添加未定义变量错误提示,create-vue@3.6.3 关闭,这里加上是为了支持下一个章节演示
    'no-undef': 'error'
}

检查,禁用 Prettier 插件,采用 package.json 中的 prettier

安装 ESLint 插件

在设置中,配置保存时自动修复(不要开启默认的自动保存格式化)

 保存时自动修复,代码如下

    // 二则冲突。可以达成vue2和vue3的统一
    // ESlint插件 + Vscode配置 实现自动格式化修复
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // 关闭保存自动格式化
    "editor.formatOnSave": false,

此时,保存 可自动根据规范 进行代码修复。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/266217.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

模式识别与机器学习(十一):Bagging

1.原理 Bagging [Breiman, 1996a] 是井行式集成学习方法最著名的代表.从名字即可看出,它直接基于自助采样法(bootstrap sampling)。给定包含m 个样本的数据集,我们先随机取出一个样本放入采样集中,再把该样本放回初始数据集,使得…

使用互斥锁(Mutex)管理共享资源

在Go中确保并发安全性 并发是Go中的一个强大功能,它允许多个Goroutines(并发线程)同时执行。然而,伴随着强大的功能也带来了大量的责任。当多个Goroutines并发地访问和修改共享资源时,可能会导致数据损坏、数据竞争&a…

【matlab】绘制竖状单组渐变柱状图

【matlab】绘制竖状单组渐变柱状图 % matlab绘制渐变柱状图 clear;clc;close all; x1:100; a[]; for i1:length(x) if mod(i,2)0 i-i; end a[a i]; end close all; b0.8; for nm3:69 cmapload([‘D:\m…

2023年Top5搭建帮助中心工具集锦

随着企业知识管理的不断深化,帮助中心成为了一个越来越重要的组成部分。帮助中心是一个集成了企业知识、FAQ、常见问题解答、教程、使用指南等内容的在线平台,旨在为用户提供快速、准确的问题解答和自助服务。那么在这一年,有哪些搭建帮助中心…

Shell三剑客:awk(模式(正则表达式)和动作)

一、运算符 - * / % ^ ** 赋值 ?: C条件表达式 || 逻辑或 && 逻辑与 ~ 和 !~ 匹配正则表达式和不匹配正则表达式 < < > > ! 关系运算符 空格 连接 - 加&#xff0c;减 * / % 乘&#xff0c;除与求余 - ! 一元加&#xff0c;减和逻辑非 ^ *…

Debezium系列之:Debezium JDBC 连接器支持批量同步数据

Debezium系列之&#xff1a;Debezium JDBC 连接器支持批量同步数据 一、设置批次二、配置消费者最大轮询记录三、性能测试结果四、结论 一、设置批次 由于我们之前的版本主要关注核心功能&#xff0c;因此我们的最新版本致力于解决与连接器相关的主要痛点&#xff1a;性能。 …

电脑组件整理(持续更新...)

1、*芯片 CPU(承担着负责的运算)&#xff1b; 量大阵营&#xff1a; AMD &#xff5c; Intel i5 12400F 6核12线 7nm -- 1189元 r7 5700x 8核16线 7 nm -- 1500元&#xff1b; ARM采用的是RISC精简指令集计算、 主要应用于移动终端之中&#xff0c;类如手机&#xff0c…

电化学仿真的基础知识笔记

1 概述 电化学反应是一种特殊的化学反应&#xff0c;其能量转移形式为化学能和电能之间互相转换。根据能量转换方向&#xff0c;可分为两类&#xff1a; 原电池&#xff08;Galvanic cells&#xff09;&#xff1a;将化学能转化为电能&#xff0c;对外放电电解槽&#xff08;…

设计模式-解释器模式

设计模式专栏 模式介绍模式特点应用场景解释器模式和模板模式有什么区别和联系代码示例Java实现解释器模式Python实现解释器模式 解释器模式在spring中的应用 模式介绍 解释器模式是一种行为型设计模式&#xff0c;它定义了一门语言的文法表示&#xff0c;并建立了一个解释器来…

【PCB专题】如何批量导出已画好的PCB器件封装库

在进行PCB设计时,有可能需要从已有PCB上导出封装,利用这些封装进行新的设计。Allegro PCB设计工具的Export Libraries功能,就可以帮助我们快速的导出PCB上所有类型的封装和焊盘文件。 打开需要导出封装的PCB文件,然后点击File-Export->Libraries菜单,如下图所示。 在…

【Linux系统基础】(1)Linux基础命令全面详解

在计算机世界中&#xff0c;Linux操作系统以其稳定性、安全性和开源性而受到广大程序员和系统管理员的喜爱。然而&#xff0c;对于初学者来说&#xff0c;Linux的命令行界面可能会显得有些复杂和难以理解。本文将详细介绍一些常用的Linux基础命令&#xff0c;帮助你更好地理解和…

电商数仓项目----笔记六(数仓ODS层)

ODS层的设计要点如下&#xff1a; &#xff08;1&#xff09;ODS层的表结构设计依托于从业务系统同步过来的数据结构。 &#xff08;2&#xff09;ODS层要保存全部历史数据&#xff0c;故其压缩格式应选择压缩比较高的&#xff0c;此处选择gzip。 &#xff08;3&#xff09;…

HIS项目源码,自主研发+应用实例,整合电子病历系统、LIS系统,支持电子病历四级

医院云HIS系统源码&#xff0c;采用前后端分离架构&#xff0c;SaaS云部署模式 前端&#xff1a;AngularNginxJavaScript 后端&#xff1a;JavaSpring&#xff0c;SpringBoot&#xff0c;SpringMVC等 数据库&#xff1a;MySQL MyCat 1、自主研发应用实例&#xff0c;整合电子病…

vue中的事件修饰符、表单双向数据绑定和计算属性

目录 一、事件修饰符 二、表单双向数据绑定 模拟双向数据绑定&#xff08;双向数据绑定底层原理&#xff09; 三、计算属性 计算属性和methods方法区别&#xff1f; 计算属性和watch区别&#xff1f; 一、事件修饰符 stop 阻止事件冒泡 prevent 阻止事件默认行为 ca…

TensorRT-Alpha FAQ

1、linux下出现错误&#xff1a; libyolov8.so: undefined reference to sample::splitToStringVec(std::__cxx11::basic_string<char, std::char_traits<char>, std::allocator<char> > const&, char) collect2: error: ld returned 1 exit status CMa…

竞赛保研 基于GRU的 电影评论情感分析 - python 深度学习 情感分类

文章目录 1 前言1.1 项目介绍 2 情感分类介绍3 数据集4 实现4.1 数据预处理4.2 构建网络4.3 训练模型4.4 模型评估4.5 模型预测 5 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于GRU的 电影评论情感分析 该项目较为新颖&#xff0c;适合作为竞…

IDEA常用快捷键一

一、文本编辑 1、Ctrl X &#xff1a;剪切 剪切选中的文本&#xff0c;若是没有选中&#xff0c;则剪切当前行。 2、CtrlC&#xff1a;复制 复制选中文本&#xff0c;若未选中则复制当前行。 3、CtrlV&#xff1a;粘贴 4、Ctrl Shift V: 从历史中选择粘贴 从历史剪…

Stream 流详细总结

Stream 流详细总结 一、Stream 是什么二、流的创建1、Stream 创建2、Collection 集合创建&#xff08;最常见的一种&#xff09;3、Array 数组创建4、文件创建5、函数创建 三、流的操作1、中间操作distinct 去重filter 过滤map 映射flatMap 映射汇总sorted 排序limit 截断skip …

LTE之接口协议

一、接口协议栈 接口是指不同网元之间的信息交互方式。既然是信息交互&#xff0c;就应该使用彼此都能看懂的语言&#xff0c;这就是接口协议。接口协议的架构称为协议栈。根据接口所处位置分为空中接口和地面接口&#xff0c;响应的协议也分为空中接口协议和地面接口协议。空…

mysql复习笔记06(小滴课堂)

mysql数据安全之备份的背景意义 介绍数据备份 mysql数据安全之mysqldump备份实例&#xff08;跨机器&#xff09; 一般存在于mysql的bin目录下。中小型企业&#xff0c;数据量不是特别大的时候可以使用这个方式备份。 可以看到备份过来的库了。这是备份单个数据库。 如果想备份…