VS?Code?常用自定义配置代码规范保存自动格式化_相关技巧

来源:脚本之家  责任编辑:小易  
目录
自动保存格式化用户自定义代码片段必装插件 不装活不了那种完整json

自动保存格式化

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

您可能感兴趣的文章:在VScode中配置ROS环境的详细过程使用TeXLive2022和VSCode安装配置步骤(LaTeX写论文)vscode配置go开发环境的实战过程vscode远程免密登入Linux服务器的配置方法VSCode配置python环境及中文问题解决方法Vscode配置C/C++环境使用minGW(保姆级配置过程)

  • 本文相关:
  • jenkins定时构建语法规则及时间设置
  • 几款开源的中文分词系统
  • matlab操作hdf5文件示例
  • 详解git基本操作和指令
  • 浅谈解决360兼容模式浏览器的方法
  • git fetch与git pull的区别详解
  • 两分钟学会如何在github托管代码
  • git merge最简洁用法详解
  • php asp.net 比较 [推荐]
  • 如何使用git优雅的回滚实现
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页相关技巧在vscode中配置ros环境的详细过程使用texlive2022和vscode安装配置步骤(latex写论文)vscode配置go开发环境的实战过程vscode远程免密登入linux服务器的配置方法vscode配置python环境及中文问题解决方法vscode配置c/c++环境使用mingw(保姆级配置过程)jenkins定时构建语法规则及时间设置几款开源的中文分词系统matlab操作hdf5文件示例详解git基本操作和指令浅谈解决360兼容模式浏览器的方法git fetch与git pull的区别详解两分钟学会如何在github托管代码git merge最简洁用法详解php asp.net 比较 [推荐]如何使用git优雅的回滚实现2019最新的pycharm激活码(推荐)vscode检测到#include错误请更新includep从console.log说起(console.log详细介绍分享最新sublime text4 build 4107注册进制转换算法原理(二进制 八进制 十进制 十六进制)eclipse 格式化代码时不换行与自动换行的实现方法微信小程序设置http请求的步骤详解抓包工具fiddler的使用方法详解(fiddler中文教程git科普文,git基本原理及各种骚操作(推荐)sublime?text?4?安装package?control的详基于域名的方式访问istio服务网格中的多个应用程序的方法详解微信小程序搭建及解决登录失败问题php和js编程中的延迟执行效果的代码idea配置git的详细教程rust?搭建一个小程序运行环境的方法详解git建立本地仓库并上传到gitee的详细步骤unity通过blendshape实现面部表情过渡切换animation教程vs2019生成dll并调用的实现示例
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved