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规范抵触：

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