vscode vue settings.json 代码格式化配置！自定义设置 VSCode代码颜色设置（霸霸看了都说好）_vxcode settings [vue]-程序员宅基地

配置

VS Code 文件 -> 首选项 -> 设置 -> 用户设置栏 -> 扩展 -> Vetur
在这里插入图片描述
打开文件加入如下配置：

{
    
    // tab 大小为2个空格
    "editor.tabSize": 2,
    // 字體大小
    "editor.fontSize": 16,
    // 設置行高
    "editor.lineHeight": 25,
    // 保存时格式化
    "editor.formatOnSave": true,
    // 开启 vscode 文件路径导航
    "breadcrumbs.enabled": true,
    // 显示 markdown 中英文切换时产生的特殊字符 
    "editor.renderControlCharacters": true,
    // 设置 eslint 保存时自动修复
    "eslint.autoFixOnSave": true,
    // 添加 vue 支持
    "eslint.validate": [
        "javascriptreact",
        "vue",
        "javascript",
        {
    
            "language": "vue",
            "autoFix": true
        },
        "html",
        {
    
            "language": "html",
            "autoFix": true
        }
    ],
    // #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // #选择 vue 文件中 template 的格式化工具
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // #让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    // vetur 的自定义设置
    "vetur.format.defaultFormatterOptions": {
    
        "prettier": {
    
            "singleQuote": false,
            "semi": true
        }
    },
    //颜色配置
    "editor.tokenColorCustomizations": {
    
        "comments": "#858c99", // 注释
        "keywords": "#c678dd", // 关键字
        "variables": "#9fb2bf", // 变量名
        "strings": "#98c379", // 字符串
        "functions": "#e06c75", // 函数名
        "numbers": "#d19a66", // 数字
    },
    // 选中高亮的颜色
    "workbench.colorCustomizations": {
    
        "editor.selectionBackground": "#4e8bda7e", //选中高亮
        "editor.background": "#282c35", //背景色
        "editorCursor.foreground": "#bebebe", //编辑器光标颜色
        "editor.lineHighlightBackground": "#14524e", //光标所在行高亮内容的背景颜色
        "editor.lineHighlightBorder": "#00000000", //光标所在行四周边框的背景颜色
        "sideBar.background": "#21252b",
        "sideBar.foreground": "#b3bccc",
        "tab.inactiveBackground": "#21252b",
    },
    "editor.codeActionsOnSave": {
    
        "source.fixAll.eslint": true
    },
    "gitlens.advanced.messages": {
    
        "suppressGitVersionWarning": true
    },
    "files.autoSave": "onFocusChange",
}

完成

在Vue文件中 ctrl+s 保存一下，你会惊奇的发现。
在这里插入图片描述

本文链接：https://blog.csdn.net/pujun1201/article/details/119600983

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

python全栈开发—函数再战—实现模块化设计_全栈开发与数学-程序员宅基地

文章浏览阅读256次。函数再战—熟练基础，精通技能，触类旁通之所以又整理了一遍函数，主要是因为当我进行后续学习的时候，发现函数比想象的要NB的多，于是又厚着脸皮又来了一遍，嗯，果然很NB。建议在学习的过程中遇到了难题，记得回头复习复习，也许正是那些你忽略的内容，给未来的你营造出自己是SB的难题。内容概括：函数基本语法及特性函数与局部变量返回值嵌套函数递归匿名函数函数式编程介绍高阶函数内置函数..._全栈开发与数学

在vs开发环境中用opencv读取图片，Debug模式下成功，release模式下失败的可能原因_visual studio的debug模式可以include opencv release模式不行-程序员宅基地

文章浏览阅读921次。1 检查一下release模式下的链接器的输入，其依赖的lib名称最后一个字母是没有"d"，d代表debug如图：2 检查一下路径，看是否因为带中文的路径导致编码错误..._visual studio的debug模式可以include opencv release模式不行

教你一步一步使用Excel获取API接口的金融数据_excel的api key-程序员宅基地

文章浏览阅读5.6k次，点赞7次，收藏26次。在用EXCEL做量化分析的时候，经常需要通过一些金融数据平台的API接口，获取各种数据。最常用的公共API接口有Yahoo Finance，Google Finance，新浪财经，搜狐财经等。这些都不需要注册，就可以直接使用。获取方式相对简单，但数据种类不够丰富，通常只包括交易数据和财务数据。另外一些免费的金融数据平台，如国外的Quandl和国内的Tushare也都提供了API接口，数据种类更..._excel的api key

ThinkPHP去除url中的index.php，绝对管用！-程序员宅基地

文章浏览阅读1.6k次。例如你的原路径是 http://localhost/test/index.php/index/add那么现在的地址是 http://localhost/test/index/add如何去掉index.php呢?1.httpd.conf配置文件中加载了mod_rewrite.so模块 //在APACHE里面去配置#LoadModule rewrite_module modu

