sublime 消除鋸齒

by Abdul Kadir

通過阿卜杜勒·卡迪爾(Abdul Kadir)

如何在Sublime中消除麻煩 (How to lint away your troubles in Sublime)

Sublime is a lightweight text editor and is quite popular among many web developers. Now I know there are many sophisticated IDEs in the market with intellisense, code completion, and whatnot. But this post is for those who have remained loyal to their favorite text editors! So if you use Sublime for your projects, then you might enjoy some of the nifty features it offers. Linting is one of them.

Sublime是一個輕量級的文本編輯器，在許多Web開發人員中都非常流行。 現在，我知道市場上有許多具有智能感知，代碼完成等功能的高級IDE。 但是這篇文章是為那些仍然忠于自己喜歡的文本編輯器的人而設計的！ 因此，如果將Sublime用于您的項目，那么您可能會喜歡它提供的一些精美功能。 棉絨就是其中之一。

Let’s start off by defining the term “Linting”.

讓我們從定義術語“棉絨”開始。

Linting is the process of checking your code for potential errors. This could be either the syntax or the code style.

整理是檢查代碼中是否存在潛在錯誤的過程。 這可以是語法，也可以是代碼樣式。

The linting process can be done during three stages of development:

整理過程可以在開發的三個階段完成：

1. Via your editor (live linting)
   通過您的編輯器(實時整理)
2. Through the build process
   通過構建過程
3. Using a pre-commit hook in version control
   在版本控制中使用預提交掛鉤

In this post, we will explore live linting in the editor. There are many popular linters out there for JavaScript like JSHint, JSCS, and ESLint. I’ll be using ESLint, because ESLint supports ES6 code, is highly extensible, and is very easy to use. If you’re interested, you can look at the comparisons between the different linters over here!

在本文中，我們將探討編輯器中的實時棉絮。 有許多流行的針對Java的linter，例如JSHint，JSCS和ESLint。 我將使用ESLint，因為ESLint支持ES6代碼，具有高度可擴展性，并且非常易于使用。 如果您有興趣，可以在這里查看不同棉短絨之間的比較！

第1步 (Step 1)

You need to first install the ESLint npm package. The command is as follows:

您需要先安裝ESLint npm軟件包。 命令如下：

npm install -g eslint

The ‘-g’ option is to install the package on the global. Install ‘npm’ if you do not already have it installed. A file will open up in Sublime asking you to download two other plugins. You need to install these plugins using Sublime’s Package Control.

'-g'選項是在全局上安裝軟件包。 如果尚未安裝，請安裝“ npm”。 Sublime中將打開一個文件，要求您下載另外兩個插件。 您需要使用Sublime的Package Control安裝這些插件。

Open up the package control using command/ctrl + shift + P and select the ‘Package Control: Install Package’ option. Then download the two plugins.

使用command / ctrl + shift + P打開程序包控件，然后選擇“程序包控件：安裝程序包”選項。 然后下載兩個插件。

1. SublimeLinter-eslint
   崇高的品味
2. SublimeLinter-contrib-eslint
   崇高的品德

SublimeLinter is the framework that provides linting. It does not come with support for different languages. The language-specific Linter must be installed separately.

SublimeLinter是提供棉絨的框架。 它不支持不同的語言。 特定于語言的Linter必須單獨安裝。

The Sublime-contrib-eslint plugin acts as an interface between ESLint and the SublimeLinter. You can check the installation procedure on their main website if you get stuck anywhere.

Sublime-contrib-eslint插件充當ESLint與SublimeLinter之間的接口。 如果您卡在任何地方，可以在其主要網站上查看安裝過程。

After successfully installing the plugins, you need to reset your editor for the changes to take effect. Now we will see ESLint in action!

成功安裝插件后，您需要重置編輯器以使更改生效。 現在，我們將看到ESLint發揮作用！

第2步 (Step 2)

Phew! Those were a lot of installations. Now, finally, you can check out the awesomeness of Linting! Open up your file in Sublime and behold the power…but wait nothing’s happened. Why is that? Don’t fret. You have installed everything correctly, but ESLint by itself does not do anything. You need to provide the basic configuration, and it is a very straightforward process. Here’s how:

！ 這些是很多裝置。 現在，最后，您可以檢查一下Linting的超贊之處！ 在Sublime中打開文件并查看其功能……但請耐心等待。 這是為什么？ 別擔心 您已正確安裝了所有程序，但ESLint本身不執行任何操作。 您需要提供基本配置，這是一個非常簡單的過程。 這是如何做：

1. Fire up the terminal program in the home directory of your project
   在項目的主目錄中啟動終端程序
2. Type this command
   輸入此命令

eslint --init

A prompt shows up asking you a few questions about your coding preferences and an ‘.eslintrc’ file is generated for you. This file contains the rules that you have just selected. You can add extra configurations should you choose to do so.

出現提示，詢問您有關編碼首選項的幾個問題，并為您生成一個“ .eslintrc”文件。 該文件包含您剛剛選擇的規則。 您可以選擇添加其他配置。

As you can see, ESLint is complaining about the indentation and the fact that the foo variable is not used anywhere. You can check any error or warning by hovering over the highlighted portion of the code or checking the message in Sublime’s status bar at the bottom.

如您所見，ESLint抱怨縮進以及foo變量未在任何地方使用的事實。 您可以將鼠標懸停在代碼的突出顯示部分上，或者檢查底部Sublime狀態欄中的消息，以檢查任何錯誤或警告。

So that was it! I hope you were able to follow along. Linting is a pretty cool tool to detect errors in your code. It ensures that you follow code guidelines and write clean code at all times. I hope you all found this post helpful, and as always, happy coding!

就這樣！ 希望您能夠跟進。 Linting是一個非常不錯的工具，可以檢測代碼中的錯誤。 它確保您始終遵循代碼準則并始終編寫干凈的代碼。 希望大家都覺得這篇文章對您有所幫助，并且一如既往地高興編寫代碼！

翻譯自: https://www.freecodecamp.org/news/how-to-lint-away-your-troubles-in-sublime-c448a8896cf7/

sublime 消除鋸齒