前端代码格式化问题总结

前端代码格式化问题总结

大公司为了保证所有同事代码风格一致，会推崇一系列规范。其中代码格式化，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专注于前端领域