[JavaScript知识库]VScode Vue项目格式化的设置推荐（分号问题，tab问题，分行问题）没写完

一概述

在使用VScode开发Vue项目中，经常遇到各种格式问题，Eslint的格式经常报错，又设置不到，所以记下这个，先从介绍插件，在介绍搭配，在进行配置，用最完美的方式打造最好的开发环境

二、插件介绍

2.1 Eslint

Eslint是JavaScript检测工具

2.2Vetur

VSCode 里安装 Vetur 有什么用？
VSCode里安装Vetur可以将“.vue”文件中的语法进行高亮显示，Vetur不仅支持Vue中的template模板以外，还支持大多数主流的前端开发脚本和插件，比如Sass、TypeScript、Jade和Less等等。
如果没有安装Vetur，在VScode中开发Vue项目，.vue文件不会高亮，全是灰色字体
vetur 的代码提示不支持任何配置, 建议安装ESLint.
Vetur格式化的标准js文件不符合ESlint规范，会给你加上双引号、分号等

2.2.1详细

Vetur只支持整个文档格式化, 不支持选中某个片段格式化
Vetur内嵌了如下格式化工具, 如果本地安装了相应版本, 则会使用本地安装的版本, 默认配置如图

1. prettier: For css/scss/less/js/ts.
2. prettier-eslint: For js. Run prettier and eslint --fix.
3. prettyhtml: For html.
4. stylus-supremacy:For stylus.
5. vscode-typescript: For js/ts. The same js/ts formatter for VS Code.
6. sass-formatter: For the .sass section of the files.
   

ESLint主要负责: 质量检查(例如使用了某个变量却忘记了定义)、风格检查
后面用到的Prettier主要负责: 风格检查, 没有质量检查

2.3 eslint-plugin-vue

vetur默认集成了一个eslint-plugin-vue版本来对提示

也可自己安装一个新的版本. 如果自己安装一个新的版本

2.4 Prettier - Code formatter

只关注格式化，并不具有eslint检查语法等能力，只关心格式化文件(最大长度、混合标签和空格、引用样式等)，包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown

三、插件总结

总的来说，我们应该安装Vetur和Eslint，而其他插件如Prettier我们主要使用Vetur内嵌的，下列表格总结一下

四、搭配（Eslint+Vetur+内嵌js-beautify-html+）

vetur的默认代码风格工具：代码

"vetur.format.defaultFormatter.html": "prettyhtml",  // html格式化
"vetur.format.defaultFormatter.css": "prettier",     //  css
"vetur.format.defaultFormatter.postcss": "prettier", // postcss
"vetur.format.defaultFormatter.scss": "prettier",    // scss
"vetur.format.defaultFormatter.less": "prettier",    // less
"vetur.format.defaultFormatter.stylus": "stylus-supremacy", //stylus
"vetur.format.defaultFormatter.js": "prettier",  	 // js
"vetur.format.defaultFormatter.ts": "prettier",		 // ts
"vetur.format.defaultFormatter.sass": "sass-formatter" // sass

4.1 使用js-beautify-html风格的html配置

// 重新设置默认的html格式化风格
"vetur.format.defaultFormatter.html": "js-beautify-html"
"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
        // js-beautify-html settings here
      　　"wrap_attributes": "auto", // 属性强制折行对齐
      　　"wrap_line_length": 0,     // 设置一行多少字符换行，设置为 0 表示不换行
      　　// "end_with_newline": true
      　　"semi": false,　　　　　　　 // 
      　　"singleQuote": true　　　　 // 单引号
    }
}

4.2 vetur-prettier风格

"vetur.format.defaultFormatterOptions": {
　　"prettier": {
　　　　// Prettier option here
　　　　"trailingComma": "es5", // 多行时，尽可能打印尾随的逗号
　　　　"tabWidth": 4, // 会忽略vetur的tabSize配置
　　　　"useTabs": false, // 是否利用tab替代空格
　　　　"semi": true, // 句尾是否加;
　　　　"singleQuote": true, // 使用单引号而不是双引号
　　　　"arrowParens": "avoid", // allow paren-less arrow functions 箭头函数的参数使用圆括号
　　}
}