vscode中使用vetur、eslint、prettier格式化vue项目代码

「爱情、让人受尽委屈。」 2022-01-29 13:31 409阅读 0赞

# 文档 #

[官网 setting.json][setting.json]

## vetur ##

[vetur][]

## js-beautify-html ##

[GitHub][]  
[官网][Link 1]  
[下图是vetur里面的 js-beautify-html][vetur_ js-beautify-html]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70]

[Default settings][]  
![Default settings][Default settings 1]

在vscode中，setting.json中的配置情况  
![在vscode中，setting.json中的配置情况][vscode_setting.json]

### 应用 ###

"vetur.format.defaultFormatterOptions": { 
        "js-beautify-html": { 
          //属性强制折行对齐,可以是这些值Wrap attributes to new lines [auto|force|force-aligned|force-expand-multiline] ["auto"]，默认为auto
          // 1.force-aligned 启用后.vue文件中templeate部分代码中的属性会被强制换行，但是闭合的标签却与最后一个属性在同一行，没有换
          //"wrap_attributes": "force-aligned" 
            "wrap_line_length": 120,//一行的长度超过120，在换行
    		"wrap_attributes": "auto",
    		"end_with_newline": false
        }
      },

[未完][Link 2]

[vscode setting.json][]  
[1][]

[setting.json]: https://code.visualstudio.com/docs/getstarted/settings
[vetur]: https://vuejs.github.io/vetur/
[GitHub]: https://github.com/beautify-web/js-beautify
[Link 1]: https://beautifier.io/
[vetur_ js-beautify-html]: https://vuejs.github.io/vetur/formatting.html#settings
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70]: /images/20220129/668b26aaaf0840beb3dc1797e04bdb2d.png
[Default settings]: https://github.com/vuejs/vetur/blob/master/server/src/modes/template/services/htmlFormat.ts
[Default settings 1]: /images/20220129/99c0ec90180c4dc89f079c86c79c27b7.png
[vscode_setting.json]: /images/20220129/d326459a7f9146318efdad4cc096914a.png
[Link 2]: https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=vetur.format.defaultFormatterOptions&oq=wrap_attributes&rsv_pq=c44942980000d479&rsv_t=7b23EoSNxgNZvK2t%2B%2BsCzIj4XsIPdPGL3QnQtMs831CKM4H6AF7fo8tY%2FZQ&rqlang=cn&rsv_enter=1&rsv_n=2&rsv_sug3=1&rsv_sug2=0&inputT=510&rsv_sug4=510
[vscode setting.json]: https://www.baidu.com/s?ie=UTF-8&wd=vscode%20setting.json
[1]: https://segmentfault.com/q/1010000017300463