vscode配置setting.json文件实现eslint自动格式代码

2023-10-26

一、ESlint+Vetur 实现ESlint代码规范

在这里插入图片描述
在这里插入图片描述

二、重点----旧版本(旧版本配置在setting.json 会出现警告)

在这里插入图片描述

{
“eslint.autoFixOnSave”: true,
“eslint.validate”: [
“javascript”,
{
“language”: “vue”,
“autoFix”: true
},
{
“language”: “html”,
“autoFix”: true
}
]
}

三、新版配置----新版本

在这里插入图片描述
在这里插入图片描述

{
“editor.codeActionsOnSave”: {
“source.fixAll.eslint”: true
},
“eslint.probe”: [“javascript”, “vue”, “html”]
}

以下是对自己vscode-settings.json 做一个记录(仅供参考)

{
  //设置文字大小
  "editor.fontSize": 18,

  //设置文字行高
  "editor.lineHeight": 24,

  //开启行数提示
  "editor.lineNumbers": "on",

  // 在输入时显示含有参数文档和类型信息的小面板。
  "editor.parameterHints.enabled": true,

  // 调整窗口的缩放级别
  "window.zoomLevel": 0,

  // 文件目录
  "workbench.iconTheme": "vscode-icons",

  // 设置字体
  "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",

  // 自动换行
  "editor.wordWrap": "on",

  // 自定义vscode面板颜色
  "workbench.colorCustomizations": {
    "tab.activeBackground": "#253046", // 活动选项卡的背景色
    "activityBar.background": "#253046", //活动栏背景色
    "sideBar.background": "#253046", //侧边栏背景色
    "activityBar.foreground": "#23f8c8", //活动栏前景色(例如用于图标)
    "editor.background": "#292a2c" //编辑器背景颜色
    // "editor.foreground":"#ff0000", 	//编辑器默认前景色
    // "editor.findMatchBackground":"#23f8c8", 	//当前搜索匹配项的颜色
    // "editor.findMatchHighlightBackground":"#ff0000", 	//其他搜索匹配项的颜色
    // "editor.lineHighlightBackground":"#ff0000", 	//光标所在行高亮文本的背景颜色
    // "editor.selectionBackground":"#ff0000", 	//编辑器所选内容的颜色
    // "editor.selectionHighlightBackground":"#ff0000", 	//与所选内容具有相同内容的区域颜色
    // "editor.rangeHighlightBackground":"#ff0000", 	//突出显示范围的背景颜色,例如 "Quick Open" 和“查找”功能
    // "editorBracketMatch.background":"#ff0000", 	//匹配括号的背景色
    // "editorCursor.foreground":"#ff0000", 	//编辑器光标颜色
    // "editorGutter.background":"#ff0000", 	//编辑器导航线的背景色,导航线包括边缘符号和行号
    // "editorLineNumber.foreground":"#ff0000", 	//编辑器行号颜色
    // "sideBar.foreground":"#ff0000", 	//侧边栏前景色
    // "sideBarSectionHeader.background":"#ff0000", 	//侧边栏节标题的背景颜色
    // "statusBar.background":"#ff0000", 	//标准状态栏背景色
    // "statusBar.noFolderBackground":"#ff0000", 	//没有打开文件夹时状态栏的背景色
    // "statusBar.debuggingBackground":"#ff0000", 	//调试程序时状态栏的背景色
    // "tab.activeForeground":"#ff0000", 	//活动组中活动选项卡的前景色
    // "tab.inactiveBackground":"#ff0000", 	//非活动选项卡的背景色
    // "tab.inactiveForeground":"#ff0000"  // 活动组中非活动选项卡的前景色
  },
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,

  // 重新设定tabsize
  "editor.tabSize": 2,

  // #每次保存的时候自动格式化
  "editor.formatOnSave": true,

  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

  // #这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html",

  // #让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",

  // 保存时运行的代码ESLint操作类型。
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // 添加emmet支持vue文件
  "emmet.includeLanguages": {
    "wxml": "html",
    "vue": "html"
  },

  // 两个选择器中是否换行
  "minapp-vscode.disableAutoConfig": true,

  //快速预览(右侧)
  "editor.minimap.enabled": true,

  // tab 代码补全
  "files.associations": {
    "*.wpy": "vue",
    "*.vue": "vue",
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },

  // 用来配置如何使用ESLint CLI引擎API启动ESLint。 默认为空选项
  "eslint.options": {
    "extensions": [".js", ".vue"]
  },

  // 在onSave还是onType时执行linter。默认为onType。
  "eslint.run": "onSave",

  // 启用ESLint作为已验证文件的格式化程序。
  "eslint.format.enable": true,

  // 语言标识符的数组,为此ESLint扩展应被激活,并应尝试验证文件。
  "eslint.probe": ["javascript", "javascriptreact", "vue-html", "vue", "html"],

  //关闭rg.exe进程 用cnpm导致会出现rg.exe占用内存很高
  "search.followSymlinks": false,

  // 给js-beautify-html设置属性隔断
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned",
      "max_preserve_newlines": 0
    }
  },

  // style默认偏移一个indent
  "vetur.format.styleInitialIndent": true,

  // 定义匿名函数的函数关键字后面的空格处理。
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,

  // 定义函数参数括号前的空格处理方式。
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,

  // 新版本消息
  "vsicons.dontShowNewVersionMessage": true,

  // 控制资源管理器是否在把文件删除到废纸篓时进行确认。
  "explorer.confirmDelete": true,

  // 使用eslint-plugin-vue验证<template>中的vue-html
  "vetur.validation.template": false,

  // 指定用在工作台中的颜色主题。
  "workbench.colorTheme": "One Dark Pro"
}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vscode配置setting.json文件实现eslint自动格式代码 的相关文章

  • 用Vscode编辑verilog代码配置

    这篇教程感觉很详细了 我这里分享一下vscode和插件的安装包链接 都是官网下载的 放心食用 用VSCode编辑verilog代码 iverilog编译 自动例化 自动补全 自动格式化等常用插件 链接 https pan baidu com
  • Java PECS(Producer Extends Consumer Super)原则

    在看 Alibaba 开发手册时遇到 PECS 原则 刚开始阅读时感觉比较绕 也搜索了一些博文参考 个人觉得 Stackoverflow 的这篇文章比较实用 What is PECS Producer Extends Consumer Su
  • 8种常见的 代码 编译 软件 !!

    VS Code Source Insight Vim UltraEdit eclipse Understand Atom Sublime Text 接下来详细为大家讲解一下它们各自的用途 目录 1 VS Code 2 Source Insi
  • VSCode安装教程

    VSCode软件下载 官网下载地址 Visual Studio Code Code Editing Redefined 1 点击Download for Windows的下拉按钮 点击Other downloads 2 在这里可以选择自己想
  • 最快方式 ESP-IDF 创建例子 教程

    需要条件 安装了 VSCODE 安装了插件 Espressif IDF工具 系统中安装了 ESP IDF 可使用离线包 或在线安装包 在插件中配置了 ESP IDF 可能需要在线更新一些东西 点击F1 输入 ESP 等待提示 出现提示后 选
  • 成功解决 vscode远程调试python

    welcome to my blog 微软新出的插件 非常方便远程调试 不需要改动代码 简单9步 配置远程调试环境 第一步 按ctrl shift x 输入remote development 安装 第二步 按ctrl shift p 输入
  • VScode扩展商店不显示插件问题

    VScode扩展商店不显示插件问题 情况一 代理服务器异常 参考文章 https blog csdn net wodebokecsdn article details 89239769 文件 首选项 设置 应用程序 代理服务器 情况二 设备
  • 在VS Code中使用Kotlin

    在VS Code中使用Kotlin 当前Google有意用Kotlin来替代Java 今后在Android开发中 可能Kotlin会成为标准语言 Kotlin语言是由JetBrains公司开发的 就是做IntelliJ IDEA的那家公司
  • vscode: Downloading package ‘C/C++ language components (Linux / x86_64)‘ Failed.

    使用vscode远程连接docker容器 进入容器后报错 Updating C C dependencies Downloading package C C language components Linux x86 64 Failed R
  • vscode使用手册

    VS Code Visual Studio Code 是一款轻量级 跨平台的源代码编辑器 支持语法高亮 自动补全 调试 Git 版本控制等功能 下面是一些使用 VS Code 的基本操作 安装和启动 在官网上下载并安装 VS Code 打开
  • 企业微信登录-前端实现

    企业微信登录 企业微信登录 前端具体实现 下面代码中配置项的字段具体用途说明可以阅读企业微信开发者说明文档 我们通过提供的企业微信登录组件来进行站内登录 下面是我封装的登录组件以及使用方法 weChatLogin vue 封装的组件
  • VSCode中配置命令行参数

    VSCode中配置命令行参数 在跑程序调试的时候 可以直接使用脚本运行程序 这个时候调试代码只能用pdb 我觉得不太习惯 而且感觉不是很好 所以想这能不能将运行程序的脚本中的命令直接配置到vscode上 就有了这篇记录 正常vscode D
  • VSCode『SSH』连接服务器『GUI界面』传输

    前言 最近需要使用实验室的服务器训练带有 GUI 画面的 AI 算法模型 pygame 但是我是使用 SSH 连接的 不能很好的显示模型训练的效果画面 所以下面将会讲解如何实现 SSH 连接传输 Linux GUI 画面的 注 我们没有采用
  • VMware--配置php debug环境之PHPStudy+VSCode Xdebug php调试

    目录 1 win配置php环境 1 1 配置PHPStudy 1 1 1 下载phpstudy 1 1 2 配置phpstudy 1 1 3 测试phpstudy是否配置完成 1 2 配置环境变量 1 2 1 打开环境变量 添加配置 1 2
  • 基于google升级版c++代码规范指南

    有些团队所有成员写的代码都一致 10个人写的代码像1个人写的 正因为有代码规范 使得代码可读性强 方便代码review 利于后期维护 这体现了代码规范的重要性 接下来 在参考google的代码规范基础上 详细列举代码规范细节 1 文件描述
  • 【最全镜像源】pip国内镜像最全收集【清华源、豆瓣、阿里云,北外,华科,中科大,中科院,腾讯云,华为云,搜狐,网易】

    清华源 i https pypi tuna tsinghua edu cn simple 北外 i https mirrors bfsu edu cn pypi web simple 中科大 i https pypi mirrors ust
  • vscode调试mit6s081Lab

    环境 mit6 s081的实验环境 gdb multiarch 用于gdb调试 vscode调试实质上就是提供个图形化页面 底层还是这个 安装 gdb multiarch sudo apt get install gdb multiarch
  • VSCode中如何查看EDI报文?

    VSCode是开发人员常用的一款软件 为了降低EDI报文的阅读门槛 知行的开发人员设计了EDI插件 可以在VSCode中下载使用 如何打开一个EDI报文 VSCode EDI插件介绍 EDI插件下载流程 进入VSCode 打开Extensi
  • vscode 内置(自带)功能使用

    vscode 搜索 功能 使用正则表达式 参考文章 Justice23 参考文章 熟悉的新风景 转义字符 匹配内容 t tab r 回车符号 r n 换行符号 n 特殊符号转义 如
  • 【C++】__declspec含义

    目录 一 declspec dllexport 如果这篇文章对你有所帮助 渴望获得你的一个点赞 一 declspec dllexport declspec dllexport 是 Microsoft Visual C 编译器提供的一个扩展

