- [Sasha] Automating ESLint within a build process

- Sasha] ビルドプロセスにおけるESLintの自動化

makes it really easy to enforce styles

を使用すると、スタイルの強制が非常に簡単になります。

before deploying code.

コードをデプロイする前に

But you can also use ESLint earlier

しかし、それ以前にESLintを使用することもできます

in your development process

お客様の開発プロセスにおいて

to flag issues before you even commit them.

を使用して、コミットする前に問題にフラグを立てることができます。

All the major code editors,

主要なコードエディターすべて

Visual Studio Code, Sublime Text and Atom,

Visual Studio Code、Sublime Text、Atom。

as well as a lot of other IDEs support extensions

他の多くの IDE と同様、拡張機能をサポートしています。

that check code against ESLint rules

ESLint のルールに対してコードをチェックする

while you're writing it

書きながら

and flag issues right in the editor window.

といったフラグをエディタウィンドウ上で立てることができます。

I'm using Visual Studio Code.

Visual Studio Codeを使用しています。

To integrate ESLint, I can just add an extension.

ESLintを統合するには、拡張機能を追加すればいいんです。

So I'll open up extensions

そこで、エクステンションを開放する

and I'll search on ESLint.

とESLintで検索してみる。

And the first one that shows up

そして、最初に表示される

is the ESLint extension by Dirk Baeumer.

は、Dirk Baeumer氏によるESLintの拡張機能です。

So it's always a good idea

だから、いつでも

to check the number of installs in the rating

をクリックすると、レーティングでインストール数を確認できます。

and this one, after seven million installs,

と、700万インストールを達成したこの1枚。

it has about a four and a half star rating

星4つ半くらいの評価です。

and that's a great sign.

とのことで、素晴らしい兆候です。

And in fact, I've used this one before and it is.

で、実はこれ、以前にも使ったことがあるんですが、そうなんです。

So I'll hit install.

というわけで、インストールを押してみる。

And now it's enabled.

そして今、それが可能になった。

So from now on, whenever I open a JavaScript file

というわけで、これからはJavaScriptのファイルを開くときは必ず

that's associated with a .eslintrc file,

.eslintrcファイルに関連するものです。

the ESLint extension will lint the file

ESLint 拡張モジュールは、ファイルを lint します。

and flag any issues right in the editor window.

を作成し、エディタウィンドウ上で問題点にフラグを立てることができます。

So let's test that out.

では、それを検証してみましょう。

I'm going to go back to the explorer,

エクスプローラーに戻ろうと思います。

and I'm going to open up,

と開き直る。

we'll close that up,

ということで、この辺で終わりにします。

I'm going to open up my index.js file.

index.jsファイルを開いてみます。

And I can see here that the console.log statement

そして、ここでわかるのは、console.logの文が

has a yellow wavy line underneath it.

は、その下に黄色の波線が入っています。

And if I hover over that,

その上にカーソルを合わせると

I see the explanation that my ESLint rules call

私のESLintのルールが呼び出すという説明を見ますと

for eliminating console statements.

コンソールステートメントを排除するための

Now, if you don't see that,

さて、それがわからないとしたら。

the settings for your extension may need

拡張機能の設定が必要な場合があります。

a little bit of adjustment.

を少し調整した。

For VS Code in particular,

特にVS Codeの場合。

you need to go into the preferences,

は、環境設定に入る必要があります。

so I usually open up the control panel and

ということで、いつもはコントロールパネルを開いて

I can do Preferences: Open Settings JSON

Preferencesはできる。設定JSONを開く

to get to the JSON file,

をクリックして、JSONファイルを取得します。

and if you go to the wiki page for this video,

と、この動画のwikiページを見てみると

there's a Visual Studio Code configuration snippet

Visual Studio Codeの設定スニペットがあります。

that you can just add to that JSON configuration.

そのJSON設定に追加するだけでいいのです。

And if that ESLint integration isn't working,

そして、そのESLintの統合がうまくいかなかった場合。

then adding this snippet to your JSON config may help.

の場合、このスニペットをJSON設定に追加するとよいでしょう。

But mine's working okay.

でも、私のはちゃんと動いていますよ。

I'm not going to add that in.

それを入れ込むことはない。

So ESLint can flag a whole wide variety of errors.

