vueeslint升级_ESLint的parser是个什么东西

ESLint 会对我们的代码进行校验&＃xff0c;而 parser 的作用是将我们写的代码转换为 ESTree&＃xff0c;ESLint 会对 ESTree 进行校验。

ESTree 只是一个 AST 的某一种规范&＃xff0c;ESTree 本质上还是 AST

Espree

ESLint 默认的 parser &＃xff0c;只转换 js&＃xff0c;默认支持 ES5 的语法&＃xff0c;可以通过制定 parserOptions 给 Espree 传递如下选项。

• ecmaVersion 可以开启更高 ES 版本的校验&＃xff08;已加入ES标准的语法&＃xff0c;不包括实验性的语法&＃xff09;&＃xff0c;但需要注意的是一些新标准中的语法对 ESLint 的版本也有要求&＃xff0c;如果发现ESLint 不支持校验&＃xff0c;可能需要升级 ESLint 版本
• sourceType 可以设置为 "script"&＃xff0c;如果使用 ESModule 可以设置为 "module"

&＃64;babel/eslint-parser

babel-eslint 不再维护和更新

该 parser 允许你使用 ESLint 校验所有 babel code。

ESLint的默认解析器和核心规则仅支持最新的最终 ECMAScript 标准&＃xff0c;不支持 Babel 提供的实验性&＃xff08;例如新功能&＃xff09;和非标准&＃xff08;例如Flow或TypeScript类型&＃xff09;语法。&＃64; babel / eslint-parser 是允许 ESLint 在由 Babel 转换的源代码上运行的解析器。

如果你使用该解析器&＃xff0c;还要使用 babel

当你使用 babel 时&＃xff0c;babel 的解析器会把你的 code 转换为 AST&＃xff0c;该解析器会将其转换为 ESLint 能懂的 ESTree。

ESLint的核心规则不支持实验性语法&＃xff0c;因此可能无法正常工作&＃xff0c;需要使用 &＃64;babel/eslint-plug 规则集。并且 ESLint 官方文档中的 parserOptions 只适用 Espree 解析器

该 praser 的 parserOptions 默认配置如下&＃xff1a;

&＃64;typescript-eslint

ESLint 与 Typescript 对比&＃xff1a;

• ESLint&＃xff1a;一个很棒的 Javascript Linter&＃xff0c;它的默认 parser 会将代码转换为 AST&＃xff0c;AST 被 plugin&rules 用来校验和生成错误信息
• Typescript: 一个很棒的Javascript代码静态代码分析器。它的 parser 会将源码转换为 AST&＃xff0c;这个 AST 被 typescript 编译器其他部分用来做校验例如类型检查等

然而&＃xff0c;ESLint 识别的 AST 也就是它默认的 parser 最终转换出来的 AST 数据内容和格式&＃xff08;ESTree&＃xff09;&＃xff0c;与 typescript 的 parser 转换出来的 AST 的内容和格式是不一样的&＃xff0c;所以 ESLint 是不能识别 typescript 的 parser 转换出来的 AST 内容。

这是 &＃64;typescript-eslint 存在的原因&＃xff0c;兼容两者的 AST。

TSLint 不再推荐使用&＃xff0c;并且后期这个仓库也会被抛弃&＃xff0c;原因是 TSLint 是基于 Typescript 的 parser 转换出来的 AST&＃xff0c;不能与 ESLint 一起使用

&＃64;typescript-eslint 主要包含几个包&＃xff1a;

• &＃64;typescript-eslint/parser
  • 读取 ESLint 的配置&＃xff0c;并调用下面的这包
• &＃64;typescript-eslint/typescript-estree
  • 调用 TypeScript Compiler&＃xff0c;将 typescript 的 sourcecode 转换为 TypeScript AST&＃xff0c;然后将 TypeScript AST 转换为 ESTree。

所以这块前提是需要安装 typescript 的

• &＃64;typescript-eslint/eslint-plugin
  • 有很多 ESLint 的规则我们是可以复用的。尽管我们对 TypeScript AST 进行了转换&＃xff0c;但转换后的 ESTree 中&＃xff0c;针对 typescript 中的语法&＃xff0c;ESLint 仍然是看不懂的。所以对于 typescript&＃xff0c;ESLint 提供的一些规则不再适用。
  • 因此该 plugin 的存在就是为了做这样一件事&＃xff0c;提供相应的 rule&＃xff0c;让 ESLint 能够识别。同时为了避免冲突&＃xff0c;在手动开启该 plugin 的某些规则时&＃xff0c;需要将 ESLint 当中的一些规则关闭。

babel 支持解析 Typescript sourcecode&＃xff0c;对于一些 Typescript 目前还不支持的语法&＃xff0c;babel 可以解析&＃xff0c;就像 js 需要使用 babel 一样。所以 Typescript Complier 不支持语法的 babel 支持。

所以如果在 Typesciprt 中使用了 babel&＃xff0c;而 ESLint 的 parser 又是使用的 &＃64;typescript-eslint/parser 和其提供的 rules&＃xff0c;由于 &＃64;typescript-eslint/parser 底层是依赖 Typescript complier 作为编译器&＃xff0c;而 babel 转换时使用的是其自己的编译器&＃xff0c;两者不一致&＃xff0c;可能会出现使用了 babel 中支持而 Typescript complier不支持的 Typescript 语法&＃xff0c;然后 ESLint 报错的情况。出现这种情况&＃xff0c;有两种解决方式。

1. 将 ESLint 的 parser 和 rules 替换为前面提到的 &＃64;babel/eslint-parser 和对应的 rules&＃xff0c;这样就不会出现 babel 和 ESLint 的 parser 不一致
2. 继续使用 &＃64;typescript-eslint/parser 和其提供的 rules&＃xff0c;因为它支持我们自定义 rules&＃xff0c;可以去社区找找对应的语法是否已经存在相关的 rule&＃xff0c;或者自己编写。

vue 如何配置 ESLint

vue 官方提供了一个 ESLint 插件 eslint-plugin-vue&＃xff0c;它提供了 parser 和 rules。parser 为 vue-eslint-parser&＃xff0c;rules 为 https://eslint.vuejs.org/rules/。

如果想为 vue 单文件组件中的 script 部分使用单独的 parser 可以将 parserOptions.parser 指定为想使用的 parser 即可