代码编写工具

看一下Prettier，ESLint，Husky，Lint-Staged和EditorConfig (A look at Prettier, ESLint, Husky, Lint-Staged and EditorConfig)

Learning to write good code, but you don’t know where to start… Going through style-guides like Airbnb’s Javascript Style Guide… Trying to write code with best practices...

学习编写好的代码，但您不知道从哪里开始……浏览诸如Airbnb的Javascript样式指南之类的样式指南 ...尝试以最佳实践编写代码...

Removing dead code? Finding unused variables in the code base? Trying to find problematic patterns in your code? Like, does it return or not?

删除无效代码？ 在代码库中找到未使用的变量？ 试图在代码中找到有问题的模式？ 喜欢，它return还是不return ？

Any of this sound familiar?

这些听起来很熟悉吗？

With so much to learn and do all at the same time, it is just so hectic.

同时学习和做很多事情，太忙了。

Are you a Team Lead managing a diverse team? Do you have new developers on the team? Do you worry that they’ll write code not up to standards? Does it take all of your day in code reviews, where the review is more on the code standards rather then the actual logic implementation?

您是管理多元化团队的团队负责人吗？ 您的团队中有新开发人员吗？ 您担心他们会编写不符合标准的代码吗？ 是不是一整天都在代码审查中，而审查更多是在代码标准上，而不是实际的逻辑实现上？

I have been there and done that, and it just is so tiring and hectic.

我去过那里并且做到了，它是如此的累人和忙碌。

Let’s promise to never worry again about how the code should look or getting your entire team to write code in a certain way that is linted and formatted properly.

让我们保证再也不用担心代码的外观，或让您的整个团队以正确的格式和格式编写代码。

Throughout this tutorial, if you get stuck, here is the code repository. Pull requests are welcome, if you have suggestions for improvements.

在本教程中，如果您遇到困难，这里是代码存储库 。 如果您有改进的建议，欢迎提出请求。

This tutorial is catered more towards React applications, but the same can be applied on any web project.

本教程更适合于React应用程序，但同样可以应用于任何Web项目。

Also the editor I am using for this tutorial is VS Code. It’s by Microsoft and ever since they have been into open source, I have been in ❤ with this company (although there was a time when I wasn’t).

我在本教程中使用的编辑器也是VS Code 。 它是由微软提供的 ，自从他们进入开源以来，我就一直在这家公司工作(尽管有时候我不是)。

议程 (Agenda)

• Prettier
  更漂亮
• ESLint
  ESLint
• Automate Format and Lint on Save
  自动格式化并保存时不掉毛
• Husky
  沙哑
• Lint-staged
  毛绒阶段
• With Husky and Lint-staged Combined
  与赫斯基和Lint分阶段合并
• EditorConfig
  编辑器配置

让我们从更漂亮开始 (Let’s start with Prettier)

什么是漂亮？ (What is Prettier?)

Prettier is an opinionated code formatter. It formats code for you in a specific way.

漂亮的是一个自以为是的代码格式化程序。 它以特定方式为您格式化代码。

This GIF pretty much explains it:

这个GIF几乎可以解释这一点：

我们为什么需要它？ (Why do we need it?)

• Cleans up existing code base: on a single command line. Imagine cleaning a code base with over 20,000 lines of code.

  在单个命令行上清理现有的代码库 ： 想象一下用超过20,000行代码清洗代码库。

• Easy to adopt: Prettier uses the least controversial coding style while formatting your code. Since it’s open source, many folks have worked on several iterations of it in fixing some edge cases and polishing the experience.

  易于采用 ：Prettier在格式化代码时使用争议最小的编码样式。 自从它是开源的以来，许多人已经对其进行了多次迭代，以修复一些边缘问题并完善了体验。

