vue3安装eslint和prettier,最简单的步骤

 第1步:

安装eslint

yarn add eslint -D

 第2步:

在根文件夹中,创建.eslintrc.js文件

 第3步:

在package.json文件中新增命令

 "lint": "eslint --fix --ext .ts,.tsx,.vue src --quiet","prettier": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\""

第4步:

安装eslint-plugin-vue

yarn add eslint-plugin-vue -D

第5步:

安装prettier

yarn add add prettier -D

 第6步:

在根文件夹创建 .prettierrc.js文件

第7步:

安装eslint-config-prettier

yarn add eslint-config-prettier -D

第8步:

安装eslint-plugin-prettier

yarn add eslint-plugin-prettier -D

第9步:

在.eslintrc.js文件中粘贴下面代码

module.exports = {env: {browser: true,es2021: true,node: true},extends: ["eslint:recommended","plugin:vue/vue3-essential","plugin:@typescript-eslint/recommended","plugin:prettier/recommended" //放最后面 eslint-config-prettier插件用来禁止eslint中所有格式规则],parser: "vue-eslint-parser",parserOptions: {parser: "@typescript-eslint/parser",ecmaVersion: "latest",sourceType: "module"},plugins: ["vue", "@typescript-eslint"],rules: {}
};

第10步:

在.prettierrc.js文件中粘贴下面代码

module.exports = {singleQuote: false, // 使用双引号semi: true, // 末尾添加分号 var a=1tabWidth: 2, //tab代码2个空格trailingComma: "none", // {a:1,}是否使用尾逗号,有三个可选值"<none|es5|all>useTabs: false,endOfLine: "auto",bracketSpacing: true //对象括号里是否有空格,默认为true,效果:{ foo: bar }
};

第11步:

在vscode插件中,安装eslint插件,安装prettier插件

第12步:

 点击vscode的设置

第13步:

点击控制面板

第14步:

输入Preferences:Open Workspace Settings(JSON),为项目新建 .vscode/settings.json 文件

第15步:

粘贴下面的代码


{//下面是eslint的设置"editor.codeActionsOnSave": {"source.fixAll": false,"source.fixAll.eslint": true},//下面是prettier的设置"editor.formatOnPaste": true,"editor.defaultFormatter": "esbenp.prettier-vscode"//将prettier设置为默认格式化工具
}

 第16步:

关闭vscode , 重新启动vscode,这样就全设置好了,html标签,script里的代码,style里的代码都会在保存时格式化

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

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

相关文章

红米手机如何远程控制荣耀手机?

很多人都知道&#xff0c;华为体系有【畅联】&#xff0c;与华为手机或平板“畅连”通话时&#xff0c;可共享屏幕给对方&#xff0c;一边聊天一边演示&#xff0c;还可在屏幕上涂鸦帮助理解。同样&#xff0c;小米体系有【小米通话】&#xff0c;它的远程协助功能可以帮助朋友…

蓝桥杯第100 题 九宫幻方 DFS 全排列 C++ 解题思维

题目 九宫幻方https://www.lanqiao.cn/problems/100/learning/?page1&first_category_id1&name%E4%B9%9D 思路和解题方法 一 &#xff08;DFS) 首先&#xff0c;定义了一些全局变量和数组。vis数组用于标记已经出现过的数字&#xff0c;a数组用于存储数独的初始状态…

mac上Homebrew的安装与使用

打开终端&#xff1a;command空格 &#xff0c;搜索‘’终端 ’&#xff0c;打开终端 在终端中输入以下命令并按下回车键&#xff1a; /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"这个命令会自动下载并安装…

Ubuntu18.04磁盘取证-中难度篇

涉及的镜像文件&#xff1a; sdb.vhd uac.tar ubuntu.20211208.mem 需要利用的工具&#xff1a; volatility3 volatility2.6.1 FTK/Autopsy Strings 题干 容器是一个Ubuntu Linux 蜜罐&#xff0c;用来观察利用 CVE-2021-41773 的漏洞攻击者想要做什么。 您将看到一个 cr…

【c++】多线程大幅缩减时间

多线程在进行复杂运算时能够大量节约时间 提醒自己能够在多线程运算的时候一定要充分利用 能够省下2/3的时间 测试代码 #include<vector> #include <iostream> #include <thread> using namespace cv; using namespace std; int result1 0 ; bool thread…

【TiDB】TiDB离线方式部署

目录 1 下载TiDB离线组件包 2 安装TiUP 3 合并离线包 4 TIDB 软件和硬件环境建议配置 5 TiDB环境与系统配置检查 6 生成集群初始化配置文件模板 7 执行部署命令 1 检查就能存在的潜在风险 2 手动修复风险 3 部署 TiDB 集群 8 查看TIUP管理的集群情况 9 检查部署的…

【jupyter notebook中插件 nbextensions 安装失败分析与解决方法】

文章目录 问题描述分析与解决总结 问题描述 一开始在安装 notebook 中的插件 nbextensions 时根本没有注意到版本的适配问题&#xff0c;都是进行默认的安装&#xff0c;结果安装是最新版本的 notebook7.x&#xff0c;恰好 notebook7.x 版本不再适应插件 nbextensions&#xf…

使用Arthas排查性能问题

Arthas 是一款线上监控诊断产品&#xff0c;通过全局视角实时查看应用 load、内存、gc、线程的状态信息&#xff0c;并能在不修改应用代码的情况下&#xff0c;对业务问题进行诊断&#xff0c;包括查看方法调用的出入参、异常&#xff0c;监测方法执行耗时&#xff0c;类加载信…

Open Feign 源码解析(四) --- 请求对象构造(上)

Open Feign 源码解析四 请求对象的构造&#xff08;上&#xff09; 源码前三篇文章写了这个图的过程 源码前三篇文章的内容归纳起来就是讲了这样的问题&#xff1a; 如何把接口转换为具有发送http请求能力的feign client对象以及如何整合到Spring容器中&#xff1f; 如何构造…

普通表计读数开发思路

一、普通表计类型介绍&#x1f349; 常见的普通表计有SF6&#xff0c;压力表&#xff0c;油位表&#xff08;指针类&#xff09;等。 图1&#xff1a;( 压力表) 图2&#xff1a;&#xff08;油位表-指针类&#xff09; 图3&#xff1a;&#xff08;SF6表&#xff09; 图4:&a…

linux 磁盘管理、分区管理常用命令

文章目录 基础命令挂载新硬盘/分区添加内存交换分区swaplvm分区管理模式 基础命令 查看目录文件大小 du -sh /backup du -sh /backup/* du -sh *查看磁盘挂载信息 df -lhT查看某个目录挂载在哪个分区&#xff0c;以及分区的磁盘使用情况 df [目录] #例如&#xff1a;df /ho…

(二) Windows 下 Sublime Text 3 安装离线插件 Anaconda

1 下载 Sublime Text 3 免安装版 Download - Sublime Text 2 下载 Package Control&#xff0c;放到 Sublime Text Build 3211\Data\Installed Packages 目录下。 Installation - Package Control 3 页面搜索 anaconda anaconda - Search - Package Control Anaconda - Pac…

vue3通过provide和inject实现多层级组件通信

父组件 <template><div><h1>我是父组件 {{num}}</h1><hr><child></child></div> </template><script setup> import child from ./child.vue; import { ref,provide } from vue; let num ref(520) provide(pare…

kafka的详细安装部署

简介&#xff1a; Kafka是一个分布式流处理平台&#xff0c;主要用于处理高吞吐量的实时数据流。Kafka最初由LinkedIn公司开发&#xff0c;现在由Apache Software Foundation维护和开发。 Kafka的核心是一个分布式发布-订阅消息系统&#xff0c;它可以处理大量的消息流&#…

PHP TCP服务端监听端口接收客户端RFID网络读卡器上传的读卡数据

本示例使用设备&#xff1a;WIFI/TCP/UDP/HTTP协议RFID液显网络读卡器可二次开发语音播报POE-淘宝网 (taobao.com) <?php header("content-type:text/html;charsetGBK");set_time_limit(0); $port39169; //监听端口if(($socket socket_create(AF_INET, SOCK…

共享模型之不可变

前言 该文章后续还需要进行修改&#xff01;&#xff01; 不可变的解释是对象属性不可以更改。 在多线程下&#xff0c;格式转化使用SimpleDateFormat可能会报错。这是因为线程之间互相影响导致。 public class test {public static void main(String[] args) {SimpleDateFo…

抽象类-Java

抽象类 一、父类方法的不确定性二、抽象类介绍三、抽象类细节四、练习题 一、父类方法的不确定性 引入&#xff1a;对于一个动物&#xff0c;不知道它吃什么&#xff0c;比如猫吃鱼&#xff0c;兔子吃萝卜。动物类中的 eat 方法往往由它的子类去具体实现。 class Animal {pub…

qgis添加arcgis的FeatureServer

左侧浏览器-ArcGIS要素服务器-新建连接 http://sampleserver6.arcgisonline.com/arcgis/rest/services/ 展开-双击即可

sql中group by和having的使用

group by&#xff1a;按照某个字段或者某些字段进行分组。 having&#xff1a;对分组之后的数据进行再次过滤&#xff0c;having必须和group by一起用&#xff0c;且在group by后面。 比如person表如下&#xff08;以下查询均基于此表&#xff09;&#xff1a; 1.group by 用法…

为何要隐藏IP地址?网络上哪些行为需要隐藏IP和更换IP?

网络已经成为现代人生活的重要组成部分&#xff0c;人们在网络上交流、学习、娱乐、购物等。但是&#xff0c;在享受网络带来的便利时&#xff0c;我们也需要时刻保护自己的隐私和安全。其中&#xff0c;IP地址作为网络通信中的重要标识&#xff0c;如何隐藏以及在哪些情况下需…