使用Visual Studio Code和ESLint进行保存

We need style guides to write consistent, reusable and clean code. But when you have been working 10 hours a day on a project for the past 3 months it’s hard to notice an extra indentation in your code or a single quote instead of a double quote.

我们需要样式指南来编写一致，可重用和简洁的代码。但是，当您在过去3个月中每天在项目上工作10个小时时，很难注意到代码中的缩进或单引号而不是双引号。

That’s what linters are for. They are here to yell at you “THIS CODE IS UGLY GO FIX IT”. I personally do not enjoy getting yelled at. That’s why I use auto-save linting.

这就是短毛绒的用途。他们在这里对您大喊“此代码很难解决”。我个人不喜欢被人大喊大叫。这就是为什么我使用自动保存棉绒。

Auto-save linting corrects my documents as I press the save button.

当我按下“保存”按钮时，自动保存整理功能会纠正我的文档。

整理设置 (Linting Setup)

First, I would recommend installing the amazing ESLint extension available in Visual Studio Code’s marketplace.

首先，我建议安装Visual Studio Code市场上可用的惊人的ESLint扩展。

We all have different preferences and needs for our projects. This is not an ESLint lesson. If you’re not familiar with ESLint, I would recommend to install their CLI tool globally.

我们对项目都有不同的偏好和需求。这不是ESLint课程。如果您不熟悉ESLint，建议您全局安装其CLI工具。

$ npm install -g eslint
# Or for yarn users
$ yarn global add eslint

Now we can do the CLI walk-through.

现在，我们可以进行CLI演练。

# First initialize your project
$ npm init
# Then we can use the walk-through
$ eslint --init

You should see something like this:

您应该会看到以下内容：

Now let’s create a JavaScript file with ugly code:

现在，用丑陋的代码创建一个JavaScript文件：

You can see that helloYou is underlined. If I hover it I can see the following message: “‘helloYou’ is assigned a value but never used”. This is because the rule .eslint(no-unused-vars) is activated and tells me to use the variable.

您会看到helloYou下划线。如果我将其悬停，则会看到以下消息：“'helloYou'被分配了一个值，但从未使用过”。这是因为规则.eslint(no-unused-vars)已激活，并告诉我使用该变量。

This can be fixed if I write:

如果我这样写，可以解决此问题：

const helloYou    = (name)=> {
  name = 'you' || name   ;
  console.log("hello" + name + "!" )
}

// I am using the variable helloYou
console.log(helloYou)

You can see that there are other problems with this code that ESLint is not pointing out.

您可以看到此代码还有ESLint未指出的其他问题。

新增规则 (Adding Rules)

In Alligator.io posts, the guideline is that we have to use single quotes and semi-colons in our code. eslint --init created a file called eslintrc.js (or .yml or .json if that’s the option you selected).

在Alligator.io帖子中，准则是我们必须在代码中使用单引号和分号。 eslint --init创建了一个名为eslintrc.js的文件(如果您选择的是eslintrc.js或.json)。

Module: .eslintrc.js

模组：.eslintrc.js

module.exports = {
  'env': {
    'browser': true,
    'es6': true,
    'node': true
  },
  'extends': 'eslint:recommended',
  'globals': {
    'Atomics': 'readonly',
    'SharedArrayBuffer': 'readonly'
  },
  'parserOptions': {
    'ecmaVersion': 2018,
    'sourceType': 'module'
  },
  'rules': {
  }
};

The rules section is empty so let’s fill it up.

规则部分为空，因此我们将其填充。

module.exports = {
  // ...
  'rules': {
    // we only want single quotes
    'quotes': ['error', 'single'],
    // we want to force semicolons
    'semi': ['error', 'always'],
    // we use 2 spaces to indent our code
    'indent': ['error', 2],
    // we want to avoid useless spaces
    'no-multi-spaces': ['error']
  }
}

If we go back to our JavaScript file, we’ll see all our linting errors being marked.

如果返回到JavaScript文件，则会看到所有标记错误的内容都已标记。

If you have the ESLint extension installed you can use CTRL + SHIFT + P to open the Command Palette. Then search for “ESLint fix all auto-fixable Problems” and press enter.

如果安装了ESLint扩展，则可以使用CTRL + SHIFT + P打开命令面板。然后搜索“ ESLint修复所有可自动修复的问题”，然后按Enter。

Now my dirty code looks like this:

现在我的脏代码如下所示：

const helloYou = (name)=> {
  name = 'you' || name ;
  console.log('hello' + name + '!' );
};

console.log(helloYou());

Beautiful!

美丽！

添加VSCode自动保存 (Adding VSCode Autosave)

Sometimes I forget to run the auto-fix command. But I never (almost) forget to save my files. Thankfully we can setup ESLint to run auto-fix every time I run CTRL + S.

有时我忘记运行自动修复命令。但是我从来没有(几乎)忘记保存文件。幸运的是，每次我运行CTRL + S时，我们都可以将ESLint设置为运行自动修复。

For ESLint to work correctly on file same, you must change the VSCode preferences. Go to File > Preferences > Settings > Workplace and try to find:

为了使ESLint在相同文件上正常工作，必须更改VSCode首选项。转到文件>首选项>设置>工作场所，然后尝试查找：

Editor: Code Actions On Save
Code action kinds to be run on save.

Edit in settings.json

Then click settings.json. Or you can create a .vscode folder and create a file called settings.json inside.

然后单击settings.json。或者，您可以创建一个.vscode文件夹，并在其中创建一个名为settings.json的文件。

$ mkdir .vscode
$ touch .vscode/settings.json
# Or for windows users
$ new-item .vscode/settings.json

In settings.json paste the following code.

在settings.json粘贴以下代码。

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript"]
 }

Now all you need to to is save your files to automatically apply your linting rules (as long as they are auto-fixable).

现在，您所需要做的就是保存文件以自动应用整理规则(只要它们是可自动修复的)。

翻译自: https://www.digitalocean.com/community/tutorials/workflow-auto-eslinting