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

08-24 143阅读 0评论

自动保存格式化

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

必装插件 Prettier - code formatter

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

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

其实这一个插件就够了

配置保存自动格式化 "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的用户代码片段来完成

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

点击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就会直接生成预设好的代码片段了

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

必装插件 不装活不了那种

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自定义配置代码规范的资料请关注云初冀北其它相关文章!

免责声明
本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:Goliszhou@gmail.com
$

发表评论

表情:
评论列表 (暂无评论,143人围观)

还没有评论,来说两句吧...