今天小编给大家分享一下VSCode怎么配置自动保存格式化的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
其实这一个插件就够了
配置保存自动格式化 "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
{
"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": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?" // 代码分割去掉了中划线-,可以双击选中css比如hello-word
}
以上就是“VSCode怎么配置自动保存格式化”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。