• Writing code: What people don’t realize is that they spend a lot of time formatting code and wasting their mental energy doing so. Let Prettier handle it while you focus on the core business logic. On a personal note, Prettier has increased my efficiency by 10%.

  编写代码 ：人们没有意识到的是，他们花费大量时间格式化代码并浪费了精力。 让更漂亮处理它，而你专注于核心业务逻辑。 就个人而言，Prettier使我的效率提高了10％。

• Helping Newbie Developers: If you are a new developer working side by side with great engineers and you want to look cool writing clean code, be smart! Use Prettier.

  帮助新手开发人员 ： 如果您是与优秀工程师并肩工作的新开发人员，并且想要写出干净的代码看起来很酷 ，那就要聪明！ 使用更漂亮。

如何设置？ (How do I set it up?)

Create a folder called app and inside that folder type on the command line:

创建一个名为app文件夹，并在命令行中的该文件夹类型内：

npm init -y

This will create a package.json file for you inside the app folder.

这将在app文件夹内为您创建一个package.json文件。

Now, I am going to use yarn throughout this tutorial, but you can use npm as well.

现在，我将在整个教程中使用yarn ，但是您也可以使用npm 。

Let’s install our first dependency:

让我们安装第一个依赖项：

yarn add --dev prettier

This will install a dev dependency in your package.json which will look like this:

这将在您的package.json安装dev依赖项，如下所示：

I’ll talk in a second what this “prettier”: “prettier — write src/**/*.js” does, but first let’s create a src/ folder inside our app folder. And inside the src/ folder let’s create a file called index.js — you can call it whatever you want.

我将稍后讨论“prettier”: “prettier — write src/**/*.js”作用，但首先让我们在app文件夹中创建一个src/文件夹。 在src/文件夹中，我们创建一个名为index.js的文件-您可以随意调用它。

In the index.js file, paste this code as it is:

在index.js文件中，按原样粘贴以下代码：

So up till now we have a src/app/index.js file with some ugly code written in it.

因此，到目前为止，我们已经在src/app/index.js文件中写入了一些难看的代码。

There are 3 things we can do about it:

我们可以做三件事：

• Manually indent and format this code
  手动缩进并格式化此代码
• Use an automated tool
  使用自动化工具
• Let things go and move on (Please don’t choose this option)
  让事情继续前进(请不要选择此选项)

I am going to go for the second option. So now we have a dependency installed and a Prettier script written in our package.json.

我将选择第二个选项。 所以现在我们安装了一个依赖项，并在package.json编写了一个Prettier脚本。

Let’s create a prettier.config.js file in our root app folder, and add some prettier rules to it:

让我们在根app文件夹中创建一个prettier.config.js文件，并向其中添加一些更漂亮的规则：

printWidth will ensure that your code does not exceed more then 100 characters.

printWidth将确保您的代码不超过100个字符。

singleQuote will convert all your double quotes into single quotes. Read more in the Airbnb JavaScript Style Guide here. This guide is my playbook for writing good code and impressing my colleagues.

singleQuote 会将所有双引号转换为单引号。 在此处阅读《 Airbnb JavaScript样式指南》中的更多内容。 本指南是我编写优秀代码并给同事留下深刻印象的工具书。

trailingComma will ensure there is a dangling comma at the end of last object property. Nik Graf explains this in such a cool way here.

trailingComma 将确保最后一个对象属性的末尾有一个悬挂的逗号。 Nik Graf在这里用一种很酷的方式解释了这一点 。

bracketSpacing prints spaces between object literals:

bracketSpacing 在对象文字之间打印空格：

If bracketSpacing is true - Example: { foo: bar }If bracketSpacing is false - Example: {foo: bar}

jsxBracketSameLine will put &gt; of a multi line JSX element on the last line:

jsxBracketSameLine 将把& GT; 最后一行上的多行JSX元素：

tabWidth specifies the number of spaces per indentation level.

tabWidth 指定每个缩进级别的空格数。

semi if true will print ; at the end statements.

semi 如果为true将打印; 在最后的陈述。

Here is a list of all the options that you can give Prettier.

