VS Code 常用自定义配置代码规范保存自动格式化

 更新时间:2022年08月24日 09:03:19   作者:何明暄  
这篇文章主要为大家介绍了VS Code 常用自定义配置代码规范保存自动格式化详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

自动保存格式化

介绍一下我的vscode配置,记录为主,每个人的习惯不一样可以按需调整

必装插件 Prettier - Code formatter

链接: marketplace.visualstudio.com/items?itemN…

其实这一个插件就够了

配置保存自动格式化 "editor.formatOnSave": true 参考官方文档,可以配置哪些文件使用此插件配置

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

因为太多了,只前端开发代码都可以使用这个配置,所以使用全局生效 "editor.defaultFormatter": "esbenp.prettier-vscode代码插入这几行 可以参考Prettier的官方文档,我阅读了整个文档,其他默认的都不用变,需要改变的就这几行,根据项目需求配置

"editor.formatOnSave": true, // 每次保存的时候自动格式化
"prettier.tabWidth": 4, // prettier设置 4空格缩进
"prettier.semi": false, // 语句末尾去掉分号
"prettier.singleQuote": true, // 双引号变成单引号
"prettier.bracketSameLine": true, // 多行 HTML元素放在最后一行的末尾 而不是单独放在下一行
"prettier.printWidth": 100, // 宽度多少换行
"editor.defaultFormatter": "esbenp.prettier-vscode", // 为所有语言设置prettier

现在保存文件就可以自动格式化了

用户自定义代码片段

一般新写一个页面一些基础的标签还是需要的,当然你也可以从其他地方复制,这样显得非常的不优雅,可以用vscode的用户代码片段来完成

点击code > 首选项 > 配置用户代码片段,点新增 以vue举例,新建一个vue2和vue3

// vue2.code-snippets
{
    "vue2-template": {
        "prefix": "v2",
        "body": [
            "<template>",
            "    <div class=\"$1\"></div>",
            "</template>",
            "<script>",
            "export default {",
            "    name: '$1',",
            "    data() { ",
            "        return {}",
            "    }",
            "}",
            "</script>",
            "<style lang=\"less\" scoped>",
            ".$1 {",
            "}",
            "</style>"
        ],
        "description": "vue2-template"
    }
}
// vue3.code-snippets
{
    "vue3-template": {
        "prefix": "v3",
        "body": [
            "<script setup>",
            "import { reactive } from 'vue'",
            "const state = reactive({})",
            "</script>",
            "<template></template>",
            "<style lang='less'></style>"
        ],
        "description": "vue3-template"
    }
}

prefix的名字随便取,现在输入v2或者v3就会直接生成预设好的代码片段了

必装插件 不装活不了那种

Chinese (Simplified) (简体中文)

GitLens — Git supercharged

Import Cost

Live Server

Prettier - Code formatter

vscode-icons

完整json

{
    "editor.formatOnSave": true, // 每次保存的时候自动格式化
    "prettier.tabWidth": 4, // prettier设置 4空格缩进
    "prettier.semi": false, // 语句末尾去掉分号
    "prettier.singleQuote": true, // 双引号变成单引号
    "prettier.bracketSameLine": true, // 多行 HTML元素放在最后一行的末尾 而不是单独放在下一行
    "prettier.printWidth": 100, // 宽度多少换行
    "editor.defaultFormatter": "esbenp.prettier-vscode", // 为所有语言设置prettier
    "workbench.colorTheme": "One Dark Pro", // 代码高亮主体
    "workbench.iconTheme": "vscode-icons", // 文件小图标
    "extensions.ignoreRecommendations": true, // 扩展忽略建议
    "security.workspace.trust.untrustedFiles": "open", // 始终允许在不提示的情况下将不受信任的文件引入受信任的工作区
    "editor.minimap.enabled": false, // 代码小地图
    "editor.wordSeparators": "`~!@#$%^&amp;*()=+[{]}\\|;:'\",.&lt;&gt;/?" // 代码分割去掉了中划线-,可以双击选中css比如hello-word
}

以上就是VS Code 常用自定义配置代码规范保存自动格式化的详细内容,更多关于VS Code自定义配置代码规范的资料请关注脚本之家其它相关文章!

相关文章

  • minio对象存储四台服务器部署4个节点集群的实现方式

    minio对象存储四台服务器部署4个节点集群的实现方式

    这篇文章主要介绍了minio对象存储四台服务器部署4个节点集群,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • 关于401状态码的含义和处理方式

    关于401状态码的含义和处理方式

    这篇文章主要介绍了关于401状态码的含义和处理方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • TCP窗口被填满问题的排查实践

    TCP窗口被填满问题的排查实践

    这篇文章主要为大家介绍了TCP窗口被填满的问题排查实践,有需要的朋友可以借鉴参考下,希望能够有所帮助祝大家多多进步,早日升职加薪
    2022-01-01
  • VS2022如何调出输出窗口并在输出窗口打印日志

    VS2022如何调出输出窗口并在输出窗口打印日志

    这篇文章主要介绍了VS2022如何调出输出窗口并在输出窗口打印日志的相关资料,包括打开输出窗口的快捷键、清空输出窗口的方法以及使用输出过滤文档进行更精细的调试控制,需要的朋友可以参考下
    2024-12-12
  • IntelliJ IDEA2020新增禅模式和LightEdit模式

    IntelliJ IDEA2020新增禅模式和LightEdit模式

    这篇文章主要介绍了IntelliJ IDEA2020新增禅模式和LightEdit模式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • Git版本回退之reset和revert使用详解

    Git版本回退之reset和revert使用详解

    这篇文章主要介绍了Git版本回退之reset和revert使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • 安全校验Session验证码并避免绕开验证码攻击

    安全校验Session验证码并避免绕开验证码攻击

    校验验证码的Session是否为空或者校验用户输入的验证码是否合法,构造安全表单的关键就是永远不要相信用户的输入
    2012-01-01
  • VSCode中ESLint插件修复以及配置教程

    VSCode中ESLint插件修复以及配置教程

    最近为vsocde配置Eslint出现了许多问题,我解决问题之后,觉得还是把这些坑都写清楚,方便学习前端的初学者,下面这篇文章主要给大家介绍了关于VSCode中ESLint插件修复以及配置教程的相关资料,需要的朋友可以参考下
    2022-12-12
  • Idea中使用git查看历史版本的方法

    Idea中使用git查看历史版本的方法

    在IDEA中搜索并安装Git插件,我们可以轻松地将Git集成到IDEA中,本文主要介绍了Idea中使用git查看历史版本的方法,具有一定的参考价值,感兴趣的可以了解一下
    2024-03-03
  • IDEA/WebStorm/Pycharm鼠标滚轮ctrl+滚轮-调节缩放字体大小

    IDEA/WebStorm/Pycharm鼠标滚轮ctrl+滚轮-调节缩放字体大小

    很多朋友不清楚IDEA/WebStorm/Pycharm鼠标滚轮ctrl+滚轮-调节缩放字体大小的,下面我以idea开发工具为例给大家通过截图一步步展示操作方法,需要的朋友可以参考下
    2021-05-05

最新评论