ESlint:是统一JavaScript代码风格的工具，不包括css、html等。

背景：

最近研究了一下前端，然后一直在百度上找VScode Formatting(eslit)的插件，但是很长一段时间都觉得不靠谱。目前还没有一个插件可以格式化符合ESlint的html、css、js、vue，所以我尽量想办法解决。

解决方案：

1.安装插件

1) eslint: JavaScript代码检测工具，可配置为每次保存时格式化js，但每次保存时只格式化一点点。你要连续按住Ctrl S几次，才能自己格式化体验~ ~

2)vetur:可以格式化html、标准css(用分号和大括号)、标准js(用分号和双引号)和vue文件，但是！格式化的标准js文件不符合ESlint规范，会给你双引号、分号等。像这样

可以格式化html并在单独的行中显示

3)bearry-Code formatter:只关注格式化，不具备eslint检查语法的能力，只关心格式化文件(最大长度、混合标签和空格、引用样式等)。)，包括JavaScript、flow、typescript、CSS、SCSS、less、JSX、VUE、GraphQL、JSON、Markdown。

4)Manta的手写笔Supremacy:格式化手写笔插件(不用就不要安装了)，因为vetur会用分号和大括号格式化css，这个插件会把css格式化成手写笔样式，就像这样。

2.在vs code file-preferences-settings中，在正确的配置中添加以下代码(代码有注释！)，从现在开始，Ctrl S可以一键格式化

代码如下：

{//vscode默认情况下已启用根据文件类型“editor . detect indentation”: false自动设置tabsize的选项。//重置tabsize 'editor.tabSize': 2。//#每次保存时自动格式化' editor.formatonsave ' : true，//#每次保存时以eslint格式修复代码' ESL int . autofixonssave ' : true，//添加vue support' eslint。validate' : ['JavaScript '，' JavaScript react '，{'language' :' vue '，' autofix' : true}]，/#让specifier使用eslint的代码格式来验证' pretier . eslintiteglation ' : true，/#删除代码末尾的分号' specifier . semi ' : false。//#使用引号而不是双引号' pretiter.singlequote' :true，//#在函数(名称)和后面的括号之间添加一个空格' JavaScript . format . insertspaceforeffectorparenheis ' : true。//#根据用户自己的习惯选择‘vetur . format . default formatter . html’:‘js-beauty-html’。//#让js按照编辑器' vetur . format . default formatter . js ' : ' vs-code-typescript '的ts格式以vue格式显示。维特。format . defaultformateroptions ' : { ' js-beauty-html ' 3360 { ' wrap _ attributes ' : ' force-aligned '//# Vue组件中的HTML代码格式化样式}}，//要格式化手写笔，需要安装Manta的手写笔supreme插件' Stylus supreme '。插入冒号' : false，//是否插入冒号'手写笔至上'。插入半色' :假，//是否插入好分'手写笔至上。插入大括号' : false，//是否插入大括号'手写笔至上'。insertnewlinearound imports ' : false，//导入后是否换行' stylesupremacy。insertnewlinearound blocks ' : false//是否用两个选择器包装}以上就是本文的全部内容，希望对大家的学习有所帮助，支持我们。