Vscode代码格式化文档配置

首先找到这个文件settings.json 如下图

（1）

在这里插入图片描述

（2）

![](https://img-blog.csdnimg.cn/887616ebb4e24a8a9d7b848561f239e4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATUZHXzY2Ng==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
在这里插入图片描述

（3）

在这里插入图片描述

整体代码复制到里面，先不要关闭此文件，找到自己文件，测试一下，是否起作用，不行再Ctrl + z,在寻求其他方法

{
    
    
    "typescript.preferences.quoteStyle": "single",
    "javascript.preferences.quoteStyle": "single",
    // 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": {
    
    
            "wrap_line_length": 120,
            "wrap_attributes": "auto",//"force-aligned" //属性强制折行对齐
            "end_with_newline": false
        },
        "prettier": {
    
    
            "singleQuote": true,
            "semi": false,
            "printWidth": 100,
            "wrapAttributes": false,
            "sortAttributes": false,
            "trailingComma": "none",
        }
    }
}

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！

Vscode代码格式化文档配置

猜你喜欢