そのため、ESLintは実にさまざまなエラーにフラグを立てることができます。

And being reminded of those as you code

そして、それらを思い出しながらコーディングすること

can be really helpful.

は本当に助かります。

So I'm going to write some bad code

というわけで、ダメなコードを書いてみる

just to test things out.

試しにやってみただけです。

And this is another thing I've included

そして、これもまた、私が盛り込んだ

in the wiki for this video.

を、この動画のwikiに追加しました。

So just this three-line for statement,

だから、この3行のfor文だけでいいんです。

I'm going to copy and paste in here.

ここにコピー＆ペーストします。

And immediately when I paste that in,

そして、それを貼り付けるとすぐに

I see a lot of underlining,

アンダーラインがたくさん出ていますね。

and it's in red this time, not in yellow.

で、今回は黄色ではなく赤色です。

Also in the file list over here on the left

また、左のファイル一覧の中にある

in the explorer, the file name is in red

エクスプローラで、ファイル名が赤く表示されます。

and I see this number five.

と、この5番が見えてきました。

And that indicates the number of issues this file has.

そして、このファイルが持っている問題の数を示しています。

And also the containing folder has a red dot meaning

また、格納フォルダには赤い点が表示されます。

that it contains files that have issues.

問題があるファイルが含まれていること

So my for loop starts with a value of 10.

そこで、私のforループは、値10で始まります。

And it checks for a value greater than zero.

そして、0より大きい値かどうかをチェックするのです。

But it's incrementing after every loop.

しかし、ループのたびにインクリメントしている。

And this is a logic error.

そして、これは論理の誤りである。

It means it's never going to get to zero,

決してゼロにはならないってことです。

it's never going to stop,

が止まらない。

so I've created an infinite loop here.

ということで、ここで無限ループを作ってしまいました。

And that can be tricky to catch

そして、それはキャッチするのに厄介なことです

if you're just writing code

コードを書くだけなら

and trying to figure out why your code isn't working.

と、自分のコードがなぜ動かないのかを考えようとします。

But the configuration I'm using flags this.

しかし、私が使っている設定は、このようなフラグを立てています。

And so if I hover over it,

それで、その上にカーソルを合わせると

there's a pretty simple explanation

理屈はいらない

of what's going on here, the for direction is wrong.

の、フォーの方向性が間違っているのです。

And so if I change that greater than to a less than,

それで、その大を小に変えると。

most of that red goes away.

その赤は、ほとんど消えてしまいます。

I've fixed that logic error.

そのロジックミスを修正しました。

Now, there's still a bit more going on here.

さて、ここからはまだ少し先の話です。

So if I hover over that i++,

だから、そのi++にカーソルを合わせると。

which has a red underscore,

のように、赤いアンダースコアがついています。

there's an explanation about avoiding unary operators.

には単項演算子を避けるという説明があります。

I like doing that in my code as well

私も自分のコードでそうするのが好きです

because unary operators can have unexpected effects

単項演算子が予期せぬ効果をもたらす可能性があるため

based on order.

を順番に見ていきます。

So I'll replace that ++ with a +=1.

そこで、その＋＋を＋＝1に置き換えてみる。

Now, I still have a red underline.

今はまだ、赤いアンダーラインが残っています。

And if I hover over it this time,

そして、今回カーソルを合わせると

I see that my rules require spacing around this operation.

私のルールでは、この操作の周りにスペースを入れる必要があるんですね。

Again, this is a useful style

ここでも、便利なスタイル

to make my code more readable.

を使用して、私のコードをより読みやすくしています。

So I'm going to add those spaces.

だから、そのスペースを追加する。

One before the plus, one after the minus.

プラスの前に1つ、マイナスの後に1つ。

And now all of those squiggles are gone.

そして今、そのスクイッグルはすべて消え去った。

I have another yellow squiggle

もう一つ、黄色のスクイグルを持っています

under my console.log statement.

をconsole.log文の下に記述しています。

And that flags another warning

そして、もう一つの警告が表示されます。

about console statements,

コンソールステートメントについて

and I'm okay with that for right now.

と、今はそれでいいと思っています。

And then I have a squiggle under my closing curly brace.

そして、私のクロージングカーリーブレースの下にスクイッグルがあります。

And if I hover over that,

その上にカーソルを合わせると

