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远程连接ubuntu服务器

    1 打开VSCode 安装插件 安装插件 汉化 方法如下 重启之后界面就都是中文了 因为我之前弄过了 如果你的已经是中文了 可以省去这一步 安装remote development插件 如下图 用于远程连接服务器 安装好之后 左侧多了一个
  • 【VsCode远程开发】Windows SSH远程连接Linux服务器 - 无公网IP内网穿透

    文章目录 前言 视频教程 1 安装OpenSSH 2 vscode配置ssh 3 局域网测试连接远程服务器 4 公网远程连接 4 1 ubuntu安装cpolar内网穿透 4 2 创建隧道映射 4 3 测试公网远程连接 5 配置固定TCP端
  • 解决VSCode中查看ESP32日志乱码

    问题现象 在VSCode的Monitor中查看ESP32输出的日志乱码 如下图 原因 在VSCode中IDF默认的Monitor串口波特率为460800 然而ESP32输出Log的串口波特率默认为115200 因串口波特率不匹配导致Moni
  • 怎么用vscode进行单步调试

    1 修改launch文件 version 0 2 0 configurations name gdb Launch type cppdbg request launch program workspaceFolder build my cm
  • vscode cmake 编译32位程序

    vscode cmake 编译32位程序 为什么要用cmake vscode中的C C 插件直接支持的只是最简单的单文件编译 运行和调试 要管理大的项目 或者生成库 C C 插件不能直接支持 需要开发者利用vscode的task功能 结合脚
  • cpplint在VS Code中的安装及使用

    目录 前言 Python环境的配置 在VS Code中安装相应插件 补充 如何将VS Code默认的格式化风格改为Google风格 相关链接 前言 cpplint是一款Google的代码检查工具 确定一种编码风格对于我们有非常大的帮助 也可
  • 最快方式 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编辑和提交github仓库代码

    写在前面 在github上想删除仓库中的某个文件或文件夹 亦或是重命名操作都很麻烦 这里提供一种vscode的解决方案 在vscode中克隆远程github仓库 然后对代码或文件进行编辑 最后提交即可 就和管理本地文件一样方便 准备工作 下
  • vscode实现文件单步调试保姆级教程

    第一步 第二步 第三步 第四步 第五步 第六步 第七步 第八步 第九步 第十步 点击终端 gt 配置任务 第十一步 第十二步 第十三步 第十四步 设置完毕 可以在源程序打断点按F5执行了
  • 中国太阳能热水器市场营销模式探析与品牌格局调研报告2022版

    中国太阳能热水器市场营销模式探析与品牌格局调研报告2022版 HS HS HS HS HS HS HS HS HS HS HS HS 修订日期 2021年11月 搜索鸿晟信合研究院查看官网更多内容 第一章 太阳能热水器相关概述 1 1 太阳
  • Vscode连接远程服务器(一套配置成功)

    安装远程开发插件Remote Development 1 在商店中搜索Remote Development并安装 2 添加服务器连接配置 点击该选项卡 会进入SSH TARGETS的添加 如下图所示 填写配置信息可在下边操作中查看 修改 想
  • VScode配置文档

    vscode配置 常用插件 View In Browser 预览页面 ctrl F1 vscode icons 侧栏的图标 对于一个有视觉强迫症的人是必须要的 HTML Snippets 支持HTML5的标签提示 JS CSS HTML F
  • vscode的Document This插件

    Document This插件 主要针对JavaScript 和 TypeScript 语言生成注释 光标放在函数名上 连续按 两下 Ctrl Alt D description param number x param number y
  • TensorFlow.js预测鸢尾花种类

    源码连接 TensorFlow js实现鸢尾花种类预测 机器学习文档类资源 CSDN下载 一 加载IRIS数据集 创建index html入口文件 跳转到script主文件 在script js文件夹中利用预先准备好的脚本生成鸢尾花数据集
  • vscode调试mit6s081Lab

    环境 mit6 s081的实验环境 gdb multiarch 用于gdb调试 vscode调试实质上就是提供个图形化页面 底层还是这个 安装 gdb multiarch sudo apt get install gdb multiarch
  • 2021最新阿里代码规范(前端篇)

    简介 2021最新阿里代码规范 前端篇 此规范根据阿里最新前端规范整理 如有雷同 纯属巧合 前端代码规范 一 编程规约 一 命名规范 1 1 1 项目命名 全部采用小写方式 以中线分隔 1 1 2 目录命名 全部采用小写方式 以中划线分隔
  • vscode 内置(自带)功能使用

    vscode 搜索 功能 使用正则表达式 参考文章 Justice23 参考文章 熟悉的新风景 转义字符 匹配内容 t tab r 回车符号 r n 换行符号 n 特殊符号转义 如
  • VSCode 代码高亮 变量类型、函数名、类名没有颜色 - 设置主题即可

    https zhuanlan zhihu com p 630401039 之前应该设置主题了 但不知道为啥C 里面只有 int 有高亮 其他像 cv Mat 函数名 类名都没有颜色 解决方案是重新设置一下主题 File preference
  • NVIDIA Jetson环境VSCode安装记录,前期失败问题在于英伟达使用的是arm64架构

    1 安装失败及原因探索 1 1 报错 Unable to install code The following packages have unmet dependencies 搜索一个链接就开始上手 Ubuntu 22 04安装Visua

随机推荐

  • 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