这是您可以为Prettier提供的所有选项的列表。

Now that we have the configuration set up, let’s talk about this script:

现在我们已经完成了配置，让我们来谈谈这个脚本：

“prettier”: “prettier  — write src/**/*.js”

In the script above, I am running prettier and telling it to find all .js files in my src/ folder. The --write flag tells prettier to save the formatted files as it goes through each file and finds any anomaly in the code formation.

在上面的脚本中，我正在运行prettier并告诉它在我的src/文件夹中找到所有.js文件。 --write标志告诉prettier用户在格式化每个文件时保存格式化的文件，并在代码格式中查找任何异常。

Let’s run this script in your terminal:

让我们在终端中运行此脚本：

yarn prettier

This is what happens to my code when I run it:

这是我运行代码时发生的事情：

If you got stuck, feel free to have a look at the repository for this.

如果遇到问题，请随时查看存储库 为了这。

This pretty much concludes our Prettier discussion. Let’s talk about linters.

这几乎总结了我们的漂亮 讨论。 让我们谈谈短绒。

ESLint (ESLint)

什么是代码短绒？ (What is a code linter?)

Code linting is a type of static analysis that is frequently used to find problematic patterns or code that doesn’t adhere to certain style guidelines. There are code linters for most programming languages, and compilers sometimes incorporate linting into the compilation process. — ESLint

代码棉绒是一种静态分析，通常用于查找有问题的模式或不符合某些样式准则的代码。 大多数编程语言都有代码同步器，并且编译器有时会将棉绒合并到编译过程中。 — ESLint

为什么我们需要一个JavaScript代码？ (Why do we need one for JavaScript?)

Since JavaScript is dynamic and a loosely typed language, it is prone to developer errors. Without the benefit of a compilation process, .js files are typically executed in order to find syntax or other errors.

由于JavaScript是动态的并且是一种松散类型的语言 ，因此它容易出现开发人员错误。 如果没有编译过程的好处，通常会执行.js文件以查找语法或其他错误。

Linting tools like ESLint allow developers to find problems with their JavaScript code without executing it.

ESLint等整理工具 允许开发人员在不执行JavaScript代码的情况下发现问题。

是什么使ESLint如此特别？ (What makes ESLint so special?)

Good question! Everything in ESLint is pluggable. You can add rules on run time — the rules and formatter don’t have to be bundled to be used. Every linting rule you add is stand alone, any rule can be turned on or off. Each rule can be set to a warning or an error. Your choice.

好问题！ ESLint中的所有内容都是可插入的。 您可以在运行时添加规则-不必捆绑使用规则和格式化程序。 您添加的每条棉绒规则都是独立的，任何规则都可以打开或关闭。 每个规则都可以设置为警告或错误。 你的选择。

Using ESLint, you get complete customization of how you want your style guide to look.

使用ESLint，您可以完全自定义样式指南的外观。

Now there are 2 popular style guides out there at the moment:

现在，目前有2种流行风格指南：

• Google JavaScript Style Guide

  Google JavaScript样式指南

• Airbnb JavaScript Style Guide

  Airbnb JavaScript样式指南

I have personally been using Airbnb’s Style Guide. This was recommended to me by my head of engineering in my last firm when I was starting out in my professional career, and this has been the most valuable asset at my disposal.

我个人一直在使用Airbnb的风格指南。 在我职业生涯刚起步时，这是我上任公司的工程主管向我推荐的，这是我可以使用的最有价值的资产。

This style guide is actively maintained — check out their GitHub repo. I’ll be using the rule sets inspired by Airbnb’s Style Guide throughout this tutorial. So let’s begin.

该样式指南已得到积极维护—请查看其GitHub repo 。 在整个教程中，我将使用受Airbnb风格指南启发的规则集。 因此，让我们开始吧。

Let’s first update our package.json file:

让我们先更新我们的package.json文件：

Before heading forward with the configuration, I strongly believe that people should know what goes into their dependencies. So let’s talk about what each of these package does and then we can move forward with the configurations.

