- [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,

和這個，經過七百萬次的安裝。

it has about a four and a half star rating

它有大約四顆半星的評級

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擴展名將對文件進行提示。

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代碼。

you need to go into the preferences,

你需要進入偏好設置。

so I usually open up the control panel and

所以我通常會打開控制面板並

I can do Preferences: Open Settings JSON

我可以做首選項。打開設置 JSON

to get to the JSON file,

來獲取JSON文件。

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

如果你去看這個視頻的維基頁面。

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.

在這個視頻的維基中。

So just this three-line for statement,

所以只是這三行的聲明。

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.

而我看到的是這個五號。

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.

並檢查是否有大於零的值。

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.

一個在加號前，一個在減號後。

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,

而這個數字已經下降到了兩個。

which just is logging the two warnings that I have.

這只是記錄了我的兩個警告。

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,

在這個視頻的維基頁面上。

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.

在這一行的無控制檯規則。

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)

(歡快的音樂)