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=1
  tabWidth: 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里的代码都会在保存时格式化

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

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

相关文章

Day49:647. 回文子串、516.最长回文子序列

文章目录 647. 回文子串思路代码实现 516.最长回文子序列思路代码实现 647. 回文子串 题目链接 思路 确定dp数组&#xff08;dp table&#xff09;以及下标的含义 布尔类型的dp[i][j]&#xff1a;表示区间范围[i,j] &#xff08;注意是左闭右闭&#xff09;的子串是否是回文…

第20章 多线程

创建线程 继承Thread 类 Thread 类时 java.lang 包中的一个类&#xff0c;从类中实例化的对象代表线程&#xff0c;程序员启动一个新线程需要建立 Thread 实例。 Thread 对象需要一个任务来执行&#xff0c;任务是指线程在启动时执行的工作&#xff0c;start() 方法启动线程&am…

mysql 命令行导入sql 数据,windows导入,强制导入

线上用了polarDB&#xff0c; 本地导入的时候&#xff0c;通过navicat 的备份导入和执行sql文件的方式导入都失败了 用命令行的方式可以导入sql 当我用windows 的cmd 导入的时候&#xff0c;会报一些命令行的错误。 那其实我检查了这个命令是没有问题的。 mysql -uroot -p hu…

SAP_ABAP_编程基础_字符转换_内存表、jsonString 相互转换

SAP ABAP 顾问&#xff08;开发工程师&#xff09;能力模型_Terry谈企业数字化的博客-CSDN博客文章浏览阅读441次。目标&#xff1a;基于对SAP abap 顾问能力模型的梳理&#xff0c;给一年左右经验的abaper 快速成长为三年经验提供超级燃料&#xff01;https://blog.csdn.net/j…

这些汽车托运套路你肯定不知道

这些汽车托运套路你肯定不知道 这些套路你肯定不知道.. 学会这三招 汽车托运不怕吃亏 1 看营业执照 首先确定选择的托运公司是否有保障 要求公司出示营业执照和道路运输经营许可证 如果都没有 那就很有可能是无牌照的小作坊!! 这种出问题就肯定没保障 2 保险跟合同 一车一合同 …

Docker Swarm总结+service创建和部署、overlay网络以及Raft算法(2/5)

博主介绍&#xff1a;Java领域优质创作者,博客之星城市赛道TOP20、专注于前端流行技术框架、Java后端技术领域、项目实战运维以及GIS地理信息领域。 &#x1f345;文末获取源码下载地址&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3fb;…

第20章多线程

创建线程 继承Thread 类 Thread 类时 java.lang 包中的一个类&#xff0c;从类中实例化的对象代表线程&#xff0c;程序员启动一个新线程需要建立 Thread 实例。 Thread 对象需要一个任务来执行&#xff0c;任务是指线程在启动时执行的工作&#xff0c;start() 方法启动线程&am…

【Linux】cd 命令使用

cd&#xff08;英文全拼&#xff1a;change directory&#xff09;命令用于改变当前工作目录的命令&#xff0c;切换到指定的路径。 ~ 也表示为 home 目录 的意思。. 则是表示目前所在的目录。.. 则表示目前目录位置的上一层目录。 语法 cd [目录] 命令选项及作用 执行令 …

【TiDB】TiDB离线方式部署

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

OBS Studio 30.0 正式发布:支持 WebRTC

导读OBS Studio 30.0 已正式发布。此版本移除了对 Ubuntu 20.04、Qt 5 和 FFmpeg 4.4 之前版本的支持。 OBS Studio 30.0 已正式发布。此版本移除了对 Ubuntu 20.04、Qt 5 和 FFmpeg 4.4 之前版本的支持。 主要变化包括&#xff1a; 支持 WebRTC&#xff08;详情查看 OBS Stu…

2023.11.27 关于 Mybatis 增删改操作

