【前端】vscode 相关插件

news2024/11/26 13:25:12

一 插件:

01、ESLint

用来识别并检查ECMAScript/JavaScript 代码的工具
在这里插入图片描述

02、Prettier

用来格式化代码,如.js、.vue、css等都可以进行格式化
在这里插入图片描述

03、Vetur

用来识别并高亮vue语法
在这里插入图片描述

04、EditorConfig

用来设置vscode的编程行为
在这里插入图片描述

二、安装依赖

01、安装 ESlint 的依赖

npm i -D eslint babel-eslint eslint-plugin-vue @vue/cli-plugin-eslint

eslint :ESlint 的核心代码
babel-eslint:eslint和babel的整合包
eslint-plugin-vue @vue/cli-plugin-eslint:eslint和vue的整合包

02、安装 Prettier 依赖

适应vue3以下:

npm i -D prettier eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli

prettier:Prettier的核心代码
eslint-plugin-prettier:将prettier作为ESLint规范来使用
eslint-config-prettier:解决 ESLint 中的样式规范和 prettier 中样式规范的冲突,以 prettier 的样式规范为准,使 ESLint 中的样式规范自动失效
prettier-eslint-cli:prettier-eslint-cli 允许你对多个文件用 prettier-eslint 进行格式化

适用vue3:

 npm i -D prettier eslint-plugin-prettier @vue/eslint-config-prettier

三、全局配置:

更改配置,使其在保存时会进行自动格式化:

settings.json补充