在继续进行配置之前，我坚信人们应该了解其依赖项中包含的内容。 因此，让我们讨论一下这些软件包的每个功能，然后我们就可以继续进行配置了。

babel-eslint: this package allows you to use lint on all Babel goodness easily. You don’t necessarily need this plugin if you are not using Flow or experimental features that are not yet supported by ESLint.

babel-eslint ： 该软件包使您可以轻松地在所有Babel产品上使用皮棉。 如果您没有使用ESLint尚不支持的Flow或实验性功能，则不一定需要此插件。

eslint: this is the main tool that is needed for linting your code.

eslint ： 这是整理代码所需的主要工具。

eslint-config-airbnb: this package provides all the Airbnb’s ESLint configuration as an extensible shared configuration, which you can modify.

eslint-config-airbnb ：该软件包提供所有Airbnb的ESLint配置作为可扩展的共享配置，您可以对其进行修改。

eslint-plugin-babel: An eslint plugin companion to babel-eslint. babel-eslint does a great job at adapting eslint for use with Babel.

eslint-plugin-babel ： eslint插件伴侣， babel-eslint 。 babel-eslint在使eslint与Babel eslint使用babel-eslint做得非常出色。

eslint-plugin-import: This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names. Read more.

eslint-plugin-import ： 该插件旨在支持ES2015+ (ES6+) import/export syntax,并防止文件路径和导入名称拼写错误的问题。 。

eslint-plugin-jsx-a11y: linting rules in place for accessibility rules on JSX elements. Because accessibility is important!

eslint-plugin-jsx-a11y ： 为JSX元素上的可访问性规则制定了规则。 因为可访问性很重要！

eslint-plugin-prettier: This helps ESLint work smoothly with Prettier. So when Prettier formats code, it does it keeping our ESLint rules in mind.

eslint-plugin-prettier ： 这有助于ESLint与Prettier顺利合作。 因此，当Prettier格式化代码时，它会牢记我们的ESLint规则。

eslint-plugin-react: React-specific linting rules for ESLint.

eslint-plugin-react ： ESLint的特定于React的lint规则。

Now this tutorial doesn’t talk much about unit testing for Jest/Enzyme. But if you are using it, let’s add linting rules for them as well:

现在，本教程不再讨论Jest / Enzyme的单元测试。 但是，如果您正在使用它，我们也为它们添加掉毛规则：

eslint-config-jest-enzyme: This helps with React- and Enzyme-specific variables which are globalized. This lint config lets ESLint know about those globals and not warn about them — like the assertions it and describe.

eslint-config-jest-enzyme ： 这有助于全球化的特定于React和酶的变量。 通过该lint config，ESLint可以知道那些全局变量，而不会对其发出警告-就像it的声明和describe 。

eslint-plugin-jest: ESLint plugin for Jest.

eslint-plugin-jest ： Jest的ESLint插件。

husky: More on this later when in the automation section.

husky ： 稍后在自动化部分中将对此进行详细介绍。

lint-staged: More on this later when in the automation section.

lint-staged: 稍后在自动化部分中将对此进行详细介绍。

Now that we have a basic understanding, let’s begin;

现在我们已经有了基本的了解，让我们开始吧；

Create a .eslintrc.js file in your root app/ folder:

在您的根app/文件夹中创建一个.eslintrc.js文件：

Also add a .eslintignore file in your root app/ directory:

还要在您的根app/目录中添加一个.eslintignore文件：

/.git
/.vscode
node_modules

Let’s start by discussing what a .eslintrc.js file does.

让我们开始讨论.eslintrc.js文件的作用。

Let’s break it down:

让我们分解一下：

module.exports = { env:{}, extends: {}, plugin: {}, parser: {}, parserOptions: {}, rules: {},
};

