ESLint检测VUE和JSON文件

news2024/10/7 10:12:55

   ESLint 默认只支持检测JS文件中的文件,无法识别其它类型的文件,如果需要检测其它类型的文件就需要安装并指定对应的处理器,有点类似webpack的loader

处理vue文件

使用ESLint默认的处理器处理Vue文件大多数情况下会收到一个这样的错误。

Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag

这个时候就需要安装官方提供的对应的插件eslint-plugin-vue

pnpm i -D eslint-plugin-vue

然后在配置文件中添加

module.exports = {
 ...
  extends: ['plugin:vue/recommended'],
  ...
}

这个插件提供的配置文件中为.vue 文件指定了对应的处理器,同时通过recommended 开启了官方推荐的一些规则。也可以自行选择一些其它规则。
在这里插入图片描述

处理JSON文件

没有安装的时候,ESLint 处理JSON 文件一般会报下面这个错误,即解析错误。

Parsing error: Unexpected token :

所以需要处理JSON文件,首先要给ESLint 指定正确的处理器来处理JSON文件。eslint-plugin-jsonc这个插件和vue的插件一样在内部配置了对应的处理器,也有许多的规则可以使用

pnpm i -D eslint-plugin-jsonc

然后在配置文件中添加

module.exports = {
 ...
  extends: ['plugin:vue/recommended',"plugin:jsonc/recommended-with-jsonc"],
  ...
}

如果在外部指定了其它的处理器,需要通过override来为JSON文件指定处理器。

module.exports = {
  // ...
  extends: ["plugin:jsonc/recommended-with-jsonc"],
  // ...
  parser: "@babel/eslint-parser",
  // Add an `overrides` section to add a parser configuration for json.
  overrides: [
    {
      files: ["*.json", "*.json5", "*.jsonc"],
      parser: "jsonc-eslint-parser",
    },
  ],
  // ...
};

指定package.json 文件里面的属性顺序

eslint-plugin-jsonc 中包含的jsonc/sort-keys 规则可以用来指定JSON对象中属性的顺序

const { defineConfig } = require("eslint-define-config");

module.exports = defineConfig({
  env: {
    browser: true,
    node: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/recommended",
    "plugin:jsonc/recommended-with-jsonc",
  ],
  overrides: [
    {
      files: ["package.json"],
      rules: {
        "jsonc/sort-keys": [
          "error",
          {
            pathPattern: "^$",  // 命中根属性
            order: [
              "name",
              "version",
              "private",
              "packageManager",
              "description",
              "type",
              "keywords",
              "homepage",
              "bugs",
              "license",
              "author",
              "contributors",
              "funding",
              "files",
              "main",
              "module",
              "exports",
              "unpkg",
              "jsdelivr",
              "browser",
              "bin",
              "man",
              "directories",
              "repository",
              "publishConfig",
              "scripts",
              "peerDependencies",
              "peerDependenciesMeta",
              "optionalDependencies",
              "dependencies",
              "devDependencies",
              "engines",
              "config",
              "overrides",
              "pnpm",
              "husky",
              "lint-staged",
              "eslintConfig",
            ],
          },
          {
            pathPattern: '^(?:dev|peer|optional|bundled)?[Dd]ependencies$',
            order: { type: 'asc' },
          },
        ],
      },
    },
  ],
});

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

贪心算法

章节目录:一、算法介绍二、应用场景-集合覆盖问题2.1 问题引出2.2 思路分析2.3 代码示例三、结束语一、算法介绍 贪心算法(greedy algorithm ,又称贪婪算法)是指,在对问题求解时,总是做出在当前看来是最好的…

Vue04_事件绑定_methods

v-on:事件名"表达式" methods: 定义回调函数 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body><div id"app"><!--eve…

12、Qt生成dll方式-libs方式使用

Qt创建dll&#xff0c;使用LIBS -L$PWD -lxxx的方式调用dll 一、创建项目 1、打开Qt->新建文件->其他项目->Empty qmake Project->Choose... 2、输入项目名->选择位置->下一步 3、MinGW->下一步 4、默认&#xff0c;完成 5、在.pro中添加TEMPLATE sub…

C51单片机按键控制流水灯模式(定时器版本)以及定时器时钟

上篇文章我们学了关于定时器的三大组成部分及许多寄存器的概念问题&#xff0c;这篇文章我们就要开始讲解实操部分。 首先&#xff0c;我们先来看看本文最后写成的代码&#xff1a; 以上三张是代码的主函数&#xff0c;此外&#xff0c;代码中还需用到的独立按键检测代码在下面…

【Linux】回车与换行的区别+简单实现倒计时和进度条(学以致用)

前言&#xff1a;本文主要讲解回车与换行的区别&#xff0c;理解完回车与换行的区别后&#xff0c;我们将带大家实现一个简单的倒计时程序&#xff0c;会利用到本文学习的回车与换行&#xff0c;做到学以致用。 文章目录一.理解回车与换行(1)\r和\n都存在(2)\r和\n都不存在(3) …

单片机作业第4章

1.SJMP rel 无条件跳转指令 rel是相对偏移量&#xff0c;是一个单字节的带符号8位二进制补码数&#xff0c;所以它能实现的程序跳转是双向的。 2. (单选题, 2分)当CPU响应外部中断0 (INT0)的中断请求后&#xff0c;程序计数器PC的内容是 &#xff08; A &#xff09; 。 A…

性能优化之-事件代理

