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

前端代码格式化问题总结

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

vscode前端代码格式化插件vetur

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

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/

vscode前端代码格式化插件prettier

插件如图所示：

此插件是真正格式化代码的插件，插件的官网地址：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…

eslint

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

sonarlint

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