• env: An environment defines global variables that are predefined. The available environments — in our case it is es6, browser and node.

  env: 环境定义了预定义的全局变量。 可用环境-在我们的例子中是es6 ， browser和node 。

  env: An environment defines global variables that are predefined. The available environments — in our case it is es6, browser and node. es6 will enable all ECMAScript 6 features except for modules (this automatically sets the ecmaVersion parser option to 6).

  env: 环境定义了预定义的全局变量。 可用环境-在我们的例子中是es6 ， browser和node 。 es6 将启用除模块以外的所有ECMAScript 6功能(这ecmaVersion解析器选项自动设置为6)。

  env: An environment defines global variables that are predefined. The available environments — in our case it is es6, browser and node. es6 will enable all ECMAScript 6 features except for modules (this automatically sets the ecmaVersion parser option to 6). browser will add all browser global variables such as Windows.

  env: 环境定义了预定义的全局变量。 可用环境-在我们的例子中是es6 ， browser和node 。 es6 将启用除模块以外的所有ECMAScript 6功能(这ecmaVersion解析器选项自动设置为6)。 browser 将添加所有浏览器全局变量，例如Windows 。

  env: An environment defines global variables that are predefined. The available environments — in our case it is es6, browser and node. es6 will enable all ECMAScript 6 features except for modules (this automatically sets the ecmaVersion parser option to 6). browser will add all browser global variables such as Windows. node will add Node global variables and Node scoping, such as global. You can read more on specifying environments.

  env: 环境定义了预定义的全局变量。 可用环境-在我们的例子中是es6 ， browser和node 。 es6 将启用除模块以外的所有ECMAScript 6功能(这ecmaVersion解析器选项自动设置为6)。 browser 将添加所有浏览器全局变量，例如Windows 。 node 将添加Node全局变量和Node作用域，例如global 。 您可以阅读有关指定环境的更多信息。

• extends: An array of strings — each additional configuration extends the preceding configurations.

  extends: 字符串数组-每个其他配置都扩展了前面的配置。

  Right now we are using the linting rules by

  现在，我们正在使用

  airbnb which are extended to jest and then extended to jest-enzyme.

  airbnb扩展为jest ，然后扩展为jest-enzyme 。

• plugins: plugins are basically linting rules that we want to use.

  plugins: 插件基本上是我们要使用的规则。

  Right now we are using

  现在我们正在使用

  babel, import, jsx-a11y, react, prettier, all of which I have explained above.

  我在上面已经解释了babel, import, jsx-a11y, react, prettier 。

• parser: By default ESLint uses Espree, but since we are using babel, we need to use Babel-ESLint.

  parser: 默认情况下，ESLint使用Espree ，但是由于我们使用的是babel ，因此我们需要使用Babel-ESLint 。

• parserOptions: When we change the default parser for Espree to babel-eslint , we need to specify parserOptions — it is required.

  parserOptions: 当我们将Espree的默认解析器Espree为babel-eslint ，我们需要指定parserOptions －这是必需的。

  In the options I tell ESLint that

  在选项中，我告诉ESLint

  ecmaVersion is going to lint version 6. Since we are writing our code in an EcmaScript module and not a script we specify sourceType as module.

  ecmaVersion将使用第6版。 由于我们是在EcmaScript module而不是script中编写代码，因此我们将sourceType指定为module 。

  Since we are using React which brings in JSX, in

  由于我们使用的是React，它引入了JSX，因此

  ecmaFeatures I pass it an option of jsx and set it to true.

  ecmaFeatures我将它传递给jsx选项，并将其设置为true 。

• rules: This is the part which I love the most about ESLint, the customization.

  rules: 这是我最喜欢ESLint(定制)的部分。

  All the rules that we have extended and added with our plugins, we can change or override.

  我们扩展并添加了插件的所有规则，我们可以更改或覆盖。

  rules is the place where you do it. I have already put comments in the Gist against each rule and for your understanding.

  rules是您执行操作的地方。 我已经针对每条规则和您的理解在要点中发表了评论。