Qt核心机制与原理_qt原理-程序员宅基地

文章浏览阅读3.8k次，点赞5次，收藏39次。★了解Qt和C++的关系★掌握Qt的信号/槽机制的原理和使用方法★了解Qt的元对象系统★掌握Qt的架构★理解Qt的事件模型，掌握其使用的时机信号与槽、元对象系统、事件模型是Qt机制的核心，如果您想要掌握Qt编程，就需要对它们有比较深入的了解。本章重点介绍了信号与槽的基本概念和用法、元对象系统、Qt的事件模型，以及它们在实际使用过程中应注意的一些问题。Qt对标准C++的扩展标准C＋＋对象模型为面向对象编程提供了有效的实时支持，但是它的静态特性在一些领域中表现的不够灵活。事实上，GUI应用程序_qt原理

CC2640R2F BLE5.0 TI-RTOS概述_ti rtos 总中断-程序员宅基地

文章浏览阅读8.2k次，点赞3次，收藏25次。TI-RTOS概述TI-RTOS是CC2640R2F设备上蓝牙低能耗项目的运行环境。TI-RTOS内核是传统SYS/BIOS内核的定制版本，可作为具有驱动程序，同步和调度工具的实时抢占式多线程操作系统。线程模块TI-RTOS内核管理线程执行的四个不同的任务级别，如图21所示。线程模块列表如下图所示，按照优先级降序排列。硬件中断软件中断任务后台空闲功能的空闲任务_ti rtos 总中断

随便推点

爬虫框架 - feapder_feapder 网盘-程序员宅基地

文章浏览阅读1.0k次。1. 前言众所周知，Python 最流行的爬虫框架是 Scrapy，它主要用于爬取网站结构性数据今天推荐一款更加简单、轻量级，且功能强大的爬虫框架：feapder项目地址：https://github.com/Boris-code/feapder2. 介绍及安装和 Scrapy 类似，feapder 支持轻量级爬虫、分布式爬虫、批次爬虫、爬虫报警机制等功能内置的 3 种爬虫如下： AirSpider 轻量级爬虫，适合简单场景、数据量少的爬虫 Spider._feapder 网盘

《数据结构与算法分析：Java语言描述》.pdf-程序员宅基地

文章浏览阅读6k次，点赞2次，收藏6次。关注“Java后端技术全栈”回复“面试”获取全套大厂面试资料程序=数据结构+算法这好比是软件工程师的“武林秘籍”。数据结构指的是数据与数据之间的逻辑关系；算法指的是解决特定问题的步骤和方..._数据结构与算法分析java语言描述pdf

PyTorch——自注意力（self-attention）机制实现（代码详解）_自注意力机制代码-程序员宅基地

文章浏览阅读8w次，点赞111次，收藏691次。参考链接https://www.bilibili.com/video/BV1JE411g7XF?p=54https://arxiv.org/abs/1706.03762https://blog.csdn.net/qq_36653505/article/details/83375160简述自注意力机制（self-attention）self-attention可以视为一个特征提取层，给定输入特征a1,a2,⋅⋅⋅ana^{1},a^{2},\cdot \cdot \cdot a^{n}a1,a2_自注意力机制代码

在Vue中应用cornerstone并且实时更新缩放比例等数据_浏览器缩放倍数变化时更新数据 vue-程序员宅基地

文章浏览阅读1.6k次。在Vue中应用cornerstone并且跟随dicom实时更新缩放比例等数据最近需要在cornerstone的显示界面中显示一些数据，比如缩放比例以及渲染时间等，但是这些是需要根据鼠标事件进行实时更新的，想想肯定是有这个接口的，于是便试了一下。1、获取到当前视窗的对象获取到视窗这个对象因为它里面肯定会有许多属性可以直接被使用，刚好我们的缩放比例就是里面的scale，还有一些属性可以直接取用。..._浏览器缩放倍数变化时更新数据 vue

C语言中常用的函数_c语言常用函数-程序员宅基地

文章浏览阅读3.1w次，点赞135次，收藏1k次。C语言中常用的函数1、putchar()函数2、getchar()函数3、pow( a , b )函数4、sqrt( a )函数5、fabs(a)函数6、puts(字符数组)函数——输出字符串的函数7、gets(字符数组)——输入字符串的函数8、strcat(a , b)函数——字符串连接函数9、strcpy函数——字符串复制函数10、strncpy函数——字符串复制函数11、strcmp函数——字符串比较函数12、strlen函数——测量字符串长度的函数13、strlwr函数——转换为小写的函数14、_c语言常用函数

webpack打包时如何修改文件名_webpack打包文件名称设置-程序员宅基地

文章浏览阅读5k次。webpack打包时如何修改文件名在使用webpack进行项目打包的时候，我们可通过以下方式对不同类型的资源，进行文件名或文件路径的修改_webpack打包文件名称设置