前端代码格式化问题总结为了保证所有同事的代码风格一致，大公司都会推崇一系列的规范。其中，代码格式化、eslint检查、sonarlint等几乎成为必备项，但是这些不同含义的工具集成在一起就会产生冲突，比如代码中的单引号，格式化工具配置单引号，而eslintconfiguration中使用了双引号，会导致冲突，所以我们先来看看各个工具的使用方法。vscode前端代码格式化插件vetur是一款集成了一系列代码格式化工具的工具，比如prettier:Forcss/scss/less/js/ts.prettier:Forpug.prettier-eslint:Forjs。运行prettier和eslint--fix.stylus-supremacy:Forstylus.vscode-typescript:Forjs/ts。同样的js/tsformatterforVSCode.sass-formatter：对于文件的.sass部分。prettyhtml：对于html.vetur本身只提供语法高亮、代码格式化等基本功能，还是需要借助其他插件比如更漂亮。Vetur官方文档地址：https://vuejs.github.io/vetur/vscode前端代码格式化插件prettier插件如图：这个插件是真正格式化代码的插件，插件官方地址：https://prettier.io/plug-in格式化配置选项地址：https://prettier.io/docs/en/o...配置示例：//添加prettier.config.js在根目录下，配置js代码末尾是否有双引号module.exports={"semi":true};上述配置官方文档如下：//最终代码效果functionfoo(){console.log(1);//这里代码末尾会有分号}注：1、配置文件有很多，比如：.prettierrc.json、.prettierrc.js、prettier.config.js等。随便选一个，不同的配置文件写法不一样。详见：https://prettier.io/docs/en/c...2.如果要保证这个插件在vscode上没问题，还需要在vscode上进行配置，具体请参考地址：https://github.com/prettier/p...eslintvue-cli脚手架提供了eslint检查的功能。理论上，eslint是用来检查代码是否有缺陷的。提供代码格式化功能，经常和插件prettier插件冲突，需要保证两者代码格式化的一致性。sonarlint的作用sonarlint与eslint的主要功能一致，用于检查代码是否有缺陷，代码结构是否良好，但是sonarlint适用于不同的语言，而eslint则侧重于前端领域