Now that’s cleared up, let’s talk about .eslintignore

现在已经清除了，让我们谈谈.eslintignore

.eslintignore takes a list of paths that we want ESLint to not lint. Here I specify only three:

.eslintignore 列出了我们希望ESLint不掉毛的路径的列表。 在这里，我仅指定三个：

• /.git I don’t want my Git-related files to be linted.

  /.git我不想/.git与Git相关的文件。

• /.vscode Since I am using VS Code, this editor comes in with it’s own configuration that you can set for each project. I don’t want my configuration(s) to be linted. I use VS Code because it is lightweight and open source.

  /.vscode由于我使用的是VS Code，因此此编辑器附带了它自己的配置，可以为每个项目进行设置。 我不希望我的配置被删除。 我使用VS Code，因为它是轻量级的且开源的。

• node_modules I don’t want my dependencies to get linted. So I have added this to the list.

  node_modules我不希望依赖项被限制。 因此，我已将此添加到列表中。

Now that we are done with that, let’s talk about the newly added scripts to our package.json

现在我们已经完成了，让我们来谈谈package.json新添加的脚本package.json

"lint": "eslint --debug src/"
"lint:write": "eslint --debug src/ --fix"

• $ yarn lint running this command, it will go through all of your files in src/ and will give you a detail log in each file where it finds errors, which you can then go in manually and correct them out.

  $ yarn lint运行此命令，它将遍历src/所有文件，并且会在每个文件中找到错误的详细日志，您可以手动查找并更正错误。

• $ yarn lint:write running the command, it will do the same as what the above command does. The only addition is that if it can correct any of the errors it sees, it is going to correct them and try to remove as much code smell from your code as it can.

  $ yarn lint:write运行命令，它将和上面的命令一样。 唯一的补充是，如果它可以纠正所看到的任何错误，它将对其进行纠正，并尝试从代码中消除尽可能多的代码味道。

If you get stuck, feel free to have a look at the repository for this.

如果遇到问题，请随时查看存储库 为了这。

That was a bit hectic and if you have followed along so far:

这有点忙，如果您到目前为止一直在遵循：

让我们自动化更多 (Let’s Automate A Bit More)

So far we have prettier and eslint setup, but every time we have to run a script. Let’s do something about it.

到目前为止，我们已经完成了prettier和eslint设置，但是每次我们都必须运行脚本时。 让我们做些事情。

• Format and Lint Code on hitting ctrl+s in your editor.

  在编辑器中按ctrl+s格式和Lint代码。

• Every time you commit your code, execute a pre-command automatically that lints and formats your code.
  每次提交代码时，都会自动执行整理和格式化代码的预命令。

保存时格式化和整理代码 (Format and Lint Code On Save)

For this you need to use an editor like VS Code:

为此，您需要使用VS Code这样的编辑器：

• Install a plugin called ESLint extension.

  安装一个名为ESLint扩展的插件。

  Install a plugin called ESLint extension.Download here or press ctrl+shift+x in your VS Code editor. This will open up the extensions module. There, search type eslint. A list of plugins will appear. Install the one by Dirk Baeumer. Once that is installed hit the reload button to restart your editor.

  安装一个名为ESLint扩展的插件。 在此处下载或在VS代码编辑器中按ctrl+shift+x 。 这将打开扩展模块。 在那里，搜索类型为eslint 。 出现插件列表。 由Dirk Baeumer安装一个。 安装完成后，点击reload按钮以重新启动编辑器。

Once you have this plugin installed, in your root app/ folder create a folder called .vscode/ — the (dot) is important in the filename.

安装此插件后，在根app/文件夹中创建一个名为.vscode/的文件夹-(点)在文件名中很重要。

Inside the folder create a settings.json file like below:

在文件夹内创建一个settings.json文件，如下所示：

• editor.formatOnSave I have set the value to false here because I don’t want the default editor configuration for file format to conflict with ESLint and Prettier.

  editor.formatOnSave我在这里将值设置为false ，因为我不希望文件格式的默认编辑器配置与ESLint和Prettier冲突。

