vscode一格式化就报错？各种风格问题各种报错烦不胜烦，教你如何用好vue的eslint风格配置...

前言

感觉搭建一个舒服的前端开发环境，十分的重要定制化的格式化，编辑器自带的格式化各种报错，手动改真的会死人，因此搭建一个编辑器环境必不可少，现在要讲的是vscode中如何定制vue

vs code的配置文件:

format相关:搜索format，你会看到很多默认的格式化配置项。

更改format配置你可以选择想要更改的内容，复制到右边进行更改，当然，有些配置项是装好插件才会出来的。后面所说的设置配置文件都是修改右边这里哦～

安装插件:非常简单咯，点击左侧图标，然后输入你想搜索的名字就好了。当然有些插件可能没有被官方采纳。你也可以去github上下载。

所以:你想要一个什么样的格式化基本上都可以实现，阅读一下不同插件的github里面的readme就可以了。

1 ESLint格式化

安装插件：ESLint

如果题主认真读了ESLint的Readme的话，应该可以写出下面的配置了。不过我还是写一下好了。
用来格式化和提示格式错误。设置文件类型:

设置配置:

{"workbench.startupEditor": "welcomePage","editor.tabSize": 2,"eslint.autoFixOnSave": true,"eslint.validate": ["javascript","javascriptreact",{"language": "html","autoFix": true},{"language": "vue","autoFix": true}]
}

2 在Vue项目中的ESLint

安装插件：Vetur

其实在工作中，我们往往不喜欢常常去按保存键，或者在保存之前想先格式化一下再继续写。因此，我采用了下面的方式：默认自带了格式化的功能，快捷键是shift+option+f（mac）。主要用来格式化复制粘贴的代码。ESLint 在编码过程中提示格式错误，养成良好的编码习惯。

设置文件类型:

设置配置：

{"vetur.format.defaultFormatter.html": "prettier" //这是vue中html的格式化"workbench.startupEditor": "welcomePage","vetur.format.defaultFormatter.js": "vscode-typescript","javascript.format.insertSpaceBeforeFunctionParenthesis": true,"editor.quickSuggestions": {"strings": true},"editor.tabSize": 2,"eslint.validate": ["javascript","javascriptreact","html","vue",{"language": "html","autoFix": true}]
}

3 JS中的格式化

安装插件：Javascript Standard Style

设置文件类型:

4 废话少说，装好上面三个插件，大家可以参考我的配置，直接复制进去就行了

{"editor.fontSize": 19,"workbench.colorTheme": "Monokai","workbench.startupEditor": "welcomePage","editor.tabSize": 2,"eslint.autoFixOnSave": true,"vetur.format.defaultFormatter.js": "vscode-typescript","javascript.format.insertSpaceBeforeFunctionParenthesis": true,"editor.quickSuggestions": {"strings": true},"eslint.validate": ["javascript","javascriptreact","html","vue",{"language": "html","autoFix": true}],"files.autoSave": "afterDelay","vetur.format.defaultFormatter.html": "prettier"
}

[原文]参考