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

相关推荐
一点一木3 分钟前
2026 终端 AI 编码 Agent 六大工具深度横评
前端·人工智能·claude
Highcharts.js8 分钟前
Highcharts React v5升级三问|最大的升级方向是什么?需要注意什么?有什么优化?
前端·javascript·react.js·前端框架·highcharts·大数据渲染·前端性能
马玉霞8 分钟前
vue web端页面组件展示
前端·vue.js
129y9 分钟前
JS入门参考:引擎、作用域与let/const,一起慢慢理解~
javascript
代码煮茶11 分钟前
Vue3 权限系统实战 | 从 0 搭建完整 RBAC 权限管理
前端·javascript·vue.js
前端小木屋12 分钟前
Node基础入门
javascript·node.js
IT_陈寒15 分钟前
用了Vue的动态组件之后,我被坑得找不着北
前端·人工智能·后端
阳火锅44 分钟前
💡 告别类名地狱!Tailwind CSS 语义化转换神器来了
前端·css·vue.js
ricardo19731 小时前
Core Web Vitals 全解:LCP / INP / CLS 逐个击破
前端
VillenK1 小时前
版本依赖问题:vite-plugin-dts@3.1.0 与 jiti 的兼容性
前端·typescript·vite