• eslint.autoFixOnSave I have set the value to true here because I want the installed plugin to work every time I hit save. Since ESLint is configured with Prettier configurations, every time you hit save it will format and lint your code.

  eslint.autoFixOnSave我已将值设置为true 这里是因为我希望安装的插件在每次点击保存时都能正常工作。 自ESLint 配置了漂亮的 配置，每次您点击save它都会格式化并整理您的代码。

Also important thing to note here is that when you run the scriptyarn lint:write now it will lint and prettify your code on the same go.

这里还要注意的重要一点是，当您现在运行脚本yarn lint:write ，它将同时进行lint和美化您的代码。

Just imagine if you where handed a code base of 20k lines of code to audit and improve. Now imagine doing it manually. Improving unknown code. Now imagine doing it with a single command. The manual approach might take 30 days...while the automatic approach will take you 30 seconds.

试想一下，如果您将20k行代码的代码库交给审计和改进。 现在想象一下手动进行。 改进未知代码。 现在，想象用一个命令来完成它。 手动方法可能需要30天...而自动方法则需要30秒。

So the scripts are set up, and every time you hit save the editor will do the magic for you for that specific file. But not everyone in your team will opt for VS Code and that’s okay. So let’s automate a bit more.

这样就建立了脚本，每次您点击save 编辑器将为您处理该特定文件。 但是并不是您团队中的每个人都会选择VS Code，这没关系。 因此，让我们进一步自动化。

沙哑 (Husky)

哈士奇是什么？ (What is husky?)

Husky basically let’s you Git hook. That means you can perform some certain actions when you are about to commit or when you are about to push code to a branch.

赫斯基基本上让您Git着迷。 这意味着您将要提交或将代码推送到分支时可以执行某些特定操作。

All you have to do is install Husky:

您所要做的就是安装Husky：

yarn add --dev husky

and in your package.json file add the snippet:

并在您的package.json文件中添加代码段：

"husky": {    "hooks": {      "pre-commit": "YOUR_COMMAND_HERE", "pre-push": "YOUR_COMMAND_HERE"   }  
},

So every time you commit or push, it will execute a certain script or command — like run test cases or format your code.

因此，每次提交或推送时，它将执行特定的脚本或命令-例如运行测试用例或格式化代码。

You can read more on Husky here.

您可以在此处阅读有关赫斯基的更多信息 。

毛绒阶段 (Lint-staged)

什么是Lint分阶段的？ (What is Lint-staged?)

Lint-staged helps you run linters on staged files, so that bad code doesn’t get pushed to your branch.

Lint暂存可以帮助您在暂存的文件上运行linters，这样就不会将不良代码推送到您的分支机构中。

为什么要上绒呢？ (Why Lint-staged?)

Linting makes more sense when run before committing your code. By doing so you can ensure no errors go into the repository and enforce code style. But running a lint process on a whole project is slow and linting results can be irrelevant. Ultimately you only want to lint files that will be committed.

在提交代码之前运行时，linting更有意义。 这样，您可以确保没有错误进入存储库并强制执行代码样式。 但是，在整个项目上运行皮棉过程的速度很慢，棉绒的结果可能无关紧要。 最终，您只希望处理将提交的文件。

This project contains a script that will run arbitrary shell tasks with a list of staged files as an argument, filtered by a specified glob pattern. You can read more here.

该项目包含一个脚本，该脚本将运行任何shell任务，并以指定的glob模式过滤后的一系列暂存文件作为参数。 您可以在这里内容 。

All you have to is install Lint-staged:

您所要做的就是安装Lint-staged：

yarn add --dev lint-staged

then in your package.json file add this:

然后在您的package.json文件中添加以下内容：

"lint-staged": {    "*.(js|jsx)": ["npm run lint:write", "git add"]  
},