{
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "vetur.format.defaultFormatter.html": "prettier",
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

注意:在 vscode 中其实 Vetur 也有一套 Format 规则,因此会和 prettier 冲突。
打开 setting-扩展-Vetur 将 Vetur 的规则改成 Prettier 就行了。
在这里插入图片描述

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

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

相关文章

SpringSecurity 手机号登录

一、工作流程 1.向手机发送验证码,第三方短信发送平台,如阿里云短信。 2.手机获取验证码后,在表单中输入验证码。 3.使用自定义过滤器​SmsCodeValidateFilter​。 4.短信校验通过后,使用自定义手机认证过滤器​SmsCodeAuthentic…

利用vue-okr-tree实现飞书OKR对齐视图

vue-okr-tree-demo 因开发需求需要做一个类似飞书OKR对齐视图的功能,参考了两位大神的代码: 开源组件vue-okr-tree作者博客地址:http://t.csdnimg.cn/5gNfd 对组件二次封装的作者博客地址:http://t.csdnimg.cn/Tjaf0 开源组件v…

oracle aq java jms使用(数据类型为XMLTYPE)

记录一次冷门技术oracle aq的使用 版本 oracle 11g 创建用户 -- 创建用户 create user testaq identified by 123456; grant connect, resource to testaq;-- 创建aq所需要的权限 grant execute on dbms_aq to testaq; grant execute on dbms_aqadm to testaq; begindbms_a…

android studio 快捷输入模板提示

在Android开发中,我们经常会遇到一些重复性的代码,例如创建一个新的Activity、定义一个Getter方法等。为了提高开发效率,Android Studio提供了Live Templates功能,可以通过简化输入来快速生成这些重复性代码。 按下图提示设置&am…

GO并发编程综合应用

一.GO并发编程综合应用 1.生产者消费者模式 1.1需求分析 ​ 生产者每秒生产一个商品,并通过物流公司取货 ​ 物流公司将商品运输到商铺 ​ 消费者阻塞等待商铺到货,需要消费10次商品 1.2实现原理 1.3代码实现: package mainimport (&q…

Google DeepMind发布Imagen 2文字到图像生成模型;微软在 HuggingFace 上发布了 Phi-2 的模型

🦉 AI新闻 🚀 Google DeepMind发布Imagen 2文字到图像生成模型 摘要:谷歌的Imagen 2是一种先进的文本到图像技术,可以生成与用户提示紧密对齐的高质量、逼真的图像。它通过使用训练数据的自然分布来生成更逼真的图像&#xff0c…

服务器上配置jupyter,提示Invalid credentials如何解决

我是按照网上教程在服务器上安装的jupyter以及进行的密码配置,我利用 passwd()这个口令生成的转译密码是"argon...."。按照教程配置jupyter notebook配置文件里面的内容,登陆网页提示"Invalid credentials"。我谷歌得到的解答是&…

07用户行为日志数据采集

用户行为数据由Flume从Kafka直接同步到HDFS,由于离线数仓采用Hive的分区表按天统计,所以目标路径要包含一层日期。具体数据流向如下图所示。 按照规划,该Flume需将Kafka中topic_log的数据发往HDFS。并且对每天产生的用户行为日志进行区分&am…

cfa一级考生复习经验分享系列(三)

从总成绩可以看出,位于90%水平之上,且置信区间全体均高于90%线。 从各科目成绩可以看出,所有科目均位于90%线上或高于90%线,其中,另类与衍生、公司金额、经济学、权益投资、固定收益、财报分析表现较好,目测…

多架构容器镜像构建实战

最近在一个国产化项目中遇到了这样一个场景,在同一个 Kubernetes 集群中的节点是混合架构的,也就是说,其中某些节点的 CPU 架构是 x86 的,而另一些节点是 ARM 的。为了让我们的镜像在这样的环境下运行,一种最简单的做法…

双端队列和优先级队列

文章目录 前言dequedeque底层设计迭代器设计 priority仿函数数组中的第k个最大元素优先级队列模拟实现pushpop调整仿函数存储自定义类型 前言 今天要介绍比较特殊的结构,双端队列。 还有一个适配器,优先级队列。 deque 栈的默认容器用了一个deque的东西…

案例课7——百度智能客服

1.公司介绍 百度智能客服是百度智能云推出的将AI技术赋能企业客服业务的一揽子解决方案。该方案基于百度世界先进的语音技术、自然语言理解技术、知识图谱等构建完备的一体化产品方案,结合各行业头部客户丰富的运营经验,持续深耕机场服务、电力调度等场…

【普中】基于51单片机简易计算器显示设计( proteus仿真+程序+设计报告+实物演示+讲解视频)

目录标题 📟1. 主要功能:📟2. 讲解视频:📟3. 设计说明书(报告)📟4. 仿真📟5. 实物烧录和现象📟6. 程序代码📟7. 设计资料内容清单 【普中开发板】基于51单片机简易计算器…

日志框架Log4j、JUL、JCL、Slf4j、Logback、Log4j2

为什么程序需要记录日志 我们不可能实时的24小时对系统进行人工监控,那么如果程序出现异常错误时要如何排查呢?并且系统在运行时做了哪些事情我们又从何得知呢?这个时候日志这个概念就出现了,日志的出现对系统监控和异常分析起着…

Jenkins 添加节点报错

报错日志 Error: A JNI error has occurred, please check your installation and try again Exception in thread "main" java.lang.UnsupportedClassVersionError: hudson/remoting/Launcher has been compiled by a more recent version of the Java Runtime (cl…

react+datav+echarts实现可视化数据大屏

📓最近有点闲,就学习了下react,没想到就把react学完了,觉得还不错,就打算出一把reactdatav的简易版可视化数据大屏供大家做个参考。 📓效果如下 1下载必要的框架 📓 react路由 npm install re…

Rancher中使用promtail+loki+grafna收集k8s日志并展示

Rancher中使用promtail+loki+grafna收集k8s日志并展示 根据应用需求和日志数量级别选择对应的日志收集、过滤和展示方式,当日志量不太大,又想简单集中管理查看日志时,可使用promtail+loki+grafna的方式。本文找那个loki和grafana外置在了k8s集群之外。 1、添加Chart Repo …

js解析.shp文件

效果图 原理与源码 本文采用的是shapefile.js工具 这里是他的npm地址 https://www.npmjs.com/package/shapefile 这是他的unpkg地址,可以点开查看源码 https://unpkg.com/shapefile0.6.6/dist/shapefile.js 这个最关键的核心问题是如何用这个工具,网上…

[开源更新] 企业级身份管理和访问管理系统、为数字身份安全赋能

一、系统简介 名称:JNPF权限管理系统 JNPF 权限管理系统可用于管理企业内员工账号、权限、身份认证、应用访问等,可整合部署在本地或云端的内部办公系统、业务系统及第三方 SaaS 系统的所有身份,实现一个账号打通所有应用的服务。其有如下几…

【Docker】WSL 2 上的 Docker 搭建和入门

▒ 目录 ▒ 🛫 导读开发环境 1️⃣ 安装安装Docker Desktop for Windows 2️⃣ 环境配置3️⃣ hello world第一次运行再次运行分析总结 📖 参考资料 🛫 导读 开发环境 版本号描述文章日期2023-12-14操作系统Win11 - 22H222621.2715WSL2 C:…