null - 程序员宅基地

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

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

智能推荐

5G手机回归，鸿蒙份额激增，将进一步夯实三大操作系统的地位-程序员宅基地

文章浏览阅读360次，点赞8次，收藏8次。市调机构给出的数据指11月份华为手机在国内手机市场的份额达到14%，远超此前鸿蒙系统在国内手机操作系统8%的市场份额，这意味着随着华为5G手机的回归，鸿蒙系统的市占率将快速上涨。此前鸿蒙系统主要依靠华为手机的存量用户支持，在华为的推动下，诸多华为存量手机用户都转为了鸿蒙系统，这成为鸿蒙系统的第一批种子。随后华为在自己的穿戴设备、汽车等诸多产品上发展鸿蒙系统，还通过与美的等国内家电企业合作推广鸿蒙系...

openstack pike单机一键安装shell的方法（后期会转为python）-程序员宅基地

文章浏览阅读183次，点赞9次，收藏2次。#VM虚拟机8G内存，安装完毕，半个小时左右#在线安装#环境 centos 7.4.1708 x86_64#在线安装openstack pikePS: 排版问题，还在研究。wangleideMacBook-Pro:Downloads wanglei$ cat pike.install.sh#!/bin/sh# openstack pike 单机一键安装# 环..._ali-pike.repo

通过formData数据发送ajax请求-程序员宅基地

文章浏览阅读1.9k次。formData1.创建一个formData对象var fd = new FormData(‘form表单’);(创建formdtata对象的小括号里面，就是需要一个form表单dom对象)。2.往fd对象中添加对象fd.append(‘sex’,‘男’);3.formData里面就会有form表单中有name属性的这些标签的取值。//键值对形式console.log(fd.ge...

监控神器Prometheus，开箱即用！-程序员宅基地

文章浏览阅读244次。文章来源：【公众号：云加社区】‍目录简介整体生态工作原理Metric 指标PromQLGrafana 可视化监控告警简介Prometheus 是一个开源的完整监控解决方案，本文将从指标抓取到查询及可视化展示，以及最后的监控告警，对 Prometheus 做一个基本的认识。Prometheus 是古希腊神话里泰坦族的一名神明，名字的意思是“先见之明”，下图中是 Promet..._dtm prometheus

实验五 -1 快速排序算法和直接插入排序算法-程序员宅基地

文章浏览阅读900次，点赞15次，收藏6次。对数据序列{6,8,7,9,0,1,3,2,4,5}，请分别用快速排序算法和直接选择排序设计算法对数据序列进行排序；

10000以内的同构数-程序员宅基地

文章浏览阅读597次。/*找出10000以内的同构数同构数 376*376=141376思路：1、输入一个数num 先判断是几位数。记住数位length。 2、然后算它（num）的平方， square。 3、取square的后length位的数值temp 4、temp与num相等，则是同构数。*/#include <iostream>#include &..._小于10000的同构数

随便推点

PreScan第二课：构建实验_prescan坐标系-程序员宅基地

文章浏览阅读5.5k次，点赞8次，收藏37次。为了自己和他人学习的需要，建了一个PreScan的QQ群：613469333（已满）/ 778225322（可加），加群前请私聊群主（QQ：2059799865）加入。群管理需要花费时间和精力，为了鼓励管理员和群成员积极互动，入群需交￥9.99的群费。目录1 Conventions坐标系统2 Roads3 Path&trajectories路径和轨迹3.1 Pat..._prescan坐标系

三分钟带你掌握 CSS3 的新属性_采用css转换,边框阴影等新特性完成css3偏光图像画廊设计-程序员宅基地

文章浏览阅读3.8w次，点赞9次，收藏10次。1. css3简介CSS 用于控制网页的样式和布局,CSS3 是最新的CSS标准,CSS3 完全向后兼容，因此您不必改变现有的设计。浏览器通常支持 CSS2,但是现在大部分浏览器也实现了css3的很多特性。CSS3 被划分为模块。其中最重要的 CSS3 模块包括：选择器框模型背景和边框文本效果2D/3D 转换动画多列布局用户界面2. css3边框2.1 边框圆角Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。Fir_采用css转换,边框阴影等新特性完成css3偏光图像画廊设计

设计模式--组合模式-程序员宅基地

文章浏览阅读47次。定义：允许将对象组成树形结构来表现 “整体/部分” 层次结构。组合能让客户以一致的方式处理个别对象及对象组合。说白了，就是类似于树形结构。只是它要求子节点和父节点都具备统一的接口。类图如下：示例如下：比如我们常见的电脑上的目录，目录下面有文件夹，也有文件，然后文件夹里面还有文件及文件夹。这样一层层形成了树形结构。示例代码如下：#include <iostream>#include <stdio.h>#include "string"#includ..

Kotlin相关面试题_kotlin面试题-程序员宅基地

文章浏览阅读1.9w次，点赞26次，收藏185次。目录一.请简述下什么是kotlin？它有什么特性？二.Kotlin 中注解 @JvmOverloads 的作用？三.Kotlin中的MutableList与List有什么区别？四.kotlin实现单例的几种方式？五. kotlin中关键字data的理解？相对于普通的类有哪些特点？六.什么是委托属性？简单说一下应用场景？七.kotlin中with、run、apply、let函数的区别？一般用于什么场景？八.kotlin中Unit的应用以及和Java中void的区别？九.Ko_kotlin面试题

HEVC英文缩写及部分概念整理(1)--博主整理_反量化英文缩写-程序员宅基地

文章浏览阅读2.8k次。有这个想法一方面是确实很多时候会记不得一些缩写是什么意思。另外也是受 http://blog.csdn.net/lin453701006/article/details/52797415这篇博客的启发，本文主要用于自己记忆内容主要整理自http://blog.sina.com.cn/s/blog_520811730101hmj9.html http://blog.csdn.net/feix_反量化英文缩写

超级简单的Python爬虫入门教程(非常详细)，通俗易懂，看一遍就会了_爬虫python入门-程序员宅基地

文章浏览阅读7.3k次，点赞6次，收藏36次。超级简单的Python爬虫入门教程(非常详细)，通俗易懂，看一遍就会了_爬虫python入门