vscode使用Ctrl+s保存按Eslint风格自动格式化js/vue/React代码(2020/03/04更新)

2023-10-30


一、使用vscode下载两个插件:

1、ESlint (项目中没有装eslint,就不用装这个插件了)
2、vetur

另,多余的格式化插件一定要删掉

二、改配置,打开设置如下

在这里插入图片描述

覆盖原来的代码:
(有注释可根据个人喜好修改)
不要总是把代码复制过去,看见还报错就觉得不合适。
下面有注释,有可能只是一个属性值true或false的问题…

{
  "editor.fontSize": 12,
  "eslint.autoFixOnSave": true,
  "fileheader.LastModifiedBy": "oralinge",
  "fileheader.Author": "oralinge",
  "git.autofetch": true,
  "[html]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "editor.detectIndentation": false,
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "vetur.validation.template": false, // 标签报错
  // 添加 vue 支持
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "typescript",
      "autoFix": true
    },
  ],
  // "prettier.eslintIntegration": true,
  // //  #去掉代码结尾的分号 
  "prettier.semi": false,
  // //  #使用带引号替代双引号 
  // "prettier.singleQuote": true,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // 保存缩进空格2
  "editor.tabSize": 2,
  // #这个按用户自身习惯选择 
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #让vue中的js按编辑器自带的ts格式进行格式化 
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "semi": false
    },
    "js-beautify-html": {
      "wrap_attributes": "auto"
      // #vue组件中html代码格式化样式
      // - auto: 仅在超出行长度时才对属性进行换行。
      // - force: 对除第一个属性外的其他每个属性进行换行。
      // - force-aligned: 对除第一个属性外的其他每个属性进行换行,并保持对齐。
      // - force-expand-multiline: 对每个属性进行换行。
      // - aligned-multiple: 当超出折行长度时,将属性进行垂直对齐。
    }
  },
  // 格式化stylus, 需安装Manta's Stylus Supremacy插件
  // "stylusSupremacy.insertColons": false, // 是否插入冒号
  // "stylusSupremacy.insertSemicolons": false, // 是否插入分好
  // "stylusSupremacy.insertBraces": false, // 是否插入大括号
  // "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  // "stylusSupremacy.insertNewLineAroundBlocks": false,
  "typescript.format.insertSpaceAfterSemicolonInForStatements": false,
  "workbench.colorTheme": "Monokai Dimmed",
  "window.zoomLevel": 0,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "files.autoSaveDelay": 100 // 两个选择器中是否换行
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vscode使用Ctrl+s保存按Eslint风格自动格式化js/vue/React代码(2020/03/04更新) 的相关文章

  • 超级详细的vue2学习笔记

    概要 vue的官方文档 一 vue的核心 1 初始vue 创建一个vue的实例 const x new vue 下面的代码快速了解vue 快速知道vue的工作方式