there's an explanation that my rules call

という説明がありますが、私のルールでは

for an empty line at the end of a file,

ファイルの末尾にある空行の場合。

which is a great practice.

というのは、とてもいい練習になります。

Now, if your file already has one,

さて、あなたのファイルにすでにある場合。

you won't see this error flagged

このエラーフラグは表示されません

but I'm going to go ahead

しかし、私は先に行く

and add a line just for good measure

と、念のため一行付け加えます。

and now I'm all set.

で、これで準備万端です。

So notice in the sidebar,

だから、サイドバーで気づく。

the color for the file name has changed to yellow

ファイル名の色が黄色に変更されました。

and the number's gone down to two,

で、2人に減りました。

which just is logging the two warnings that I have.

という2つの警告をログに記録しているだけです。

Because it's not red, I know there's no errors.

赤くないから、エラーがないことがわかる。

So I'm going to save those changes

そこで、その変更を保存することにします

and so I could go over to eslintrc

ということで、eslintrcに行くことができました。

if I ever wanted to find rules

もし、私がルールを見つけたいなら

that would override the style guide I'm using.

を使えば、私が使っているスタイルガイドを上書きすることができます。

So there's documentation on how to add those

そのため、それらを追加する方法についてのドキュメントがあります。

into rules down here as key-value pairs.

をキーとバリューのペアでルールに落とし込む。

But especially when I'm using ESLint

でも、特にESLintを使っているときは

in the editor, it can be useful to turn off errors

をオフにすると便利です。

on a line-by-line basis.

を行単位で表示します。

And ESLint supports doing this with comments,

そして、ESLintはコメントでこれを行うことをサポートしています。

either on the same line

どちらか一行

or on the line before.

またはその前の行にある。

So for my first console.log statement,

というわけで、最初のconsole.log文は。

I'm going to turn off the warning

警告を消す

by adding an inline comment to the end of the line.

を行末にインラインコメントで追加することで、より効果的です。

And I have this as a code snippet

そして、コードスニペットとしてこんなのがあります。

on the wiki page for this video,

を、このビデオのwikiページでご覧ください。

ESLint inline comment.

ESLintのインラインコメントです。

But I'm just going to type it in.

でも、打ち込むだけです。

So at the end of that line,

だから、その行の最後には

I'm going to do a single space, double slash

半角スペース、ダブルスラッシュにする

and then eslint-disable-line no-console.

と入力し、eslint-disable-line no-consoleを実行します。

And so I'm saying here ESLint disable checking

ということで、ここではESLintのチェックを無効にしています。

on this line for the no-console rule.

をこの行に追加すると、no-console ルールになります。

And now that yellow underscore is gone

そして今、あの黄色いアンダースコアが消えている

because even though I've violated the rules,

というのも、ルールを破っていても

I've also included a directive saying

というディレクティブも入れています。

don't bother checking this.

は、わざわざ確認する必要はありません。

Don't flag this for me, I'm good.

フラグを立てないでください、私は大丈夫です。

I can also add a comment on its own line

コメントを独立した行に追加することも可能です

and have it apply to the line after it.

で、その次の行に適用させる。

Now, I have another flagged console.log statement,

さて、もう一つフラグが立ったconsole.log文があります。

so I'm going to add a blank line before it

ということで、その前に空白行を追加します。

and then I'm going to add a comment.

とコメントをつける。

And this is going to be eslint-disable-next-line

そして、これはeslint-disable-next-lineになる予定です。

and no-console as the rule to disable.

とno-consoleを無効化するルールとして設定します。

And so now that underline goes away

そうして今、そのアンダーラインは消え去り

from the line that follows

以下の行から

from that following console.log statement.

を、その次のconsole.log文から読み取ることができます。

And my file list is back to its default color.

そして、私のファイルリストはデフォルトの色に戻りました。

It's tracking now just the changes

現在、変更点のみを追跡しています

that I've made in Git,

Gitで作ったもの。

and it's got no tally of issues.

で、問題の集計はしていない。

And so I've indicated here

というわけで、ここで示したのは

that even though this particular file varies a bit

このファイルが多少変化しても

from my specified styles, I'm okay with it.

私の指定したスタイルからなら、大丈夫です。

(upbeat music)

(アップビート・ミュージック)