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 文件