What this command will do is run the lint:write command first and then add it in the staging area. It will run this command for only .js & .jsx files, but you can do the same for other files as well if you want.

该命令将首先执行lint:write命令，然后将其添加到暂存区域中。 它将仅对.js和.jsx文件运行此命令，但是如果需要，您也可以对其他文件执行相同的操作。

与H usky和L int-staged合并 (With Husky and Lint-staged combined)

Every time your commit your code, before committing your code, it will run a script called lint-staged which will run npm run lint:write which will lint and format your code — then add it to the staging area and then commit. Cool right?!

每次提交代码时，在提交代码之前，它将运行一个名为lint-staged的脚本，该脚本将运行npm run lint:write它将对代码进行格式化和格式化—然后将其添加到登台区域，然后提交。 酷吧？！

Your final package.json file should look like this. This is the same snippet I shared above:

您的最终package.json文件应如下所示。 这是我上面分享的相同代码段：

Now every time you do this:

现在，每次执行此操作时：

$ git add .$ git commit -m "some descriptive message here"

It will lint and format your code based on all the rules put in the.eslintrc.js file. With this you can be sure that no bad code ever gets pushed to production.

它将根据.eslintrc.js文件中放置的所有规则对代码进行整理和格式化。 这样，您可以确保不会将任何不良代码推送到生产环境中。

With this section concluded, you now have prettier, eslint and husky integrated in your code base.

本节结束后，你现在有prettier ， eslint和husky集成在你的代码库。

让我们谈谈EditorConfig (Let’s talk about EditorConfig)

First create a .editorconfig file in your root app/ folder, and in that file paste the code below:

首先在您的根app/文件夹中创建一个.editorconfig文件，然后在该文件中粘贴以下代码：

那么，EditorConfig是什么？ (So what is EditorConfig?)

So not everyone is going to use VS Code — and you can’t enforce it, nor should you. In order to keep everyone on the same page in terms of what the defaults, such as tab space or line ending should be, we use.editorconfig. This actually helps enforce some certain rule sets.

因此，并不是每个人都将使用VS Code-您不能强制执行，也不应该。 为了使每个人都可以使用默认值(例如， tab space或line ending在同一页面上，我们使用.editorconfig 。 这实际上有助于实施某些特定规则集。

Here is the list of all the editors that support EditorConfig. The list of editors includes Web storm, App code, Atom, eclipse, emacs, bbedit and so many more.

这是所有支持EditorConfig的编辑器的列表。 编辑器列表包括Webstorm，App代码，Atom，eclipse，emacs，bbedit等。

The above configuration will do the following:

上面的配置将执行以下操作：

• trim trailing white spaces from .md & .js files

  修剪.md和.js文件中的尾随空格

• set indent style to space instead of tab

  将缩进样式设置为space而不是tab

• indent size to 2

  缩进到2

• end of line to be lf so that everyone, irrespective of their OS, has the same end of line. Read more here.

  行尾应为lf以便每个人(无论其操作系统)都具有相同的行尾。 在这里 。

• there should be a new line at end of file
  文件末尾应该有一个新行

• and the max line length should be 100 chars

  并且最大行长应为100字符

With all this configuration done and in place, you are now ready. If you want to see the source code here it is.

完成所有配置并就位后，您就可以准备就绪。 如果要查看源代码 在这里。

Also pull requests are welcome if you feel like you can improve anything in this repository.

如果您感觉可以改进此存储库中的任何内容，也欢迎请求请求。

If you liked my article, you should also check out my other article: How to combine Webpack 4 and Babel 7 to create a fantastic React app in which I talk about setting up Webpack and Babel for React.

如果您喜欢我的文章，还应该查看我的其他文章： 如何将Webpack 4和Babel 7结合在一起以创建出色的React应用 在其中，我讨论了为React设置Webpack和Babel。

翻译自: https://www.freecodecamp.org/news/these-tools-will-help-you-write-clean-code-da4b5401f68e/

代码编写工具