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

技术标签： 编辑器  vscode  开发工具  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 保存一下，你会惊奇的发现。
在这里插入图片描述
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pujun1201/article/details/119600983

智能推荐

EasyDarwin开源流媒体云平台之EasyRMS录播服务器功能设计_开源录播系统-程序员宅基地

文章浏览阅读3.6k次。需求背景EasyDarwin开发团队维护EasyDarwin开源流媒体服务器也已经很多年了，之前也陆陆续续尝试过很多种服务端录像的方案，有：在EasyDarwin中直接解析收到的RTP包，重新组包录像；也有：在EasyDarwin中新增一个RecordModule，再以RTSPClient的方式请求127.0.0.1自己的直播流录像，但这些始终都没有成气候；我们的想法是能够让整套EasyDarwin_开源录播系统

oracle Plsql 执行update或者delete时卡死问题解决办法_oracle delete update 锁表问题-程序员宅基地

文章浏览阅读1.1w次。今天碰到一个执行语句等了半天没有执行：delete table XXX where ......,但是在select 的时候没问题。后来发现是在执行select * from XXX for update 的时候没有commit，oracle将该记录锁住了。可以通过以下办法解决： 先查询锁定记录 Sql代码 SELECT s.sid, s.seri_oracle delete update 锁表问题

Xcode Undefined symbols 错误_xcode undefined symbols:-程序员宅基地

文章浏览阅读3.4k次。报错信息error:Undefined symbol: typeinfo for sdk::IConfigUndefined symbol: vtable for sdk::IConfig具体信息：Undefined symbols for architecture x86_64: "typeinfo for sdk::IConfig", referenced from: typeinfo for sdk::ConfigImpl in sdk.a(config_impl.o) _xcode undefined symbols:

项目05(Mysql升级07Mysql5.7.32升级到Mysql8.0.22)_mysql8.0.26 升级32-程序员宅基地

文章浏览阅读249次。背景《承接上文,项目05(Mysql升级06Mysql5.6.51升级到Mysql5.7.32)》,写在前面需要(考虑)检查和测试的层面很多，不限于以下内容。参考文档https://dev.mysql.com/doc/refman/8.0/en/upgrade-prerequisites.htmllink推荐阅读以上链接，因为对应以下问题，有详细的建议。官方文档：不得存在以下问题：0.不得有使用过时数据类型或功能的表。不支持就地升级到MySQL 8.0，如果表包含在预5.6.4格_mysql8.0.26 升级32

高通编译8155源码环境搭建_高通8155 qnx 源码-程序员宅基地

文章浏览阅读3.7k次。一.安装基本环境工具：1.安装git工具sudo apt install wget g++ git2.检查并安装java等环境工具2.1、执行下面安装命令#!/bin/bashsudoapt-get-yinstall--upgraderarunrarsudoapt-get-yinstall--upgradepython-pippython3-pip#aliyunsudoapt-get-yinstall--upgradeopenjdk..._高通8155 qnx 源码

firebase 与谷歌_Firebase的好与不好-程序员宅基地

文章浏览阅读461次。firebase 与谷歌 大多数开发人员都听说过Google的Firebase产品。 这就是Google所说的“ 移动平台，可帮助您快速开发高质量的应用程序并发展业务。 ”。 它基本上是大多数开发人员在构建应用程序时所需的一组工具。 在本文中，我将介绍这些工具，并指出您选择使用Firebase时需要了解的所有内容。 在开始之前，我需要说的是，我不会详细介绍Firebase提供的所有工具。 我..._firsebase 与 google

随便推点

k8s挂载目录_kubernetes（k8s）的pod使用统一的配置文件configmap挂载-程序员宅基地

文章浏览阅读1.2k次。在容器化应用中，每个环境都要独立的打一个镜像再给镜像一个特有的tag，这很麻烦，这就要用到k8s原生的配置中心configMap就是用解决这个问题的。使用configMap部署应用。这里使用nginx来做示例，简单粗暴。直接用vim常见nginx的配置文件，用命令导入进去kubectl create cm nginx.conf --from-file=/home/nginx.conf然后查看kub..._pod mount目录会自动创建吗

java计算机毕业设计springcloud+vue基于微服务的分布式新生报到系统_关于spring cloud的参考文献有啥-程序员宅基地

文章浏览阅读169次。随着互联网技术的发发展，计算机技术广泛应用在人们的生活中，逐渐成为日常工作、生活不可或缺的工具，高校各种管理系统层出不穷。高校作为学习知识和技术的高等学府，信息技术更加的成熟，为新生报到管理开发必要的系统，能够有效的提升管理效率。一直以来，新生报到一直没有进行系统化的管理，学生无法准确查询学院信息，高校也无法记录新生报名情况，由此提出开发基于微服务的分布式新生报到系统，管理报名信息，学生可以在线查询报名状态，节省时间，提高效率。_关于spring cloud的参考文献有啥

VB.net学习笔记（十五）继承与多接口练习_vb.net 继承多个接口-程序员宅基地

文章浏览阅读3.2k次。Public MustInherit Class Contact '只能作基类且不能实例化 Private mID As Guid = Guid.NewGuid Private mName As String Public Property ID() As Guid Get Return mID End Get_vb.net 继承多个接口

【Nexus3】使用-Nexus3批量上传jar包 artifact upload_nexus3 批量上传jar包 java代码-程序员宅基地

文章浏览阅读1.7k次。1.美图# 2.概述因为要上传我的所有仓库的包，希望nexus中已有的包，我不覆盖，没有的添加。所以想批量上传jar。3.方案1-脚本批量上传PS：nexus3.x版本只能通过脚本上传3.1 批量放入jar在mac目录下,新建一个文件夹repo,批量放入我们需要的本地库文件夹,并对文件夹授权(base) lcc@lcc nexus-3.22.0-02$ mkdir repo2..._nexus3 批量上传jar包 java代码

关于去隔行的一些概念_mipi去隔行-程序员宅基地

文章浏览阅读6.6k次，点赞6次，收藏30次。本文转自http://blog.csdn.net/charleslei/article/details/486519531、什么是场在介绍Deinterlacer去隔行处理的方法之前，我们有必要提一下关于交错场和去隔行处理的基本知识。那么什么是场呢，场存在于隔行扫描记录的视频中，隔行扫描视频的每帧画面均包含两个场，每一个场又分别含有该帧画面的奇数行扫描线或偶数行扫描线信息，_mipi去隔行

ABAP自定义Search help_abap 自定义 search help-程序员宅基地

文章浏览阅读1.7k次。DATA L_ENDDA TYPE SY-DATUM. IF P_DATE IS INITIAL. CONCATENATE SY-DATUM(4) '1231' INTO L_ENDDA. ELSE. CONCATENATE P_DATE(4) '1231' INTO L_ENDDA. ENDIF. DATA: LV_RESET(1) TY_abap 自定义 search help

推荐文章

热门文章

相关标签