Vue 格式化 settings.json部分配置

最新推荐文章于 2025-04-09 12:08:33 发布

Tigers996

最新推荐文章于 2025-04-09 12:08:33 发布

阅读量968

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/d1332508051/article/details/124590051

版权

Vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何通过VSCode的配置，优化JavaScript和Vue.js文件的格式，包括设置自动换行、插入函数括号空格，以及使用js-beautify-html和prettier进行高效美化。同时，展示了如何定制Vetur插件的格式化选项，确保代码风格一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

{
    // tab 大小为2个空格
    "editor.tabSize": 2,
    // 保存时格式化
    "editor.formatOnSave": false,
    // 编辑器换行
    "editor.wordWrap": "off",
    // //让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // 开启 vscode 文件路径导航
    "breadcrumbs.enabled": true,
    // 选择 vue 文件中 template 的格式化工具
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // 让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    // vetur 的自定义设置
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            //超过120换行
            "wrap_line_length": 120,
            "wrap_attributes": "auto",
            "end_with_newline": false
        },
        "prettier": {
             // 格式化不加分号
      		"semi": false,
      		 // 格式化为单引号
      		"singleQuote": true,
      		 // 尾随逗号
      		"trailingComma": "none"
        }
    }
}