随机推荐

  • arduino字符串处理函数charAt()提取字符

    语法 String charAt n 参数 n 字符串中的第几个字 返回值 char 功能 获取字符串中的某一个字符 字符的位置即n的位置 String str hello 定义一个字符对象 Char s str charAt 3 取对象里
  • 单链表插入与删除数据

    1 按元素大小顺序插入到链表中 2 include
  • 在eclipse中调试时,怎样查看一个变量的值?

    在要查看的变量前先设置断点 然后选中变量 右键选debug as gt Java Application 打开debug 透视图 这时在Variables 窗口中可以看到变量当前的值 如果是局部变量 也可以在局部变量窗口中查看 要知道一个方
  • 【区块链新手快速入门】如何构建一个区块链

    本文翻译自 Learn Blockchains by Building One 作者 dvf 原文链接 https hackernoon com learn blockchains by building one 117428612f46
  • go单元测试进阶篇

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 版权声明 本文由腾讯云数据库团队 原创文章 转载请注明出处 文章原文链接 https www qcloud com community article 9219850014
  • 函数的错误应用导致的致命错误(一)——strcpy

    对一个coder来说 记录一些自己所遇到的错误及解决方法是很重要的 写此系列博文 以备后用 也希望对大家有所帮助 下面是我在调试一个程序是碰到的错误 错误log F libc 7081 ABORTING invalid address or
  • linux/windows上的端口转发 —— 筑梦之路

    linux上利用iptables firewalld防火墙做端口转发 将本地的80端口 HTTP 转发到远程服务器上的8080端口 iptables 端口转发 sudo iptables t nat A PREROUTING p tcp d
  • VScode神仙插件,程序员必备

    前言 Visual Studio Code VS Code 是微软2015年推出的一个轻量但功能强大的源代码编辑器 基于 Electron 开发 支持 Windows Linux 和 macOS 操作系统 它内置了对JavaScript T
  • 第八章 综合案例——构建DVD租赁商店数据仓库③

    8 3 7 加载演员数据至演员维度表 1 打开Kettle工具 打开Kettle工具 创建一个转换load dim actor 并添加表输入 插入 更新等控件 2 配置表输入控件 双击 表输入 控件 进入 表输入 配置界面 单击 新建 按钮
  • MDK 5.14软件仿真时Logic Analyzer添加信号失败解决方法

    在使用MDK 5 14进行软件仿真跟踪GPIO口的输出电平 或类似的目的 时 如果你出现下面的问题 希望本文可以帮助到你 谢谢 如上图 当在Logic Analyzer窗口中通过 Setup 添加跟踪的信号时 出现了下面的问题 Unknow
  • HTML+CSS实现一个管理系统页面的制作

    1 先来看成品效果 2 html的源码 div class head div class head left img src img logo png div div class head right div class head righ
  • 博图/博途(TIA)V13 V14 V15 V16 软件安装教程,适用于新手的傻瓜式安装方法,强推!!!!

    TIA博途提供一个软件集成的平台 在这个平台之上 通过添加不同领域的软件来管理该领域的自动化产品 比如 通过SIMATIC Step7来进行控制器 分布式IO的组态和编程 通过SIMATIC WinCC来对人机界面进行组态 在这里我就以V1
  • 关于51单片机串口中断的理解

    关于51单片机串口中断的理解 关于这个问题找了好几个帖子 都没看到能让我明白的 自己就想了想 又看了看 新手不一定说得对 您凑合着看看 要不对的话 望指正 首先 我们在SCON中设置的时候 一般都会将接收使能位REN置1 其次 串口的收发都
  • Visual Studio VS2022 设置编码为 utf-8

    1 扩展 gt 管理扩展 2 搜索utf8扩展 点击完成安装 重启VS2022就可以生效了
  • ios sdk 穿山甲_GitHub - ArthurKnight/flutter_ad_pangolin_plugin: iOS flutter 穿山甲插件

    Pangolin 前言 在使用本插件前请认真 仔细阅读穿山甲官方文档 本插件将尽量保留SDK内容和各API相关内容 如出现在官方文档以外报错信息可以留言issue 或通过文末联系方式联系作者 注明来意 针对你可能会遇到的问题 在使用过程中可
  • 爬网页不用写代码?什么操作

    实验环境 Python 3 9 12 配置文件格式 爬页面基本是先请求再解析然后再请求然后不断重复 页面结构相对固定的情况下 弄一种配置文件来描述爬取步骤 这样就不用写代码了 想要爬不同的页面只写配置不写代码 所以
  • 基于SM2证书实现SSL通信

    参考链接 基于openssl和国密算法生成CA 服务器和客户端证书 MY CUP OF TEA的博客 CSDN博客 基于上述链接 使用国密算法生成CA 服务器和客户端证书 并实现签名认证 openssl实现双向认证教程 服务端代码 客户端代
  • idea DataGrip 使用图解教程

    日常开发中少不了各种可视化数据库管理工具 如果需要同时能连接多种数据库 大家肯定都会想到 DBeaver Navicat Premium 本文介绍另一个十分好用且强大的工具 DataGrip DataGrip 是 JetBrains 公司推
  • 用串口控制kobuki, 绕过ROS系统

    介绍 下面所做的事情 用串口来控制kobuki底座运动 绕过ros系统 首先测试一下串口命令是否可用 硬件设备 kobuki turtlebot的底座 kobuki usb连接 用usb线将kobuki和电脑连接起来 不是25针的接口 wi
  • vscode配置setting.json文件实现eslint自动格式代码

    一 ESlint Vetur 实现ESlint代码规范 二 重点 旧版本 旧版本配置在setting json 会出现警告 eslint autoFixOnSave true eslint validate javascript langu