随机推荐

  • 拯救007

    题目描述 在老电影 007之生死关头 Live and Let Die 中有一个情节 007被毒贩抓到一个鳄鱼池中心的小岛上 他用了一种极为大胆的方法逃脱 直接踩着池子里一系列鳄鱼的大脑袋跳上岸去 据说当年替身演员被最后一条鳄鱼咬住了脚 幸
  • phpstorm Cannot find declaration to go to 解决办法

    点击file gt invalidate caches restart 重启一下idea即可
  • Java中的注释(以IDEA示例,含快捷键)

    1 单行注释 public void sing 这是一条注释语句 System out println 接受自己的平凡 不仅仅是java 其它几乎所有很多主流语言 都可以使用两个 进行注释 友情提醒 据说一般大厂的技术要求是 单行注释要写在
  • 趣谈网络协议-应用层(P2P协议)

    一 FTP 1 概述 FTP 文件传输协议 使用两个TCP连接来传输文件 控制连接 客户端主动发起连接 服务端被动打开21端口 改连接将客户端命令传送给服务器 并回传服务器应答 list 获取文件目录 reter 取一个文件 store 存
  • HTTP面试题(二):HTTP请求报文和响应报文格式

    文章目录 HTTP请求报文和响应报文格式 1 请求报文 2 响应报文 3 常见的首部字段 HTTP请求报文和响应报文格式 1 请求报文 请求报文包含四个部分 请求行 包含HTTP版本号 请求方法 URI 请求首部字段 请求内容实体 空行 2
  • JUC快速学习笔记

    JUC快速学习笔记 狂神说JUC 个人学习笔记 介绍 JUC是指javaUtil包中的三个操作线程的包 并发操作 不加锁 方法 属性 方法 private int number 50 买票的方式 public void norSale if
  • 单调栈的及二维单调栈求面积

    单调栈模板 include
  • 线程安全、简单的单例编写

    单例的特性 一 构造方法私有 二 定义SingleInstance 类型属性 一 不安全的单例 public class SingleInstance private static SingleInstanceinstance null p
  • UE5 设置新打开的资产窗口默认停靠在主窗口

    文章目录 前言 方式一 设置工程文件 方式二 设置引擎文件 前言 本文以虚幻引擎5 2 0为例 不同版本的 EditorPerProjectUserSettings ini 文件所在的目录可能不一致 方式一 设置工程文件 编辑器设置 编辑
  • 4到20ma模拟量转换公式_【工控】西门子S7-200学习笔记 第三课 模拟量的使用

    一 S7 200 模拟量使用简介 S7 200系列产品可以采集标准的电压 电流模拟量信号和热电偶 热电阻温度传感器信号 普通的电压和电流信号经过A D转换成为0 32000 或者 32000 32000 之间的整数 温度传感器信号被直接转换
  • 记一次golang cpu 占用100%

    最近重新部署了下测试服务器 发现其负载达到了4 cpu 使用率达到了100 吓的瑟瑟发抖 马上起来查看情况 1 想到了使用go性能查看工具 pprof 因为项目是用gin开发的 所在直接安装了 github com gin contrib
  • 卷积神经网络基础

    一 卷积 本来想自己写一点 发现了很不错的一篇博客 就不班门弄斧了 什么是卷积 知乎 一句话概括 某一时刻 某点的能量 或值 等于多个其他点的叠加 二 卷积神经网络基础 CNN的核心思想 如果简单采用全连接的方式去训练模型 参数量过多难以训
  • 游戏手机连接服务器没有响应时间,雷军:黑鲨游戏手机2响应时间58.9ms,超iPhone...

    IT之家3月18日消息 今天 黑鲨推出新款黑鲨游戏手机2 这款手机起售价为3199元 共有暗影黑和冰封银两种颜色可选 对于这款刚发布的新机型 雷军大赞 操控之王 雷军表示 手起枪响 在高速摄像机镜头下 iPhone响应时间为80ms 黑鲨2
  • 为什么选用 Scala

    为什么选用 Scala 当今的企业和互联网应用程序必须平衡一系列的要点 它们要有快速而可靠的实现 新的功能要能在短时间内通过周期渐进的方式加入 除了简单地提供商务逻辑之外 应用程序必须支持访问安全控制 数据持久化 事务 和其它的进阶功能 程
  • nginx配置websocket反向代理

    设置 nginx增强理解 nginx增加下面的配置 location ver proxy http version 1 1 proxy set header Upgrade http upgrade proxy set header Con
  • APP外包开发第三方登录

    APP开发过程中往往需要对接第三方的登录 国内的有微信 QQ 微博等 国外的有google facebook等账号 对接第三方账号登录SDK可以方便用户快捷登录 是APP登录功能里一项重要的特性 今天和大家分享对接流程和注意事项 希望对大家
  • Git团队协作及分支策略

    目录 分布式版本控制系统 访问模型 分支策略 Git flow 分支策略 Github flow 分支策略 Gitlab flow 主干开发模式 总结 分布式版本控制系统 分布式相比于集中式的最大区别在于开发者可以提交到本地 每个开发者通过
  • 删除链表的中间节点 Java实现_【链表问题】删除单链表的中间节点

    前言 以专题的形式更新刷题贴 欢迎跟我一起学习刷题 相信我 你的坚持 绝对会有意想不到的收获 每道题会提供简单的解答 如果你有更优雅的做法 欢迎提供指点 谢谢 题目描述 给定链表的头节点head 实现删除链表的中间节点的函数 例如 步删除任
  • IDEA中单元测试@Test的设置

    1 打开IDEA File gt Project Structure 2 点到Modules gt Dependencies 点击 3 点击第一个 4 找到你安装IDEA的路径 4 找到这两个jar包 5 点击OK 6 测试
  • vscode使用Ctrl+s保存按Eslint风格自动格式化js/vue/React代码(2020/03/04更新)

    一 使用vscode下载两个插件 1 ESlint 项目中没有装eslint 就不用装这个插件了 2 vetur 另 多余的格式化插件一定要删掉 二 改配置 打开设置如下 覆盖原来的代码 有注释可根据个人喜好修改 不要总是把代码复制过去 看