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 消除锯齿