您努力编写整洁的代码，但不知道从哪里开始...阅读了Airbnb的样式指南，尝试遵循领先专家的实用建议...是否必须删除未使用的代码？ 必须寻找不必要的变量？ 您是否要确定程序中使用的错误模式？ 例如-您想了解，阅读某个函数代码的复杂性，无论该函数是否返回某些内容。 听起来很熟悉？ 问题是程序员很难做很多事情并且学到很多东西。
也许您是一个团队负责人，在这个团队的领导下，一个不同级别的开发人员团队正在工作？ 您的团队中有新人吗？ 他们编写的代码不符合您的标准是否会困扰您？ 当这些检查主要涉及对标准的合规性而不是与程序逻辑的合规性时，您的日子是否过去了？
该材料的作者说，他面临着刚才提出的问题所涉及的所有问题。 他面临的是疲惫和疲惫。 在这里，他想谈一谈工具，正确使用这些工具可以使我们解决上述问题。
即，这里我们将讨论诸如Prettier，ESLint，Husky，Lint-Staged，EditorConfig之类的工具，以及有关格式化和代码插入的自动化。 这些材料主要集中在React开发上，但是这里讨论的原理可以应用于任何Web项目。
这是一个存储库，除其他外，这里对这里讨论的内容进行了编译。
更漂亮
Prettier是一种代码格式化工具，旨在使用硬编码规则来设计程序。 它会自动格式化代码。 这是它的外观。
更漂亮的代码遵循规则▍漂亮的优势
以下是Prettier的功能，使我们可以讨论此工具的实用性：
- 整理现有的代码库。 使用Prettier，您只需一个命令就可以做到这一点。 手动处理大量代码将花费更多时间。 例如，想象一下手动格式化20,000行代码所需的劳动。
- 漂亮更容易实现。 格式化代码时，Prettier使用“平均”，争议最小的样式进行样式设置。 由于该项目是开源的，因此许多人对此做出了贡献，对其进行了改进并消除了尖锐的角落。
- 使用“更漂亮”，您可以专注于编写代码，而不是对其进行格式化。 许多人根本没有意识到格式化代码花费了多少时间和精力。 使用Prettier，您无需考虑格式化，而可以进行编程。 以我为例，得益于Prettier，工作效率提高了10％。
- 漂亮的东西可以帮助初学者。 如果您是由经验丰富的专业人员在同一团队中工作的初学者程序员，并且希望在他们的背景下看起来很有价值，那么Prettier将为您提供帮助。
▍配置更漂亮
这是在新项目中使用Prettier的方法。 创建
app文件夹，然后在命令行上运行以下命令：
npm init -y
借助此命令，
npm通过在其中创建
package.json文件在
app文件夹中初始化了一个新项目。
我将在这种材料中使用
yarn ，但是在这里您可以使用
npm 。 漂亮的人也可以连接到现有项目。
prettier软件包安装为我们项目的开发依赖项：
yarn add
由于此命令，
package.json依赖项将添加到
package.json ，如下所示：
{ "name": "react-boiler-plate", "version": "1.0.0", "description": "A react boiler plate", "main": "src/index.js", "author": "Adeel Imran", "license": "MIT", "scripts": { "prettier": "prettier --write src/**/*.js" }, "devDependencies": { "prettier": "^1.14.3" } }
稍后，我们将讨论
"prettier": "prettier — write src/**/*.js"行的含义
"prettier": "prettier — write src/**/*.js" 。 同时，在
app文件夹中创建
src文件夹。 在此文件夹中，创建
index.js文件，尽管您可以随意命名。
我们将以下代码添加到该文件中（采用难看的形式）：
let person = { name: "Yoda", designation: 'Jedi Master ' }; function trainJedi (jediWarrion) { if (jediWarrion.name === 'Yoda') { console.log('No need! already trained'); } console.log(`Training ${jediWarrion.name} complete`) } trainJedi(person) trainJedi({ name: 'Adeel', designation: 'padawan' });
因此，目前，我们有
src/app/index.js ，其中包含一个设计不良的代码。
如何解决？ 有三种方法可以处理格式错误的代码：
- 手动格式化此代码。
- 使用自动化工具。
- 保持原样继续工作（我请您不要选择这种方法）。
我将选择第二个选项。 现在在我们的项目中有一个相应的依赖项，此外，在
package.json文件的
scripts部分中，有关于Prettier的记录。 显然，我们将使用此工具来格式化代码。 为此，请在
app文件夹中创建
prettier.config.js文件，并在其中添加Prettier的规则：
module.exports = { printWidth: 100, singleQuote: true, trailingComma: 'all', bracketSpacing: true, jsxBracketSameLine: false, tabWidth: 2, semi: true, };
让我们分析以下规则：
printWidth: 100不能超过100个字符。singleQuote: true所有双引号将转换为单引号。 有关更多详细信息，请参见《 Airbnb样式指南》 。 我真的很喜欢本指南，我用它来提高代码质量。trailingComma: 'all' all'-在对象的最后一个属性之后提供逗号。 这是一篇关于该主题的好文章。bracketSpacing: true负责在对象的正文和对象常量中的花括号之间插入空格。 如果将此属性设置为true ，则使用对象文字声明的对象将如下所示： { foo: bar } 。 如果将其设置为false ，则此类构造将如下所示： {foo: bar} 。jsxBracketSameLine: false由于此规则，多行JSX元素中的>符号将放置在最后一行。 如果此规则设置为true ，则代码如下所示：
<button className="prettier-class" id="prettier-id" onClick={this.handleClick}> Click Here </button>
如果将其设置为
false将发生以下情况：
<button className="prettier-class" id="prettier-id" onClick={this.handleClick} > Click Here </button>
tabWidth: 2设置每个对齐级别的空格数。semi: true如果此规则设置为true ，则在表达式的末尾添加分号。
在此处找到所有更漂亮的规则。
现在已经配置了规则，让我们讨论一下此脚本：
"prettier": "prettier — write src/**/*.js"
由于有了这种设计，Prettier可以启动并在
src文件夹中找到所有
.js文件。
--write标志告诉他在处理格式化文件时保存它们，并更正其中发现的格式化错误。
从命令行运行脚本：
yarn prettier
之后就是上面显示的格式不良的代码。
使用Prettier格式化代码的结果在此基础上，我们将假设有了Prettier，我们就知道了。 让我们谈谈短毛绒。
ESLint
Linting是一种静态代码分析类型，通常用于查找有问题的设计模式或未遵循某些样式准则的代码。
有针对大多数编程语言设计的lint，有时编译器在编译代码的过程中包含lint。 棉绒的定义来自开源JavaScript JavaScript ESLint的开源信息
页面 ，我们将在后面进行讨论。
hy为什么我需要一个lint用于JavaScript？
由于
JavaScript是具有弱类型的动态编程语言，因此用它编写的代码很容易出现开发人员所犯的错误。 JavaScript是一种解释性语言，因此通常仅在运行此代码后才能检测到代码中的语法和其他错误。
像
ESLint一样，
Linters使开发人员无需启动即可发现代码中的问题。
ES为什么ESLint是特殊工具？
本部分的标题中有一个很好的问题。 这里的重点是ESLint支持插件。 因此，代码验证规则不应是一个整体的程序包。 您需要的一切都可以根据需要连接。 添加到系统中的每个皮棉规则都是自治的，可以独立于其他规则打开或关闭它。 可以根据开发人员的需求为每个规则分配警报级别-这可以是警告（警告）或错误（错误）。
使用ESLint时，您将使用完全可定制的系统，该系统可以反映出您对正确代码的外观的理解，并捕获您遵循的规则集。
在现有的JavaScript样式指南中，以下非常流行：
如前所述，我使用了Airbnb样式指南。 我的职业生涯始于公司的经理向我提供了这份文件的建议，我认为这份风格指南是我最有价值的资产。
本指南已得到积极维护-查看其在GitHub上的
存储库 。 在这里，我将基于一组规则。
现在让我们处理
package.json文件，向其中添加一些依赖项：
{ "name": "react-boiler-plate", "version": "1.0.0", "description": "A react boiler plate", "main": "src/index.js", "author": "Adeel Imran", "license": "MIT", "scripts": { "lint": "eslint --debug src/", "lint:write": "eslint --debug src/ --fix", "prettier": "prettier --write src/**/*.js" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.(js|jsx)": ["npm run lint:write", "git add"] }, "devDependencies": { "babel-eslint": "^8.2.3", "eslint": "^4.19.1", "eslint-config-airbnb": "^17.0.0", "eslint-config-jest-enzyme": "^6.0.2", "eslint-plugin-babel": "^5.1.0", "eslint-plugin-import": "^2.12.0", "eslint-plugin-jest": "^21.18.0", "eslint-plugin-jsx-a11y": "^6.0.3", "eslint-plugin-prettier": "^2.6.0", "eslint-plugin-react": "^7.9.1", "husky": "^1.1.2", "lint-staged": "^7.3.0", "prettier": "^1.14.3" } }
在讨论如何使用此配置之前，我想先谈谈添加到
package.json的项目依赖项。 我相信在使用某些依赖项之前，您应该知道它们扮演的角色。
因此，我们将讨论此处介绍的软件包的作用：
babel-eslint允许您使用棉绒将其应用于Babel提供的所有产品。 如果您不使用ESLint尚不支持的Flow或实验性功能，则不需要此插件。eslint是用于编码代码的主要工具。eslint-config-airbnb提供Airbnb规则作为可修改的配置。eslint-plugin-babel是一个ESLint插件，是对babel-eslint补充。 它重新设计了规则，这些规则在使用babel-eslint时会在处理实验特征时引起问题。eslint-plugin-import 此软件包支持链接新鲜的import/export语法结构，并有助于防止与文件路径和导入模块名称的拼写错误有关的问题。eslint-plugin-jsx-a11y提供有关残疾人使用JSX元素的规则。 Web可访问性非常重要。eslint-plugin-prettier prettier-帮助ESLint和Prettier一起工作。 看起来像这样：当Prettier格式化代码时，它会考虑ESLint规则。eslint-plugin-react react-包含为React设计的ESLint规则。
在本文中，我们不是在讨论代码测试，而是在上面的
package.json ，有一些依赖项设计用于使用
Jest / Enzyme进行单元测试。 现在，如果您决定使用这些工具进行测试，请参阅相关软件包的说明。
eslint-config-jest-enzyme此软件包专用于使用jest-environment-enzyme ，这会导致React和Enzyme变量是全局变量。 因此，ESLint不会发出有关此类变量的警告。eslint-plugin-jest — jest-用于Jest的ESlint插件。
文件中还有几个软件包，我们将在后面讨论自动化问题。 这是
husky ，是
husky 。
现在，我们已经大致讨论了我们的工具，我们将继续努力。
在
app文件夹中创建
.eslintrc.js文件：
module.exports = { env: { es6: true, browser: true, node: true, }, extends: ['airbnb', 'plugin:jest/recommended', 'jest-enzyme'], plugins: [ 'babel', 'import', 'jsx-a11y', 'react', 'prettier', ], parser: 'babel-eslint', parserOptions: { ecmaVersion: 6, sourceType: 'module', ecmaFeatures: { jsx: true } }, rules: { 'linebreak-style': 'off', // Windows. 'arrow-parens': 'off', // prettier 'object-curly-newline': 'off', // prettier 'no-mixed-operators': 'off', // prettier 'arrow-body-style': 'off', // - ? 'function-paren-newline': 'off', // prettier 'no-plusplus': 'off', 'space-before-function-paren': 0, // prettier 'max-len': ['error', 100, 2, { ignoreUrls: true, }], // airbnb 'no-console': 'error', // airbnb 'no-alert': 'error', // airbnb 'no-param-reassign': 'off', // - ? "radix": "off", // parseInt, parseFloat radix . . 'react/require-default-props': 'off', // airbnb 'react/forbid-prop-types': 'off', // airbnb 'react/jsx-filename-extension': ['error', { extensions: ['.js'] }], // airbnb .jsx 'prefer-destructuring': 'off', 'react/no-find-dom-node': 'off', // 'react/no-did-mount-set-state': 'off', 'react/no-unused-prop-types': 'off', // 'react/jsx-one-expression-per-line': 'off', "jsx-a11y/anchor-is-valid": ["error", { "components": ["Link"], "specialLink": ["to"] }], "jsx-a11y/label-has-for": [2, { "required": { "every": ["id"] } }], // htmlFor label 'prettier/prettier': ['error'], }, };
现在，将
.eslintignore文件添加到
app文件夹：
/.git /.vscode node_modules
现在让我们讨论
.eslintrc.js文件的
.eslintrc.js ，以及其中显示的
.eslintrc.js的含义。
该文件具有以下结构：
module.exports = { env:{}, extends: {}, plugin: {}, parser: {}, parserOptions: {}, rules: {}, };
考虑由具有相应名称的对象表示的该文件的块：
env允许您指定计划检查其代码的环境列表。 在我们的例子中， es6 ， browser和node属性设置为true 。 es6参数包括ES6功能（模块除外）（此功能在parserOptions块中将ecmaVersion参数自动设置为6 ）。 browser参数browser全局浏览器变量，例如Windows 。 node参数添加全局Node.js环境变量和范围，例如global 。 有关环境的详细信息，请参见此处 。extends -是具有配置的线的阵列，每个其他配置都扩展前一个配置。 airbnb使用Airbnb airbnb规则，将其扩展为jest ，然后扩展为jest-enzyme 。plugins -这是我们要使用的整理规则。 我们应用了已经讨论过的规则babel ， import ， jsx-a11y ， react ， jsx-a11y 。parser -ESLint默认使用Espree parser ，但是由于我们使用Babel，因此需要使用Babel-ESLint 。parserOptions由于我们将标准解析器更改为babel-eslint ，因此我们还需要在此块中设置属性。 ecmaVersion属性设置为6指示ESLint将检查ES6代码。 由于我们正在EcmaScript模块中编写代码，因此sourceType属性设置为module 。 最后，由于我们使用React，这意味着使用JSX，因此jsx键设置为true的对象将写入ecmaFeatures属性。rules -我最喜欢.eslintrc.js文件的这一部分，因为它允许您配置ESLint规则。 我们使用插件扩展或添加的所有规则都可以更改或重新定义，这是在rules块中完成的。 该文件的文本包含有关规则的注释。
现在让我们谈谈
.eslintignore文件。 该文件接受表示文件夹的路径的列表，这些文件夹的内容不应使用ESLint进行处理。
此处定义了三个文件夹：
/.git我不需要ESLint来检查与Git相关的文件。/.vscode由于我使用VS Code，因此该项目具有此文件夹。 在此，编辑器存储可以为每个项目设置的配置信息。 短绒也不应处理此数据。node-modules -依赖项文件也不需要使用linter检查。
现在，让我们看一下出现在
package.json中的几个新脚本。 它们是：
"lint": "eslint --debug src/" "lint:write": "eslint --debug src/ --fix"
如果执行第一个命令，则使用
yarn lint或
npm run lint命令执行操作，这将使linter查找
src目录中的所有文件，并显示发现错误的文件的详细报告。 使用此报告，您可以纠正这些错误。
运行皮棉脚本如果执行第二个脚本（
yarn lint:write ），则ESLint将执行与之前相同的检查。 唯一的区别是，在此模式下，系统将尝试修复检测到的错误，并尝试以最合适的形式显示代码。
ESLint VS代码扩展
我们已经配置了Prettier和ESLint，但是为了使用这些工具的功能，我们必须运行脚本。 这不是很方便，因此请尝试修复它。 即，我们要确保通过命令执行代码的格式化和插入操作，以将文件保存在编辑器中。 另外，我们要在提交之前执行代码的整理和格式化。
例如，我们使用VS Code编辑器。 我们需要VS Code
的ESLint扩展 。 为了安装它，您可以打开VS Code扩展面板（
ctrl+shift+x ）。 在此处的搜索字段中，输入
eslint 。 出现扩展列表。 我们感兴趣的是其开发人员信息为Dirk Baeumer的信息。 安装此扩展程序后，重新启动编辑器。
现在，在项目（
app ）的根文件夹中，创建
.vscode文件夹（请注意名称开头的点-这很重要）。 在此文件夹中，创建一个具有以下内容的
settings.json文件：
{ "editor.formatOnSave": false, "eslint.autoFixOnSave": true, }
考虑其内容。
editor.formatOnSave属性设置为false表示我们不需要将标准配置应用于文件格式设置，因为这可能导致与ESLint和Prettier发生冲突。eslint.autoFixOnSave属性设置为true ，因为必须在每次保存文件时触发已安装的插件。 由于ESLint和Prettier在项目中一起工作，因此保存文件会导致格式设置和代码掉落。
重要的是要注意，现在，当运行
lint:write脚本时，它将同时执行linting和代码格式化。
想象一下，如果您得到一个需要检查和改进的20,000行项目代码，您的感受。 现在想象一下，您将必须手动执行此操作。 这项工作可能需要一个月的时间。 借助上述自动化工具，所有这些操作大约只需三十秒钟。
现在，设置完所需的所有内容之后，每次使用代码保存文件时，编辑器都会检查并格式化程序文本。 但是，这里我们谈论的是VS Code编辑器。 您团队中的某人可能更喜欢其他一些编辑。 这样做没有错，但是为了使每个人都可以方便地工作，我们将不得不制定其他一些方案来实现自动化。
哈士奇
赫斯基包允许您使用Git挂钩。 这意味着您有机会在提交或发送存储库代码之前执行某些操作。
为了利用Husky的功能，请首先安装此软件包：
yarn add
之后，将以下内容添加到
package.json ：
"husky": { "hooks": { "pre-commit": "YOUR_COMMAND_HERE", "pre-push": "YOUR_COMMAND_HERE" } },
这将导致以下事实：在执行
commit或
push命令之前，将调用某个脚本，例如，该脚本执行代码测试或格式化。
有关赫斯基的详细信息，请参见
此处 。
毛绒阶段
Lint暂存的软件包允许您使用linter检查索引文件，这有助于防止将错误发送到存储库。
在提交代码之前，先整理是有意义的。 因此，您可以确保错误不会渗透到存储库中，并为到达那里的代码提供统一的样式。 但是，为了验证整个项目而进行的测试可能太耗时，并且验证的结果可能毫无意义。 最终，棉绒可能需要暴露您计划提交的文件。
Lint阶段允许您对由搜索模式过滤的索引文件执行一组任意任务。 可以在
这里找到有关此内容的详细信息。
安装Lint暂存的软件包：
yarn add
然后，在
package.json文件中，添加以下内容：
"lint-staged": { "*.(js|jsx)": ["npm run lint:write", "git add"] },
由于这种构造，将首先执行
lint:write命令，检查文件的内容并修复错误，然后使用
git add命令将文件添加到索引中。 现在，此命令针对
.js和
.jsx文件，但是对于其他类型的文件也可以执行相同的操作。
赫斯基和Lint分阶段的共享
考虑一个允许您组织下一个工作流程的操作图。 每次使用代码提交文件时，在执行此操作之前，系统都会运行
lint-staged脚本，而后者又运行
lint:write脚本，该脚本执行代码的插入和格式化。 之后，将文件添加到索引，然后提交。 在我看来，这非常方便。 实际上，在先前提供的
package.json文件的代码中，这已经实现，我们之前没有讨论过。
这又是我们
package.json的内容：
{ "name": "react-boiler-plate", "version": "1.0.0", "description": "A react boiler plate", "main": "src/index.js", "author": "Adeel Imran", "license": "MIT", "scripts": { "lint": "eslint --debug src/", "lint:write": "eslint --debug src/ --fix", "prettier": "prettier --write src/**/*.js" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.(js|jsx)": ["npm run lint:write", "git add"] }, "devDependencies": { "babel-eslint": "^8.2.3", "eslint": "^4.19.1", "eslint-config-airbnb": "^17.0.0", "eslint-config-jest-enzyme": "^6.0.2", "eslint-plugin-babel": "^5.1.0", "eslint-plugin-import": "^2.12.0", "eslint-plugin-jest": "^21.18.0", "eslint-plugin-jsx-a11y": "^6.0.3", "eslint-plugin-prettier": "^2.6.0", "eslint-plugin-react": "^7.9.1", "husky": "^1.1.2", "lint-staged": "^7.3.0", "prettier": "^1.14.3" } }
既然您已经了解了Husky和Lint进行的演出，就可以评估它们对使用Git的影响。 即，假设执行了以下命令：
$ git add . $ git commit -m "some descriptive message here"
很明显，在提交之前，将检查代码是否符合
.eslintrc.js指定的规则，并在必要时进行修复。 因此，错误将永远不会进入正在运行的项目的资源库。
现在，您知道如何将Prettier，ESLint，Husky和Lint暂存的项目集成到您的项目中。
让我提醒您，我们上面说过，并不是您团队的所有成员都使用我最喜欢的VS Code。 为了使它们都能方便地工作，我们需要处理
.editorconfig文件。
.Editorconfig文件
您团队中的不同成员可能使用不同的编辑器。 强迫他们对任何东西使用任何一个编辑器。 但是，为了使每个人都使用相同的设置，例如缩进或换行，我们使用该文件。
editorconfig 。 .
, . , , WebStorm, AppCode, Atom, Eclipse, Emacs, BBEdit .
app .editorconfig :
# EditorConfig - : http://EditorConfig.org # EditorConfig root = true [*.md] trim_trailing_whitespace = false [*.js] trim_trailing_whitespace = true # Unix [*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 insert_final_newline = true max_line_length = 100
, :
trim_trailing_whitespace = false — .md - . .js - false .indent_style = space — .indent_size = 2 — .end_of_line = lf — lf . , , . .insert_final_newline = true — .max_line_length = 100 — 100 .
总结
, , , . , , .
亲爱的读者们！ ? ?