关于前端:前端代码格式化问题总结

大公司为了保障所有共事代码格调统一，会推崇一系列标准。其中代码格式化，eslint 查看，sonarlint 等简直成了必备项，只不过这些不同意义的工具集成在一起后会发生冲突，比方代码中的单引号，格式化工具配置的是单引号，eslint 配置的是双引号，这就导致了抵触，那咱们先来看看各工具的应用形式。

这个工具集成了一些列代码格式化工具，例如

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

vetur 自身只提供语法高亮等基本功能，代码格式化的性能还是得借助 prettier 等其它插件。
vetur 官网文档地址：https://vuejs.github.io/vetur/

插件如图所示：

此插件是真正格式化代码的插件，插件的官网地址：https://prettier.io/
插件格式化配置选项地址：https://prettier.io/docs/en/o…
配置举例：

// 在根目录增加 prettier.config.js , 配置 js 代码完结时是否有双引号
module.exports = {"semi": true};

上述配置官网文档阐明如下：

// 最终代码成果
function foo(){console.log(1);  // 此处代码完结会有分号
}

留神：
1、配置文件有多种，如：.prettierrc.json，.prettierrc.js，prettier.config.js 等等。抉择一种即可，不同的配置文件写法不同，具体见：https://prettier.io/docs/en/c…
2、此插件如果想确保在 vscode 上 OK，还须要在 vscode 上配置，详情参见地址：https://github.com/prettier/p…

vue-cli 脚手架提供了 eslint 查看的性能，实践上 eslint 是用于查看代码是否缺点，有 bug 的作用，惋惜实际上还提供了代码格式化的性能，这点经常和插件 prettier 插件有抵触，须要保障两者代码格式化的一致性。

sonarlint 的作用和 eslint 的次要性能统一，都是用于用于查看代码是否缺点，代码构造是否良好，然而 sonarlint 实用于不同语言，而 eslint 专一于前端畛域

关于前端:前端代码格式化问题总结

前端代码格式化问题总结

vscode 前端代码格式化插件 vetur

vscode 前端代码格式化插件 prettier

eslint

sonarlint