如何配置VSCode中的Prettier和ESLint标准

Posted 2021-09-14 Marhoo

ESLint + Prettier来统一前端代码风格(Vue项目)

可以先看看大佬这篇入门文章：使用ESLint+Prettier来统一前端代码风格

根据热门代码规范标准(例如Airbnb)，先做到自我代码规范：

• 第一步：VSCode中利用Prettier插件做到接管Vue项目template和CSS代码风格统一格式化，这个操作也会对部分JS代码的风格进行统一，但可能会和第二步中Airbnb标准有冲突，我们需要配置全局。
• 第二步：ESLint 配合 Airbnb（建议好好看一看）规范，能够检测出代码中的潜在问题，提高代码质量，但是并不能完全统一代码风格，因为这些代码规范的重点并不在代码风格上（虽然有一些限制），但第一步已经解决了代码风格的问题。

场景如下：
假设是中小型公司的Vue前端项目快速开发的代码规范标准。
假如项目工程化也用VueCli4初始化的项目。
假设你对Babel在VueCli中的实现和所需的依赖包也有一定的了解。
那么我们开始利用尤大为我们配置好的@vue/cli-plugin-eslint工具来ESlint我们的代码（当你 vue add eslint 插件指令是选择了airbnb标准时，将自动借助vue/eslint-config-airbnb和eslint-plugin-import依赖完成ESLint检查工作）。

当然假如你对前端工程化有深入的理解，公司的前端项目webpack是自己实现的，甚至封装了自己的项目脚手架。在ESlint的实现上那将可能还需要：

• babel/core@>=7.2.0的底层依赖
• babel-eslint是一个解析器，它允许ESLint在Babel转换的源代码上运行，要使用它，必须在ESLint配置文件中指定 parser: "babel-eslint" ，当然这个解释器也支持在parserOptions中进行其他的配置。未来将由@babel/eslint-parser完成更替，此解析器将作废。
• 尤大封好的@vue/eslint-config-airbnb关于Airbnb标准的依赖，内有eslint-config-airbnb-base、eslint-plugin-import 等依赖。把缩写的
  @vue/airbnb配置进extends扩展。

Sorry：暂时水平到这里，理解有限，笔记只是进步过程中的一个个脚印，防止知识点的遗忘，并对技能的重复记忆训练。

关于VSCode中利用Prettier插件设置防止与Airbnb标准冲突，设置rules规则：

    "prettier.singleQuote": true,
    "prettier.semi": true,
    "prettier.bracketSpacing": true,
    "prettier.printWidth": 100,
    "prettier.useEditorConfig": false,   //无视.editorconfig文件

提示：如果内容理解困难，请先补充Babel的基本知识或直接阅读下面的总结。

总结：

• 本地最简便的代码规范标准实现，就是 prettier + eslint的airbnb标准 去规范代码。基本上就是把html和css部分交给prettier处理，然后把js部分交给airbnb部分去处理。在vscode中prettier默认全局配置中与airbnb会冲突的一些配置把它改成与airbnb的标准一致的rules规则。
• 先把写好的页面做一次prettier格式化，然后eslint去检查代码会提示js部分还有问题，指令list修复之后除了部分无法修复，其他已全部修复。然后再尝试单个文件中prettier格式化，你会发现并不会再做改动了。这样我们就做到了Prettier和Eslint配置不冲突。