目录 引言 增加用户操作 删除用户操作 修改用户操作 阅读下述文章之间 建议点击下方链接先了解 MyBatis 的创建与使用 MyBatis 的创建与使用 建议点击下方链接先了解 单元测试 的创建与使用 Spring Boot 单元测试的创建与使用 引言 为了方便下文实现增、删、改操作我们先…

shiro整合redis

shiro整合redis 前言&#xff1a;shiro默认的session是存储在jvm内存中的&#xff0c;这样会导致java服务内存占用更大以及一旦服务器宕机或者版本迭代需要重启服务时&#xff0c;缓存中的数据不能恢复&#xff0c;导致用户需要重新登录认证&#xff0c;体验很差。因此利用第三…

centos7-docker安装与使用

文章目录 一、docker简介1.1docker应用场景1.2docker的优点1.2.1快速&#xff0c;一致地交付应用程序1.2.2响应式部署和扩展1.2.3在同一硬件上运行更多工作负载 1.2docker的架构 二、docker的安装2.1新系统的环境搭建2.1.1更换yum源 2.2安装docker与卸载2.2.1yum安装docker2.2.…

跨越速运在货运高峰的同时,受邀参加国际医疗器械博览会

作为国内领先的物流企业&#xff0c;跨越速运在一年一度的年终大促&#xff0c;货运高峰的同时&#xff0c;受第88届中国国际医疗器械博览会&#xff08;以下简称CMEF&#xff09;活动主办方邀请&#xff0c;&#xff09;于2023年10月31日&#xff0c;在深圳国际会展中心重磅亮…

C++基础 -6- 引用

引用格式(图片代码段呈现) int main() {int a 10;int &b a;cout << b << endl;cout << a << endl;b 20;cout << a << endl; }引用一般用于传参 下面举例说明两个变量交换值 分别使用普通方式和引用方式 引用传递参数的过程中就不…

C++-详解C++11中的左值,左值引用,右值,右值引用

目录 一.C语言中对左值和右值的定义 1.左值 2.右值 二.左值引用和右值引用 1.左值引用 2.右值引用 3.左值引用给右值取别名 4.右值引用给左值取别名 三.移动构造和移动赋值 1.移动赋值 2.移动拷贝 ​编辑​编辑 四.完美转发 1.先看一道试题&#xff1a; 一.C语言中对左值和…

外汇天眼:8家平台被监管拉黑,其中1家为假冒JP Morgan

就在最近&#xff0c;有八家未经监管授权的外汇交易公司被监管机构拉黑&#xff0c;其中有一家为假冒JP Morgan。具体新闻如下&#xff1a; 英国FCA对未授权平台Gens Markets发出警告 上周&#xff0c;英国金融行为监管局&#xff08;FCA&#xff09;对未经过监管授权的外汇平…

Kotlin学习之集合

原文链接 Kotlin Collections 现代的软件一般比较复杂&#xff0c;程序语言中的基本数据类型往往不能满足需要&#xff0c;除了基本的数据类型以外&#xff0c;还有对象的容器也非常的重要&#xff0c;比如线性容器&#xff08;数组&#xff0c;列表和Set&#xff09;和二维容…

Python提取PDF表格(基于AUTOSAR_SWS_CANDriver.pdf)

个人学习笔记&#xff0c;仅供参考。 需求&#xff1a;提取AUTOSAR SWS中所有的API接口信息&#xff0c;用于生成C代码。 此处以AUTOSAR_SWS_CANDriver.pdf为例&#xff0c;若需要提取多个SWS文件&#xff0c;遍历各个文件即可。 1.Python包 pdfplumber是一款完全用python开…

销量上不去,消费者纷纷回归直屏,折叠手机成为电子垃圾

折叠手机成为安卓手机创新的噱头&#xff0c;不过随着更多消费者使用了折叠手机&#xff0c;折叠手机正迅速走下神坛&#xff0c;用过的消费者都说体验太差&#xff0c;纷纷抛弃这种手机&#xff0c;而在二手市场价格又达到骨折&#xff0c;可以说折叠手机正成为电子垃圾。 折叠…