travis ci_如何在Travis CI和ESLint遇到错误之前停止错误

travis ci

A single misplaced comma in a single JSON file can wreck your app. But only if you let it.

单个JSON文件中的单个错位逗号可能会破坏您的应用程序。 但前提是您愿意。

The best way to stop this from happening is to catch that error before it ever gets accepted into your codebase. That means tests. And for file formats like JSON, it also means linting.

阻止此错误发生的最佳方法是在该错误被您的代码库接受之前捕获该错误。 那就是测试。 对于JSON之类的文件格式，这也意味着掉毛。

I’m going to walk you through how to set up Travis CI and ESLint on your GitHub repository, so you can detect linting errors in pull requests, before they ever make it into your codebase.

我将向您介绍如何在GitHub存储库上设置Travis CI和ESLint，以便在拉取请求进入代码库之前，可以检测拉取请求中的掉毛错误。

But first a bit of backstory on how I learned to do this.

但是首先要讲一些关于我如何学会做到这一点的背景知识。

In medical school, they have a learning process called see one, do one, teach one:

在医学院，他们有一个学习过程，称为看，做，教一个 ：

• see someone perform an operation
  看到有人执行手术
• do that operation yourself
  自己做那个手术
• teach someone else how to do that operation
  教别人怎么做

Well, Berkeley Martinez walked me through setting Travis CI + ESLint up on one of our repositories. Then Eric Leung asked me to do it on another repository. And now I’m teaching you how to do it.

好吧， 伯克利·马丁内斯 ( Berkeley Martinez)带领我完成了在我们的存储库之一中设置Travis CI + ESLint的工作。 然后， Eric Leung要求我在另一个存储库上执行此操作。 现在，我正在教您如何做。

See one, do one, teach one.

看到一个，做一个，教一个。

In this case, Eric Leung asked me to configure Travis CI so Mark McEwan can install awesome_bot.

在这种情况下， Eric Leung要求我配置Travis CI，以便Mark McEwan可以安装awesome_bot。

You’ll note that at the bottom of the pull request, GitHub included a little banner encouraging us to set up continuous integration (CI) using their newly-launched Marketplace. This is a perfect place to get started.

您会注意到，在拉取请求的底部，GitHub包含一个小横幅，鼓励我们使用其新推出的Marketplace来建立持续集成(CI)。 这是一个入门的理想场所。

步骤1：在GitHub Marketplace中安装Travis CI (Step 1: Install Travis CI in the GitHub Marketplace)

Travis CI is free and open source. So you can just choose it from the menu and go through the checkout process.

Travis CI是免费和开源的。 因此，您只需从菜单中选择它，然后执行结帐过程即可。

步骤2：建立新的分支 (Step 2: Create a new branch)

If you’ve already cloned the repository to your local computer, you can create a new branch, by opening up the repository in your terminal and typing:

如果已经将存储库克隆到本地计算机，则可以通过在终端中打开存储库并键入以下内容来创建新分支：

git checkout -b feature/add-travis

第3步：创建一个.gitignore文件(如果您还没有一个文件) (Step 3: Create a .gitignore file (if you don’t already have one))

Type this into your terminal:

在您的终端中输入：

touch .gitignore

Then open the .gitignore file in your favorite code editor and add the following line:

然后在您喜欢的代码编辑器中打开.gitignore文件，并添加以下行：

node_modules

Presto. Now you won’t accidentally commit any npm pacakge files to your repository.

Presto。 现在，您将不会意外将任何npm pacakge文件提交到存储库。

步骤4：初始化npm(如果尚未初始化) (Step 4: Initialize npm (if you haven’t already))

You’ll need npm for ESLint. In your terminal, run:

ESLint需要npm。 在您的终端中，运行：

npm init

Now you get to answer a lot of questions. If you’re in a hurry, you can respond these by smacking your enter button repeatedly to accept the default answers.

现在您可以回答很多问题。 如果您很着急，可以通过反复敲击Enter按钮以接受默认答案来做出回应。

This utility will walk you through creating a package.json file.It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fieldsand exactly what they do.

