三步搞定 vscode 代码格式化

三步搞定 vscode 代码格式化一 安装以下几个 vscode 扩展程序 ESLintPretti Codeformatte 如图 二 打开 settings 文件打开方式 先按步骤打开 setting 界面 Code amp amp gt preferences amp amp gt setting 也可以快捷键 command mac 直接打开 现在看到的是界面配置模式 点击右上角的三个

一、安装以下几个 vscode 扩展程序:

  • ESLint
  • Prettier – Code formatter
  • Vetur

如图:
在这里插入图片描述

二、打开 settings 文件

打开方式:

现在看到的是界面配置模式,点击右上角的红色区域按钮(如下图),可以打开 settings.json 文件。
在这里插入图片描述

三、将下面配置添加到 setting.json 文件中

{ 
    // tab 大小为2个空格 "editor.tabSize": 2, // 100 列后换行 "editor.wordWrapColumn": 100, // 保存时格式化 "editor.formatOnSave": true, // 开启 vscode 文件路径导航 "breadcrumbs.enabled": true, // prettier 设置语句末尾不加分号 "prettier.semi": false, // prettier 设置强制单引号 "prettier.singleQuote": true, // 选择 vue 文件中 template 的格式化工具 "vetur.format.defaultFormatter.html": "prettyhtml", // 显示 markdown 中英文切换时产生的特殊字符 "editor.renderControlCharacters": true, // 设置 eslint 保存时自动修复 "eslint.autoFixOnSave": true, // eslint 检测文件类型 "eslint.validate": [ "vue", "html", "javascript", "typescript", "javascriptreact", "typescriptreact" ], // vetur 的自定义设置 "vetur.format.defaultFormatterOptions": { 
    "prettier": { 
    "singleQuote": true, "semi": false } }, // vue 扩展的文件默认使用 prettier 进行格式化 "[vue]": { 
    "editor.defaultFormatter": "esbenp.prettier-vscode" }, } 

保存配置,现在就搞定了,快试试是不是可以保存格式化代码了。

如果你好奇这份配置是怎么来的,或者之后想做修改。那么请看另一篇博客:

聊一聊 vscode 的代码格式化配置

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/205367.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月19日 下午6:11
下一篇 2026年3月19日 下午6:12


相关推荐

  • 运行疑难解答时出错0x8000FFFF_vs2010由于缺少调试目标

    运行疑难解答时出错0x8000FFFF_vs2010由于缺少调试目标发生错误,需要终止调试。有关更多详细信息,请参阅Microsoft帮助和支持网站。HRESULT=0x8000ffff。ErrorCode=0x0。工程目录太深会导致上述错误发生,把整个工程文件往外移即可

    2026年3月6日
    4
  • vggnet pytorch_Javaweb项目

    vggnet pytorch_Javaweb项目VGG网络是在2014年由牛津大学著名研究组VGG(VisualGeometryGroup)提出。

    2025年7月25日
    2
  • 大数据技术之数据存储

    大数据技术之数据存储目前市场上有两种类型的大数据分析方式同步的和异步的 两种都有各自在存储容量和特性上的要求 近来大数据分析这个词正逐渐成为 IT 界流行的一个术语 以代指有关大数据本身的猜想 通俗说来即成堆数据背后问题的答案 然而 如果我们能够从足够的数据点入手比对及交叉分析 或许能帮助我们找到一些有用的数据 甚至可能帮助避免灾难 问题是显而易见的 所有的分析都需要大量甚至海量的数据 这便给当今的 IT 管理人

    2026年3月16日
    2
  • mysql profiling_MySQL profiling性能分析

    mysql profiling_MySQL profiling性能分析MySQL5 0 37 版本以上支持了 Profiling 官方手册 此工具可用来查询 SQL 会执行多少时间 Systemlock 和 Tablelock 花多少时间等等 对定位一条语句的 I O 消耗和 CPU 消耗非常重要 从启动 profile 之后的所有查询包括错误的语句都会记录 关闭会话或者 setprofiling 0 就关闭了 开启 profilingmys gt setprofil

    2026年3月17日
    2
  • 单例模式 指令重排_php单例模式

    单例模式 指令重排_php单例模式单例模式写法有很多,于是我看到了这么一种写法:publicclassSingletonTest{privateSingletonTest(){}privatestaticSingletonTestsingletonTest=null;publicstaticSingletonTestgetSingletonTest()…

    2022年10月17日
    5
  • Java 模拟队列(一般队列、双端队列、优先级队列)[通俗易懂]

    Java 模拟队列(一般队列、双端队列、优先级队列)

    2022年1月20日
    60

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号