Visual Studio Code配置自动规范代码格式

目录

    • 前言
    • 1. 插件安装
    • 2. 配置个性化设置
      • 2.1 在左下角点击设置按钮 ,点击命令面板(或者也可以之间按快捷键Ctrl+Shift+P)
      • 2.2 在弹出的搜索框输入 settings.json,打开首选项:打开工作区设置;
      • 2.3 在settings.json文件中添加如下配置并保存
      • 2.4 重启VSCode
    • 3. 不想保存时自动格式化?

前言

写了很多代码,但是乱七八糟,既不美观也不方便找错,这时候一键自动规范格式功能简直不能再爽了。下面简单整理了一下如何在Visual Studio Code配置自动规范代码格式。

1. 插件安装

在VSCode的插件库中搜索 Prettier - Code formatter 插件:
在这里插入图片描述

点击安装:
在这里插入图片描述

2. 配置个性化设置

2.1 在左下角点击设置按钮 ,点击命令面板(或者也可以之间按快捷键Ctrl+Shift+P)

在这里插入图片描述

2.2 在弹出的搜索框输入 settings.json,打开首选项:打开工作区设置;

如果想要应用于全部项目,可以选择打开用户设置

在这里插入图片描述

2.3 在settings.json文件中添加如下配置并保存

{"workbench.sideBar.location": "left","cssrem.rootFontSize": 80,"git.ignoreWindowsGit27Warning": true,"eslint.codeAction.showDocumentation": {"enable": true},//改变注释颜色// "editor.tokenColorCustomizations": {//   "comments": "#ff4f81" // 注释// }, //导入文件时是否携带文件的扩展名"path-autocomplete.extensionOnlmport": true,//配置@的路径提示"path-autocomplete.pathMappings": {"@": "${folder}/src"},//配置eslint"eslint.validate": ["javascript", "javascriptreact", "html", "vue"],// "eslint.run": "onSave","editor.codeActionsOnSave": {"source.fixAll.eslint": "explicit"},"editor.mouseWheelZoom": true,"editor.minimap.renderCharacters": false,"debug.javascript.defaultRuntimeExecutable": {"pwa-node": "node"},"open-in-browser.default": "{\"open-in-browser.default\":\"Chrome\"}","files.associations": {"*.cjson": "jsonc","*.wxss": "css","*.wxs": "javascript"},"emmet.includeLanguages": {"wxml": "html"},"minapp-vscode.disableAutoConfig": true,"[python]": {"editor.formatOnType": true},"editor.detectIndentation": false,"explorer.compactFolders": false,// html使用prettier格式化"[html]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[vue]": {// "editor.defaultFormatter": "Vue.volar""editor.defaultFormatter": "esbenp.prettier-vscode"},"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},// json使用prettier格式化"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[jsonc]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"editor.tabSize": 2,"[scss]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"px2rem.rootFontSize": 64,"px2rem.autoRemovePrefixZero": false,"editor.formatOnSave": true // 保存时自动规范代码}

2.4 重启VSCode

重启后打开代码,就可以实现点击Ctrl+s,保存文件的同时自动格式化啦。

如果第一次使用保存时没有效果,需要按Shift+Alt+F,它会弹出让你设置默认的格式化程序,设置后后续就能正常使用保存时自动格式化功能啦,记得选第一个选项
在这里插入图片描述

3. 不想保存时自动格式化?

settings.json文件最后一行去掉,按Shift+Alt+F来实现规范代码,也可以右键选择格式化文档。

  "editor.formatOnSave": true // 保存时自动规范代码

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/899806.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【分布式】Hystrix 的核心概念与工作原理​

熔断机制​ Hystrix 的熔断机制就像是电路中的保险丝。当某个服务的失败请求达到一定比例(例如 50%)或者在一定时间内(如 20 秒)失败请求数量超过一定阈值(如 20 个)时,熔断开关就会打开。此时…

TypeScript 中 await 的详解

TypeScript 中 await 的详解 1. 基本概念2. 语法要求3. 工作原理4. 与 Promise 的比较5. 实践中的注意事项总结 本文详细介绍了 TypeScript 中 await 的工作原理、语法要求、与 Promise 的关系以及实践中需要注意的问题,同时针对代码示例进行了优化和补充说明。 1.…

ThreadLocal 深度解析

一、引言 在多线程编程的复杂世界中,数据共享与隔离是一个核心且具有挑战性的问题。ThreadLocal 作为 Java 并发包中的重要工具,为我们提供了一种独特的线程局部变量管理方式,使得每个线程都能拥有自己独立的变量副本,避免了多线…

VMware安装Ubuntu实战分享

在日常开发和学习过程中,很多人都会选择在VMware虚拟机上安装Ubuntu,以便进行Linux环境的体验和开发调试。本文将详细分享在VMware Workstation上安装Ubuntu的全过程,并结合个人经验,提供一些实用的小技巧,帮助大家顺利…

阻止上传可执行程序

点击工具中的文件服务器资源管理器 、然后点击文件屏蔽管理中的文件屏蔽,然后导入目标文件选择要限制的属性即可

微服务面试题:配置中心

🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/?__c1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,精通Java编…

系统思考反馈

最近交付的都是一些持续性的项目,越来越感觉到,系统思考和第五项修炼不只是简单的一门课程,它们能真正融入到我们的日常工作和业务中,帮助我们用更清晰的思维方式解决复杂问题,推动团队协作,激发创新。 特…

MMD 转 STL,拓宽 3D 模型应用边界:方法与门道

在 3D 建模与打印领域,不同格式文件间的转换是常见需求。MMD(MikuMikuDance)模型文件格式常用于动漫角色的舞蹈创作等,而 STL(Stereolithography)格式则广泛应用于 3D 打印与计算机辅助设计(CAD…

C语言 【初始指针】【指针一】

引言 思绪很久,还是决定写一写指针,指针这块内容很多,也不是那么容易说清楚,这里尽可能写地详细,让大家理解指针。(未完序) 一、内存和地址 在讲指针前,需要有一个对内存和地址的认…

深入理解pthread多线程编程:从基础到生产者-消费者模型

前言 在多核处理器普及的今天,多线程编程已成为提高程序性能的重要手段。POSIX线程(pthread)是Unix/Linux系统下广泛使用的多线程API。本文将系统介绍pthread的关键概念,包括线程初始化、死锁预防、递归锁使用,并通过…

springboot 对接马来西亚数据源API等多个国家的数据源

使用Spring Boot对接StockTV全球金融数据API指南 StockTV提供了覆盖股票、外汇、期货和加密货币的全球化金融数据接口。本文将通过Spring Boot实现对这些API的快速对接,并提供完整的代码示例。 一、前期准备 1. 获取API Key 访问StockTV官网联系客服获取API Key…

软件测试常用设计模式

设计模式的重要原则就是:高内聚、低耦合;通常程序结构中各模块的内聚程度越高,模块间的耦合程度就越低。 数据驱动测试:Data Driven Testing,简称DDT; 数据驱动指的是从数据文件(如数据库、Ex…

基于 Fluent-Bit 和 Fluentd 的分布式日志采集与处理方案

#作者:任少近 文章目录 需求描述系统目标系统组件Fluent BitFluentdKafka 数据流与处理流程日志采集日志转发到 Fluentd日志处理与转发到 KafkaKafka 作为消息队列 具体配置Fluent-Bit的CM配置Fluent-Bit的DS配置Fluentd的CM配置Fluentd的DS配置Kafka查询结果 需求…

正则表达式(Regular Expression,简称 Regex)

一、5w2h(七问法)分析正则表达式 是的,5W2H 完全可以应用于研究 正则表达式(Regular Expressions)。通过回答 5W2H 的七个问题,我们可以全面理解正则表达式的定义、用途、使用方法、适用场景等&#xff0c…

爬虫获取1688关键字搜索接口的实战指南

在当今电商行业竞争激烈的环境下,数据的重要性不言而喻。1688作为国内领先的B2B电商平台,拥有海量的商品信息,这些数据对于商家的市场分析、选品决策、价格策略制定等都有着重要的价值。本文将详细介绍如何通过爬虫技术获取1688关键字搜索接口…

如何快速解决django存储session变量时出现的django.db.utils.DatabaseError错误

我们在学习django进行web编程的时候,有时需要将一些全局变量信息存储在session中,但使用过程中,却发现会引起数据库的报错。通过查看django源码信息,发现其对session信息进行了ORM映射,如果数据库中不存在对应的表信息…

C语言复习--assert断言

assert.h 头⽂件定义了宏 assert() ,⽤于在运⾏时确保程序符合指定条件,如果不符合,就报错终止运行。这个宏常常被称为“断⾔”。 assert(p ! NULL); 代码在程序运⾏到这⼀⾏语句时,验证变量 p 是否等于 NULL 。如果确实不等于 NU…

STL新增内容

文章目录 C11 中的 STL 新增内容容器算法 C14 中的 STL 新增内容容器算法 C17 中的 STL 新增内容容器算法 C20 中的 STL 新增内容容器算法 C11 中的 STL 新增内容 容器 std::array:这是一个固定大小的数组容器,和原生数组类似,但具备更好的…

C#测试Excel开源组件ExcelDataReader

使用微软的com组件Microsoft.office.Interop.Excel读写Excel文件虽然可用,但是列多、行多的时候速度很慢,之前测试过Sylvan.Data.Excel包的用法,如果只是读取Excel文件内容的话,还可以使用ExcelDataReader包,后者是C#开…

位置编码汇总 # 持续更新

看了那么多还没有讲特别好的,GPT老师讲的不错关于三角函数编码。 一、 手撕transformer常用三角位置编码 GPT说:“低维度的编码(例如,第一个维度)可以捕捉到大的位置差异,而高维度的编码则可以捕捉到小的细…