阿迪尔·伊姆兰（Adil Imran）是一位从事该领域很长一段时间的程序员，并在其博客上与同事分享了经验，最佳实践和观察。 阿迪尔（Adil）的
新文章介绍了一些工具，这些工具可帮助您编写美观，干净的代码，并且效果很好。
来自作者：您想编写出色的代码，但不知道从哪里开始，请尝试阅读这些内容，然后将所阅读的内容付诸实践。 但是，问题多于答案。 是否有必要删除“死”代码？ 如果在已经编写的项目中找到未使用的变量，该怎么办？ 如何找到有问题的模式并修复所有问题？ 这些问题很重要，我们中的许多人都在试图回答。 但是最好的办法是从头开始做所有事情，这样您就不必寻找问题区域和修补漏洞，而浪费时间。 要创建良好的代码，可以使用几种不可或缺的工具。
尽管您阅读的内容几乎可以应用于任何Web项目，但我们将在本文中介绍的示例都与React相关。
Skillbox建议：实用课程“专业Web开发人员” 。
我们提醒您： 对于所有“哈勃”读者来说，使用“哈勃”促销代码注册任何Skillbox课程时均可享受10,000卢布的折扣。
本文工具的完整列表在这里：
- 更漂亮
- ESLint
- 自动格式化并保存
- 哈士奇
- 毛绒阶段
- 与赫斯基和Lint分阶段合并
- 编辑器配置
让我们从更漂亮的开始
该工具是一个深思熟虑的代码优化器。
为什么需要它？清理现成的代码。 试想一下，您需要优化大约2万行。 漂亮会自动快速地完成所有这些工作。
它易于使用且易于适应-一些团队致力于改进Prettier，因此您可以选择适合自己的版本。
如果您是想编写漂亮代码但不知道从哪里开始的初学者程序员，请尝试Prettier。
安装方式您需要创建一个名为app的文件夹，并在命令行中的文件夹内键入以下内容：
npm init -y
此命令将创建package.json文件。
接下来，我们处理依赖关系。
yarn add --dev prettier
执行命令后，新创建的文件中将显示以下内容：
{ "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" } }
接下来，在app文件夹中创建一个src /文件夹。 并在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文件中有一个依赖项和一个Prettier脚本。
现在在app文件夹中创建prettier.config.js。
module.exports = { printWidth: 100, singleQuote: true, trailingComma: 'all', bracketSpacing: true, jsxBracketSameLine: false, tabWidth: 2, semi: true, };
printWidth允许
您确保代码不超过100个字符。
singleQuote将所有双引号转换为单引号；
TrailingComma将检查代码中所有悬空的逗号，尤其是在对象的最后一个属性的末尾。
在这里解释
。branchSpacing管理对象文字中的空格：
If bracketSpacing is true - Example: { foo: bar } If bracketSpacing is false - Example: {foo: bar} jsxBracketSameLine JSX- ">"
tabWidth定义缩进级别的空格数。
半 -如果打印为真； 在声明的末尾。
这是Prettier可以使用
的选项的
完整列表 。
初始配置准备好后，您可以执行脚本。
“更漂亮”：“更漂亮-写src / ** / *。Js”
在上面的示例中，脚本在src /文件夹中查找所有.js文件。
-write表示需要保存优化的代码文件。
让我们执行脚本：
纱线更漂亮
如果您对示例有任何疑问，那么
这里是可以找到准备好的一切
的存储库 。
ESLint
该工具分析代码以帮助检测不符合规则和标准的有问题的模式。 它适用于大多数编程语言。
为什么应用于JavaScript时需要使用它？因为JavaScript是一种相当自由的语言，所以开发人员经常会犯错误。 ESLint可以帮助您发现问题，而无需运行书面程序。
ESLint如何在同类产品中脱颖而出？它易于配置，非常灵活。 您可以根据需要添加和删除规则-实际上所有内容都已配置。 因此，您可以根据使用的规则集来格式化代码。
现在，两个样式指南最相关：- Google JavaScript样式指南
- Airbnb JavaScript样式指南
对于我来说，我建议第二种选择。 他非常受欢迎，您可以通过转到
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" } }
每个选项的含义：
eslint ：这是使用本机代码的主要工具。
babel-eslint ：如果您使用ESLint尚不支持的Flow或实验性功能，则很有用。
eslint-config-airbnb ：此软件包为开发人员提供了Airbnb的ESLint配置。
eslint-plugin-babel： babel-eslint的配套插件。
eslint-plugin-react：优化反应。
eslint-plugin-import：提供使用ES2015 +（ES6 +）导入/导出语法的功能。
eslint-plugin- prettier
：简化了ESLint与Prettier的交互。
基本内容结束后，我们开始吧。 例如，在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', // Don't play nicely with Windows. 'arrow-parens': 'off', // Incompatible with prettier 'object-curly-newline': 'off', // Incompatible with prettier 'no-mixed-operators': 'off', // Incompatible with prettier 'arrow-body-style': 'off', // Not our taste? 'function-paren-newline': 'off', // Incompatible with prettier 'no-plusplus': 'off', 'space-before-function-paren': 0, // Incompatible with prettier 'max-len': ['error', 100, 2, { ignoreUrls: true, }], // airbnb is allowing some edge cases 'no-console': 'error', // airbnb is using warn 'no-alert': 'error', // airbnb is using warn 'no-param-reassign': 'off', // Not our taste? "radix": "off", // parseInt, parseFloat radix turned off. Not my taste. 'react/require-default-props': 'off', // airbnb use error 'react/forbid-prop-types': 'off', // airbnb use error 'react/jsx-filename-extension': ['error', { extensions: ['.js'] }], // airbnb is using .jsx 'prefer-destructuring': 'off', 'react/no-find-dom-node': 'off', // I don't know 'react/no-did-mount-set-state': 'off', 'react/no-unused-prop-types': 'off', // Is still buggy '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"] } }], // for nested label htmlFor error 'prettier/prettier': ['error'], }, };
将.eslintignore文件添加到app /文件夹。
/.git
/.vscode
node_modules
.eslintrc.js文件有什么作用？
让我们看看：
module.exports = { env:{}, extends: {}, plugin: {}, parser: {}, parserOptions: {}, rules: {}, };
env：环境定义了已经预定义的全局变量。 在我们的案例中，可用环境是es6，浏览器和节点。 Es6将使ECMAScript 6（模块除外）可用。 浏览器将添加所有全局变量，例如Windows。 因此，节点将添加所有全局节点变量。
extend：字符串数组-每个其他配置都会扩展先前的配置。 现在，我们正在使用Airbnb的绒毛规则，这些规则会扩展到开玩笑，然后扩展到开玩笑的酶。
插件：这些是我们要使用的基本皮棉规则。 我们使用babel，import，jsx-a11y，react，更漂亮以及我上面指定的所有功能。
解析器：默认情况下，ESLint使用Espree，但是由于我们正在使用babel，因此您需要使用
Babel-ESLint 。
parserOptions：当我们将
Espree的默认解析器更改为babel-eslint时，我们需要阐明parserOptions。
规则：我们可以在此处更改或替换的任何规则。
如果一切都清楚，让我们谈谈.eslintignore。 此选项有助于指示不需要使用ESLint处理的所有路径。 我只使用三个这样的路径：
/.git-当我不想影响我的git文件时
/.vscode，因为我使用VS Code，并且此编辑器具有自己的配置，因此需要为每个项目指定该配置，因此我不想在这里进行介绍。
node_modules-我也不接触依赖项，因此我将它们添加到列表中。
就是这样，我们来谈谈为package.json添加的新脚本。
“ Lint”：“ eslint --debug src /”
“棉绒：写”：“ eslint --debug src / --fix”$ yarn lint-运行此命令，将检查src /中的所有文件，因此您将获得详细的日志，其中包含每个文件中出现问题的位置的描述，您可以在其中找到错误，然后可以手动启动并修复。
$ yarn lint：写入-此命令与上一个命令大致相同。 唯一的区别是yarn在这里已经具有写权限-该命令通过从代码中删除错误来纠正错误。
所以，好吧，如果您一直坚持到这一刻，那么荣誉和称赞就属于您了。
哈士奇
好了，在这里您可以在提交或将代码推送到分支期间执行一些操作。
您需要做的就是安装Husky：
毛线添加--dev哈士奇接下来，将代码段添加到package.json文件：
"husky": { "hooks": { "pre-commit": "YOUR_COMMAND_HERE", "pre-push": "YOUR_COMMAND_HERE" } },
现在，每次在提交或推送期间，此代码段都会开始执行某些脚本或命令，例如，代码格式化命令。
毛绒阶段
帮助防止不良代码进入您的git分支。
为什么要上绒呢？在大多数情况下，代码验证应在提交之前执行。 因此，您可以防止错误进入存储库并提高程序的整体质量。 但是，为整个项目启动皮棉是一个相当缓慢的过程，并且处理结果可能无关紧要。 最后，您只需要处理要提交的文件。
您需要做的就是安装项目：
毛线加--dev绒接下来，将其添加到package.json文件：
"lint-staged": { "*.(js|jsx)": ["npm run lint:write", "git add"] },
因此，您运行lint：编写，然后将其添加到舞台区域。 该命令适用于.js和.jsx文件，但是您可以根据需要对其他文件执行相同的操作。
将赫斯基和棉绒相结合
每次提交代码时，都会运行一个名为lint-staged的脚本。 它启动npm run lint：write的执行，使您可以检查和格式化代码。 然后，已验证的代码将进入该阶段的阶段并执行提交。
最终的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" } }
现在每次你做
$ git添加。
$ git commit -m“一些描述性信息”该代码将根据.eslintrc.js文件中的规则自动设置格式。
谈论EditorConfig
首先，在app /目录中创建.editorconfig文件。 将以下代码插入其中：
# EditorConfig is awesome: http://EditorConfig.org # top-most EditorConfig file root = true [*.md] trim_trailing_whitespace = false [*.js] trim_trailing_whitespace = true # Unix-style newlines with a newline ending every file [*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 insert_final_newline = true max_line_length = 100
这是支持
EditorCondig的编辑器的列表。 该列表包括以下内容-Webstorm，App代码，Atom，eclipse，emacs，bbedit。
上面的代码执行以下操作：
- 从.md和.js文件中删除空格。
- 指定缩进样式而不是空格。
- 将缩进大小设置为2。
- 将行尾引向单一标准。
- 在文件末尾添加新行。
- 将字符串长度设置为100个字符。
实际上，现在一切就绪。 如果您需要源代码，请
在此处 。
Skillbox建议：