js中的事件委托或是事件代理简单理解 事件委托也叫事件代理&#xff0c;“事件代理”即是把原本需要绑定在子元素的响应事件&#xff08;click、keydown…&#xff09;委托给父元素&#xff0c;让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。 概述&#x…

Direct3D 12——灯光——法向量

a:平面法线着色 b:顶点法线着色 c:像素着色 平面法线&#xff08;face normal,由于在计算机几何学中法线是有方向的向量&#xff0c;所以也有将normal译作法向量&#xff09; 是 一种描述多边形朝向&#xff08;即正交于多边形上所有点&#xff09;的单位向量。 曲面法线&a…

[C++]vector类的模拟实现和相关函数的详解

文章目录架构实现默认构造函数构造函数拷贝构造为什么不能使用memcpy()进行拷贝&#xff08;浅拷贝问题&#xff09;析构函数赋值重载[]迭代器begin && end操作函数size() && capacity()push_back()reserve()resize()insert()erase()完整代码架构 首先由于自定…

RabbitMQ消息队列实战(4)—— spring-boot-starter-amqp中消息的可靠性传输和确认机制

在上一篇文章中&#xff0c;笔者整理了从消息生产出来到消费结束的整个生命周期过程中&#xff0c;为了确保消息能够可靠到达或者消费&#xff0c;我们需要在哪些环节进行哪些处理&#xff0c;同时也展示了使用Java原生代码怎么样在这些环节进行处理。本文主要介绍使用spring b…

java静态代码块

在 Java中&#xff0c;每个类都有一个静态的代码块&#xff0c;用来描述类的构造函数和实例变量。在 java. util. Static中定义了一个静态代码块&#xff0c;在该代码块中&#xff0c;类的构造函数和实例变量都是不可以被修改的。 一个类包含了由它自己定义的静态代码块&#x…

【论文阅读】Self-paced Multi-view Co-training

论文下载 bib: ARTICLE{MaMeng2020SPamCo, title {Self-Paced Multi-View Co-Training}, author {Fan Ma and Deyu Meng and Xuanyi Dong and Yi Yang}, journal {J. Mach. Learn. Res.}, year {2020}, volume {21}, number {1}, numpages {1--38} }目录1.…

Kubernetes中的Calico网络

文章目录1 介绍2 环境部署3 IPIP模式3.1 测试环境3.2 ping包网络转发4 BGP模式4.1 测试环境4.2 ping网络转发5 两种模式对比1 介绍 Calico网络的大概思路&#xff0c;即不走Overlay网络&#xff0c;不引入另外的网络性能损耗&#xff0c;而是将转发全部用三层网络的路由转发来…

GPSS【实践 01】Developing a Greenplum Streaming Server Client 自定义GPSS客户端开发实例

自定义GPSS客户端开发流程1.GPSS是什么2.架构3.组件下载安装4.自定义客户端4.1 GPSS Batch Data API Service Definition4.2 Setting up a Java Development Environment4.3 Generating the Batch Data API Client Classes4.4 Coding the GPSS Batch Data Client4.4.1 Connect …

【论文笔记】Attention Augmented Convolutional Networks(ICCV 2019 入选文章)

目录 一、摘要 二、介绍 三、相关工作 卷积网络Convolutional networks&#xff1a; 网络中注意力机制Attention mechanisms in networks&#xff1a; 四、方法 1. 图像的自注意力Self-attention over images&#xff1a; 二维位置嵌入Two-dimensional Positional Enco…

redis 第一章

开始学习redis 之旅吧 关于redis 的介绍 redis 是一个开源的软件&#xff0c;可以存储结构化的数据在内存中&#xff0c;像内存数据库&#xff0c;缓存、消息中间件、流处理引擎。 redis 提供的数据结构像strings, hashes, lists, sets, sorted sets 。Redis具有内置复制、Lua…

《花雕学AI》13:早出对策,积极应对ChatGPT带来的一系列风险和挑战

ChatGPT是一款能和人类聊天的机器人&#xff0c;它可以学习和理解人类语言&#xff0c;也可以帮人们做一些工作&#xff0c;比如翻译、写文章、写代码等。ChatGPT很强大&#xff0c;让很多人感兴趣&#xff0c;也让很多人担心。 使用ChatGPT有一些风险&#xff0c;比如数据的质…

Pytorch 张量操作 Python切片操作

目录一维张量定义一维实例操作二维张量操作张量拼接-注意需要拼接的维度一定要相同广播机制更高维的演示总结YOLOv5 Focus样例参考梳理一下Pytorch的张量切片操作一维张量定义 一维向量的操作其实很像numpy一维数组&#xff0c;基本定义如下&#xff1a; 1.默认步长为1 2.起始…

HotSpot经典垃圾收集器

虽然垃圾收集器的技术在不断进步&#xff0c;但直到现在还没最好的收集器出现&#xff0c;更加不存在“万能”的收集器&#xff0c;所以我们选择的只是对具体应用最合适的收集器。 图 HotSpot中的垃圾收集器&#xff0c;连线表示可搭配使用 1 Serial收集器 是最基础、历史最悠…

第08章_面向对象编程(高级)

第08章_面向对象编程(高级) 讲师&#xff1a;尚硅谷-宋红康&#xff08;江湖人称&#xff1a;康师傅&#xff09; 官网&#xff1a;http://www.atguigu.com 本章专题与脉络 1. 关键字&#xff1a;static 回顾类中的实例变量&#xff08;即非static的成员变量&#xff09; c…