Vscode code formatting document configuration

First find the file settings.json as shown below

（1）

insert image description here

（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
insert image description here

（3）

insert image description here

Copy the overall code into it, don't close this file first, find your own file, test it, and see if it works, if it doesn't work, I'm Ctrl + zlooking for other methods

{
    
    
    "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",
        }
    }
}

If you feel that the article is good, remember to pay attention, pay attention and collect it. Please correct me if there is any mistake. If you need to reprint, please indicate the source, thank you! ! !

Vscode code formatting document configuration

Guess you like