vue中shift+alt+f格式化防止格式掉其它内容

好处就是使得提交记录干净,否则修改一两行代码,习惯性按了一下格式化快捷键,遍地飘红,下次找修改就费时间

1.点击设置图标-设置

2.点击这个转成配置文件

复制代码
{
    "extensions.ignoreRecommendations": true,
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "editor.fontSize": 13,
    "editor.codeActionsOnSave": {},
    "prettier.endOfLine": "crlf",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            // #vue组件中html代码格式化样式
            "wrap_attributes": "force-aligned", //也可以设置为"auto",效果会不一样
            "wrap_line_length": 200,
            "end_with_newline": false,
            "semi": true,
            "singleQuote": true
        },
        "prettier": {
            //设置分号
            "semi": true,
            //双引号变成单引号
            "singleQuote": false,
            //禁止随时添加逗号,这个很重要。找了好久
            "trailingComma": "none",
            // 单个参数的箭头函数不加括号 x => x
            "arrowParens": "avoid",
        }
    },
    "explorer.confirmDelete": false,
    "window.zoomLevel": 1,
    "editor.formatOnSaveMode": "modificationsIfAvailable"
}
  • 末尾不加逗号
  • 箭头函数不要自己加括号
  • template不要随便改变换行

3.设置vscode的默认格式化工具为Vetur

相关推荐
Kagol8 分钟前
TinyVue 支持 Skills 啦!现在你可以让 AI 使用 TinyVue 组件搭建项目
前端·agent·ai编程
柳杉10 分钟前
从零打造 AI 全球趋势监测大屏
前端·javascript·aigc
simple_lau11 分钟前
Cursor配置MasterGo MCP:一键读取设计稿生成高还原度前端代码
前端·javascript·vue.js
睡不着先生13 分钟前
如何设计一个真正可扩展的表单生成器?
前端·javascript·vue.js
天蓝色的鱼鱼22 分钟前
模块化与组件化:90%的前端开发者都没搞懂的本质区别
前端·架构·代码规范
明君8799724 分钟前
Flutter 如何给图片添加多行文字水印
前端·flutter
进击的尘埃28 分钟前
AI 代码审查工具链搭建:用 AST 解析 + LLM 实现自动化 Code Review 的前端工程方案
javascript
juejin_cn36 分钟前
[转][译] 从零开始构建 OpenClaw — 第五部分(对话压缩)
javascript
leolee181 小时前
Redux Toolkit 实战使用指南
前端·react.js·redux
bluceli1 小时前
React Hooks最佳实践:写出优雅高效的组件代码
前端·react.js