iis服务器助手广告广告
返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >VS Code 常用自定义配置代码规范保存自动格式化
  • 135
分享到

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

2024-04-02 19:04:59 135人浏览 安东尼
摘要

目录自动保存格式化用户自定义代码片段必装插件 不装活不了那种完整JSON自动保存格式化 介绍一下我的vscode配置,记录为主,每个人的习惯不一样可以按需调整 必装插件 Pretti

自动保存格式化

介绍一下我的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自定义配置代码规范的资料请关注编程网其它相关文章!

--结束END--

本文标题: VS Code 常用自定义配置代码规范保存自动格式化

本文链接: https://www.lsjlt.com/news/165840.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • VS Code 常用自定义配置代码规范保存自动格式化
    目录自动保存格式化用户自定义代码片段必装插件 不装活不了那种完整json自动保存格式化 介绍一下我的vscode配置,记录为主,每个人的习惯不一样可以按需调整 必装插件 Pretti...
    99+
    2024-04-02
  • VS Code中python代码自动格式化方法
    为了能够在VS Code中使自己写的Python代码更加符合规范并且适宜阅读,往往需要手工进行代码格式矫正,例如等号左右的空格、函数参数与等号之间的空格等。下面讲解一种简单的自动格式化方法。 首先安装...
    99+
    2023-09-22
    python 开发语言
  • vue项目配置eslint保存自动格式化问题
    目录vue配置eslint保存自动格式化插件实现按照 ESLint 规则自动格式化1. 需求插件2. 修改默认格式化插件3. 「Ctrl + S」保存时按照 ESLint 规则自动格...
    99+
    2024-04-02
  • ExtJs怎么使用自定义插件动态保存表头配置
    这篇文章将为大家详细讲解有关ExtJs怎么使用自定义插件动态保存表头配置,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。关于保存列表表头的配置,一般我们不需要与后台交互,直...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作