0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

webapck(eslint-webpack-plugin)でESLintが動くというけどタイミングは?

Last updated at Posted at 2022-06-20

以前、ところでwebapckでESLintが動くというけどタイミングは?において、ESLintが実行されるコードがトランスパイル前なのか後なのかについて触れていたが、ESLintでparserを指定しているか?否かで動きは変わっているというのが正確な所だと思われる。

つまり、ESLintは基本的には何もparserparserOptionsを指定しなければデフォルトではコードがES5で書かれたものとして構文チェックを行い、その構文チェックの際には特にコードのパース(変換)は行わない(以下、公式からの引用)。

By default, ESLint expects ECMAScript 5 syntax. You can override that setting to enable support for other ECMAScript versions as well as JSX by using parser options.(デフォルトでは、ESLint は ECMAScript 5 の構文を想定しています。パーサオプションを使用すれば、他の ECMAScript バージョンや JSX のサポートを有効にするために、この設定を上書きすることができます)

もし、parserparserOptionsが指定されていれば、ESLintは構文チェックを行う前にその指定されたパーサーでコードを変換してから構文チェックを行う。ESLintの構文チェックをした結果、エラーがあれば元のコード上で指摘されるが、それは各パーサーが変換前のコード上の位置と変換後のコード上の位置を記録しているからだろう(@babel/eslint-parserに以下のように書かれているので)。

ESLint allows for the use of custom parsers. When using this plugin, your code is parsed by Babel's parser (using the configuration specified in your Babel configuration file) and the resulting AST is transformed into an ESTree-compliant structure that ESLint can understand. All location info such as line numbers, columns is also retained so you can track down errors with ease.(ESLint はカスタムパーサーを使用することができます。このプラグインを使うとき、あなたのコードはBabelのパーサーによって解析され(Babelの設定ファイルで指定された構成を使って)、結果のASTはESLintが理解できるESTreeに準拠した構造に変換されます。行番号や列のような位置情報もすべて保持されるので、エラーを簡単に追跡することができます。)

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?