UNPKG

7.4 kBMarkdownView Raw
1# @babel/eslint-parser [![npm](https://img.shields.io/npm/v/@babel/eslint-parser.svg)](https://www.npmjs.com/package/@babel/eslint-parser) [![travis](https://img.shields.io/travis/babel/@babel/eslint-parser/main.svg)](https://travis-ci.org/babel/@babel/eslint-parser) [![npm-downloads](https://img.shields.io/npm/dm/@babel/eslint-parser.svg)](https://www.npmjs.com/package/@babel/eslint-parser)
2
3**@babel/eslint-parser** allows you to lint **ALL** valid Babel code with the fantastic
4[ESLint](https://github.com/eslint/eslint).
5
6## When should I use @babel/eslint-parser?
7
8ESLint's default parser and core rules [only support the latest final ECMAScript standard](https://github.com/eslint/eslint/blob/a675c89573836adaf108a932696b061946abf1e6/README.md#what-about-experimental-features) and do not support experimental (such as new features) and non-standard (such as Flow or TypeScript types) syntax provided by Babel. @babel/eslint-parser is a parser that allows ESLint to run on source code that is transformed by Babel.
9
10**Note:** You only need to use @babel/eslint-parser if you are using Babel to transform your code. If this is not the case, please use the relevant parser for your chosen flavor of ECMAScript (note that the default parser supports all non-experimental syntax as well as JSX).
11
12## How does it work?
13
14ESLint allows for the use of [custom parsers](https://eslint.org/docs/developer-guide/working-with-custom-parsers). When using this plugin, your code is parsed by Babel's parser (using the configuration specified in your [Babel configuration file](https://babeljs.io/docs/en/configuration)) and the resulting AST is
15transformed into an [ESTree](https://github.com/estree/estree)-compliant structure that ESLint can understand. All location info such as line numbers,
16columns is also retained so you can track down errors with ease.
17
18**Note:** ESLint's core rules do not support experimental syntax and may therefore not work as expected when using `@babel/eslint-parser`. Please use the companion [`@babel/eslint-plugin`](https://github.com/babel/babel/tree/main/eslint/babel-eslint-plugin) plugin for core rules that you have issues with.
19
20## Usage
21
22### Installation
23
24```sh
25$ npm install eslint @babel/core @babel/eslint-parser --save-dev
26# or
27$ yarn add eslint @babel/core @babel/eslint-parser -D
28```
29
30**Note:** @babel/eslint-parser requires `@babel/core@>=7.2.0` and a valid Babel configuration file to run. If you do not have this already set up, please see the [Babel Usage Guide](https://babeljs.io/docs/en/usage).
31
32### Setup
33
34To use @babel/eslint-parser, `"@babel/eslint-parser"` must be specified as the `parser` in your ESLint configuration file (see [here](https://eslint.org/docs/user-guide/configuring/plugins#specifying-parser) for more detailed information).
35
36**.eslintrc.js**
37
38```js
39module.exports = {
40 parser: "@babel/eslint-parser",
41};
42```
43
44With the parser set, your configuration can be configured as described in the [Configuring ESLint](https://eslint.org/docs/user-guide/configuring) documentation.
45
46**Note:** The `parserOptions` described in the [official documentation](https://eslint.org/docs/user-guide/configuring/language-options#specifying-parser-options) are for the default parser and are not necessarily supported by @babel/eslint-parser. Please see the section directly below for supported `parserOptions`.
47
48### Additional parser configuration
49
50Additional configuration options can be set in your ESLint configuration under the `parserOptions` key. Please note that the `ecmaFeatures` config property may still be required for ESLint to work properly with features not in ECMAScript 5 by default.
51
52- `requireConfigFile` (default `true`) can be set to `false` to allow @babel/eslint-parser to run on files that do not have a Babel configuration associated with them. This can be useful for linting files that are not transformed by Babel (such as tooling configuration files), though we recommend using the default parser via [glob-based configuration](https://eslint.org/docs/user-guide/configuring/configuration-files#configuration-based-on-glob-patterns). Note: @babel/eslint-parser will not parse any experimental syntax when no configuration file is found.
53- `sourceType` can be set to `"module"`(default) or `"script"` if your code isn't using ECMAScript modules.
54<!-- TODO(Babel 8): Remove this -->
55- `allowImportExportEverywhere` (default `false`) can be set to `true` to allow import and export declarations to appear anywhere a statement is allowed if your build environment supports that. Otherwise import and export declarations can only appear at a program's top level.
56- `ecmaFeatures.globalReturn` (default `false`) allow return statements in the global scope when used with `sourceType: "script"`.
57- `babelOptions` is an object containing Babel configuration [options](https://babeljs.io/docs/en/options) that are passed to Babel's parser at runtime. For cases where users might not want to use a Babel configuration file or are running Babel through another tool (such as Webpack with `babel-loader`).
58
59**.eslintrc.js**
60
61```js
62module.exports = {
63 parser: "@babel/eslint-parser",
64 parserOptions: {
65 sourceType: "module",
66 allowImportExportEverywhere: false,
67 ecmaFeatures: {
68 globalReturn: false,
69 },
70 babelOptions: {
71 configFile: "path/to/config.js",
72 },
73 },
74};
75```
76
77**.eslintrc.js using glob-based configuration**
78
79This configuration would use the default parser for all files except for those found by the `"files/transformed/by/babel/*.js"` glob.
80
81```js
82module.exports = {
83 rules: {
84 indent: "error",
85 },
86 overrides: [
87 {
88 files: ["files/transformed/by/babel/*.js"],
89 parser: "@babel/eslint-parser",
90 },
91 ],
92};
93```
94
95**Monorepo configuration**
96
97This configuration is useful for monorepo, when you are running ESLint on every package and not from the monorepo root folder, as it avoids to repeat the Babel and ESLint configuration on every package.
98
99```js
100module.exports = {
101 parser: "@babel/eslint-parser",
102 parserOptions: {
103 babelOptions: {
104 rootMode: "upward",
105 },
106 },
107};
108```
109
110### Run
111
112```sh
113$ ./node_modules/.bin/eslint yourfile.js
114```
115
116## TypeScript
117
118While [`@babel/eslint-parser`](https://github.com/babel/babel/tree/main/eslint/babel-eslint-parser) can parse TypeScript, we don't currently support linting TypeScript using the rules in [`@babel/eslint-plugin`](https://github.com/babel/babel/tree/main/eslint/babel-eslint-plugin). This is because the TypeScript community has centered around [`@typescript-eslint`](https://github.com/typescript-eslint/typescript-eslint) and we want to avoid duplicate work. Additionally, since [`@typescript-eslint`](https://github.com/typescript-eslint/typescript-eslint) uses TypeScript under the hood, its rules can be made type-aware, which is something Babel doesn't have the ability to do.
119
120## Questions and support
121
122If you have an issue, please first check if it can be reproduced with the default parser and with the latest versions of `eslint` and `@babel/eslint-parser`. If it is not reproducible with the default parser, it is most likely an issue with `@babel/eslint-parser`.
123
124For questions and support please visit the [`#discussion`](https://babeljs.slack.com/messages/discussion/) Babel Slack channel (sign up [here](https://slack.babeljs.io/)) or the [ESLint Discord server](https://eslint.org/chat).