Use `npm install <pkg>` afterwards to install a package andsave it as a dependency in the package.json file.

Press ^C at any time to quit.package name: (how-to-contribute-to-open-source) version: (1.0.0) description: entry point: (index.js) test command: git repository: (https://github.com/FreeCodeCamp/how-to-contribute-to-open-source.git) keywords: author: license: (ISC)About to write to /Users/michaelq/web/how-to-contribute-to-open-source/package.json:

{  "name": "how-to-contribute-to-open-source",  "version": "1.0.0",  "description": "This is a list of resources for people who are new to contributing to open source.",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "repository": {    "type": "git",    "url": "git+https://github.com/FreeCodeCamp/how-to-contribute-to-open-source.git"  },  "author": "",  "license": "BSD-3-Clause",  "bugs": {    "url": "https://github.com/FreeCodeCamp/how-to-contribute-to-open-source/issues"  },  "homepage": "https://github.com/FreeCodeCamp/how-to-contribute-to-open-source#readme"}

Is this ok? (yes)

You now have a package.json file in your repository.

现在，您的存储库中有一个package.json文件。

步骤5：安装ESLint和您的棉绒包装 (Step 5: Install ESLint and your linting packages)

Depending on what types of files are in your repository, you can install a variety of different linting packages. The repository I am working on is How to Contribute to Open Source (give it a ⭐️, ?).

根据存储库中文件的类型，您可以安装各种不同的棉绒包。 我正在使用的存储库是“ 如何为开源做贡献” (给它一个⭐️，？)。

The only files it currently uses are Markdown files, but we’ll inevitably add JSON at some point. So I included both the Markdown and JSON ESLint packages.

它当前使用的唯一文件是Markdown文件，但是我们不可避免地会在某个时候添加JSON。 因此，我同时包含了Markdown和JSON ESLint软件包。

Here’s the command I ran in my terminal to install all of these using npm:

这是我在终端中运行的使用npm安装所有这些命令：

npm install --save-dev eslint eslint-plugin-json eslint-plugin-markdown

Note that the --save-dev part will add these packages to your repository’s package.json file.

请注意，-- --save-dev部分会将这些软件包添加到存储库的package.json文件中。

步骤6：创建和配置您的.eslintrc文件 (Step 6: Create and configure your .eslintrc file)

In your terminal, type:

在您的终端中，键入：

touch .eslintrc

Then open it with your favorite code editor. Here’s what mine looks like for JSON and Markdown:

然后使用您最喜欢的代码编辑器将其打开。 这是JSON和Markdown的外观：

{  "plugins": [    "json",    "markdown"  ]}

步骤7：创建和配置您的.travis.yml文件 (Step 7: Create and configure your .travis.yml file)

In your terminal, type:

在您的终端中，键入：

touch .travis.yml

Then open it with your favorite code editor. Here’s what mine looks like:

然后使用您最喜欢的代码编辑器将其打开。 这是我的样子：

language: node_js

node_js:  - '6'

before_install: if [[ `npm -v` != 3* ]]; then npm i -g npm@3; fi

cache:  directories:    - node_modules

sudo: false

步骤8：更新您的package.json文件 (Step 8: Update your package.json file)

In Step #4, your npm initialize command created a package.json file. When you did so, npm added the following line to the “scripts” object by default:

在步骤＃4中，您的npm initialize命令创建了package.json文件。 这样做时，npm默认将以下行添加到“scripts”对象中：

"echo \"Error: no test specified\" && exit 1"

This line will cause Travis CI’s build to fail. So let’s replace it with something more meaningful.

此行将导致Travis CI的构建失败。 因此，让我们用更有意义的东西代替它。

Here’s what my package.json file looks like after I’ve replaced that line with three new lines, which are in bold:

这是我用三行粗体替换新行后的package.json文件的样子：

{  "name": "how-to-contribute-to-open-source",  "version": "1.0.0",  "description": "This is a list of resources for people who are new to contributing to open source.",  "main": "index.js",  "dependencies": {},  "devDependencies": {    "eslint": "^3.19.0",    "eslint-plugin-json": "^1.2.0",    "eslint-plugin-markdown": "^1.0.0-beta.6"  },  "scripts": {    "lint": "eslint . --ext .json --ext .md",    "pretest": "npm run lint",    "test": "echo \"No tests\""  },  "repository": {    "type": "git",    "url": "git+https://github.com/FreeCodeCamp/how-to-contribute-to-open-source.git"  },  "author": "",  "license": "BSD-3-Clause",  "bugs": {    "url": "https://github.com/FreeCodeCamp/how-to-contribute-to-open-source/issues"  },  "homepage": "https://github.com/FreeCodeCamp/how-to-contribute-to-open-source#readme"}

Note that there are two ways that Travis CI can runs tests. The default is using npm test. But the other way is to use it within the package.json file. You can read more about this here.

请注意，Travis CI可以通过两种方式运行测试。 默认使用npm test 。 但是另一种方法是在package.json文件中使用它。 您可以在此处了解更多信息。

Also note that in your package.json file, you can define scripts that you want npm to run first before it runs other scripts by adding a new script with the pre prefix, like we did here with pretest, which runs before test.

还要注意，在package.json文件中，您可以通过添加带有pre前缀的新脚本来定义要让npm在其他脚本运行之前首先运行的脚本，就像我们在此处使用pretest ，该脚本在test之前运行。

第9步：分段，提交然后推送 (Step 9: Stage, commit, then push)

In your terminal, stage your new files:

在终端中，暂存新文件：

git add .gitignoregit add .travis.ymlgit add .eslintrcgit add package.json

And commit:

并提交：

git commit -m "add and configure Travis CI and ESLint"

Then push to your own branch of the repository on GitHub.

然后在GitHub上推送到您自己的存储库分支。

git push origin feature/add-travis

步骤10：在GitHub的用户界面中打开拉取请求 (Step 10: Open a pull request in GitHub’s user interface)

GitHub has a nice feature where it detects your recent push and offers to help you create the pull request. Navigate to the repository on GitHub and go through its pull request workflow.

GitHub具有一项不错的功能，它可以检测到您最近的推送并提供帮助您创建拉取请求。 导航到GitHub上的存储库，并完成其拉取请求工作流程。

步骤11：验证构建已通过 (Step 11: Verify that the build passed)

OK — the moment of truth!

OK-关键时刻！

On your pull request, Travis CI should immediately get to work. If it fails, it will send you an email saying so:

根据您的请求，Travis CI应该立即开始工作。 如果失败，它将向您发送一封电子邮件，内容如下：

You can view the log and try to figure out why it failed.

您可以查看日志并尝试找出失败的原因。

Once you fix it, it will send you another email like this:

修复后，它将向您发送另一封电子邮件，如下所示：

And the pull request interface will look something like this — indicating that all your tests and ESLint processes have passed.

拉取请求界面将看起来像这样-表示您的所有测试和ESLint进程均已通过。

步骤12：聚会！ (Step 12: Party!)

If you played along at home, congratulations! Grab a beverage of your choosing and pat yourself on the back. You will now be able to detect linting errors in pull requests before you merge them. And your entire team can rest a little easier.

如果您在家玩，那么恭喜您！ 拿起您选择的饮料，然后轻拍自己的背部。 现在，您可以在合并请求之前检测出请求中的掉毛错误。 您的整个团队可以轻松一点。

From here, you can continue gradually add more tests, and Travis CI will always be standing by, ready to dutifully run those tests for you. That’s the power of open source!

从这里开始，您可以继续逐步添加更多测试，Travis CI将始终待命，随时为您尽职地运行这些测试。 这就是开源的力量！

Thanks for reading, and happy coding!

感谢您的阅读，并祝您编程愉快！

I only write about programming and technology. If you follow me on Twitter I won’t waste your time. ?

我只写关于编程和技术的文章。 如果您在Twitter上关注我，我不会浪费您的时间。 ？

翻译自: https://www.freecodecamp.org/news/how-to-stop-errors-before-they-ever-hit-your-codebase-with-travis-ci-and-eslint-7a5a6b1fcd4a/

travis ci