parseint

想写好代码，却不知道从何下手？想删除死代码？想要在代码库中找到未使用的变量吗？想在代码中找到一个有问题的模式吗？

你是多元化团队的负责人吗？你的团队中有新的开发人员吗？你担心他们会写出不合标准的代码吗？你是否花了一整天的时间来检查代码标准，而不是实际的逻辑实现？

我一直在做这样的事情，经常忙得像热锅上的蚂蚁。但是从现在开始，我们必须保证再也不担心这样的问题了。在阅读本文的过程中，如果遇到困难，可以参考代码库(https://github . com/adeelibr/react-starter-kit)。

本文更多的是关于React应用程序，但是它也适用于其他Web项目。

让我们从 Prettier 开始吧

1.什么更漂亮？

漂亮是一个代码格式化程序，以特定的方式为你格式化代码。

请看这张GIF:

2.为什么我们需要更漂亮的？

清理现有代码库：通过单个命令行清理代码库。想象一下清理超过 20,000 行代码的代码库会是怎样的一种情景。易于适用：Prettier 在格式化代码时使用争议最少的编码风格。因为是开源的，很多人已经在修复一些边缘情况和优化体验方面进行了多次迭代。编写代码：人们没有意识到的是，他们花了很多时间用于格式化代码，这浪费了他们太多的精神能量。让 Prettier 来处理格式化的事情，开发人员就可以专注在核心业务逻辑上。Prettier 可以将效率提高 10％。帮助新手：如果你是一位与优秀工程师并肩工作的新手，并且你希望自己看起来很酷，可以写出干净的代码，那就使用 Prettier 吧。

3.怎么设置比较好看？

创建一个名为app的文件夹，进入该文件夹，然后键入:

复制代码

这将在app文件夹中创建一个package.json文件。

本文中我将使用yarn，但是您也可以使用npm。

安装我们的第一个依赖项:

复制代码

这将安装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 “:{ ” prettle “:” prettle-write src/* */*。js” }、” dev dependencies “:{ ” pretier “:” 1 . 14 . 3 ” } }我来解释一下” pre tier “的作用:” pretier-writesrc/ * *。js”后来。现在让我们在app文件夹中创建一个src/文件夹。在src/文件夹中，创建另一个名为index.js的文件——可以随意命名。

在index.js文件中，按原样粘贴以下句子:

复制代码

let person = { name:“尤达”，称号:‘绝地大师’}；function train Jedi(Jedi warrion){ if(Jedi warrion . name = = = ‘ Yoda ‘){ console . log(‘不需要！已经训练好了’)；} console . log(` training $ { Jedi warrion . name } complete `)} train Jedi(person)train Jedi({ name:’ Adeel ‘，称号:’学徒’ })；到目前为止，我们有一个src/app/index.js文件，其中包含一些难看的代码。

我们可以做三件事:

手动缩进并格式化代码；使用自动化工具；保持不变（请不要这么做）。

我将选择第二个选项，因此我们安装了一个依赖项，并在package.json中声明了预测器。

现在，在应用程序的根文件夹中创建一个更漂亮的. config.js文件，并向其中添加一些更漂亮的规则:

复制代码

module.exports = { printWidth: 100，singleQuote: true，trailingComma逗号:’ all ‘，bracketSpacing: true，jsxBracketSameLine: false，tabWidth: 2，semi: true，}；PrintWidth将确保您的单行代码不会超过100个字符。

单引号将所有双引号转换成单引号。

TrailingComma将确保在最后一个对象属性的末尾有一个逗号。

方括号在对象的文字数量之间打印空:

复制代码

如果括号间距为true-示例:{foo: bar}如果括号间距为false-示例:{foo: bar} JSXBracketSameline将放置在多行JSX元素的最后一行> :

复制代码

//真实例子& ltbutton class name = ” pretther-class ” id = ” pretther-id ” onClick = { this . handle click } & gt；单击此处& lt/button & gt；//假例& ltbutton class name = ” pretther-class ” id = ” pretther-id ” onClick = { this . handle click } & gt；单击此处& lt/button & gt；TabWidth指定单个缩进的空单元格的数量。

如果semi设置为true，则在语句末尾添加；。

现在我们来谈谈这个脚本的作用:

复制代码

” pre tetter “:” pre tetter-写src/ * */*。意思是运行Pretetter，让它找到所有的。src/文件夹中的js文件。–-write标志告诉prettier将格式化的内容保存到一个文件中，并找出格式化过程中发现的任何异常。

现在在终端中运行这个脚本:

复制代码

纱更漂亮，这是我运行代码时看到的:

ESLint

1.什么是代码linter？

代码 linting 是一种代码静态分析，通常被用于查找不符合某些样式指南的有问题的模式或代码。大多数编程语言都有代码 linting，编译器有时会在编译过程中加入 linting。——来自 ESLint

为什么JaScript需要linter？

因为JaScript是动态类型的，是一种松散类型的语言，所以开发人员在使用这种语言时很容易出错。因为它没有被编译，所以您通常需要执行。js文件来查找语法或其他错误。

像ESLint这样的林挺工具可以帮助开发者在不执行JaScript代码的情况下发现问题。

2.是什么让ESLint如此特别？

ESLint中的一切都是可插拔的，你甚至可以在运行时添加规则。您添加的每个林挺规则都是独立的，任何规则都可以独立打开或关闭。每个规则都可以设置为警告或错误级别。

现在有两种流行的风格指南:

Google JaScript Style Guide（https://google.github.io/styleguide/jsguide.html）；Airbnb JaScript Style Guide（https://github.com/airbnb/jascript#table-of-contents）。

我一直在用Airbnb的风格指南。这个风格指南一直保持着。在本文中，我将使用受Airbnb风格指南启发的规则集。

首先更新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 “，” prettle “:” prettle-write src/* */*。js” }、” husky “:{ ” hooks “:{ ” pre-commit “:” lint-staged ” } }、” lint-staged”: { “*。(js|jsx)”: [“npm run lint:write “，” git add”] }，” dev dependencies “:{ ” 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-enzyme

Babel-eslint:这个包让你在Babel上使用lint变得很容易。如果不使用ESLint还不支持的流量或实验特性，就不一定需要这个插件。

Eslint:这是lint代码需要的主要工具。

Eslint-config-airbnb:这个包提供了airbnb所有的Eslint配置，你可以修改。

eslint-plugin-babel:babel-eslint的插件伴侣。

Eslint-plugin-import:该插件旨在支持ES2015+(ES6+)的导入/导出语法，并防止拼写错误的文件路径和导入名称。

适用于JSX元素可访问性规则的林挺规则。

Eslint-plugin-beauty:让ESLint和beauty的使用更加流畅。

特定于React的林挺规则。

Eslint-config-jest-Enzyme:用于特定于React和Enzyme的全局变量。这个lint配置让ESLint知道什么是全局变量，并且不对它们发出警告——有点像断言它和描述它。

ESLint-plugin-jest:jest的ESLint插件。

Husky:自动化部分会有更多介绍。

Lint-staged:在自动化部分会有更多的介绍。

既然我们有了基本的了解，我们可以开始了。

在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: {ecmersion: 6，sourceType: ‘module ‘，ecmaFeatures: {jsx: true}}，rules: {‘linebreak-style’: ‘off ‘，//不能很好地与Windows配合。arrow-parens’: ‘off ‘，//与更漂亮的’ object-curly-newline’: ‘off ‘，//与更漂亮的’ no-mixed-operators’: ‘off ‘，//与更漂亮的’ arrow-body-style’: ‘off ‘，//不合我们的口味？’function-paren-newline’: ‘off ‘，//与更漂亮的’ no-plusplus’: ‘off ‘，’ space-before-function-paren’: 0，//与更漂亮的’ max-len’: [‘error ‘，100，2，{ ignoreUrls: true，}]，// airbnb允许某些边缘情况’ no-console’: ‘error ‘，// airbnb在使用warn’no-alert’: ‘error ‘，// airbnb在使用warn ‘ no-param-assign ‘:’ off ‘:’ off ‘，//不合我们的口味？” radix”: “off”, // parseInt，parseFloat radix关闭。不是我的口味。react/require-default-props ‘:’ off ‘，//Airbnb use error ‘ react/banned-prop-types ‘:’ off ‘，//Airbnb use error ‘ react/jsx-filename-extension ‘:[‘ error ‘，{ extensions: [‘。js’] }]，// airbnb在用。jsx ‘ prefere-destructing ‘:’ off ‘，’ react/no-find-dom-node’: ‘off ‘，//我不知道’ react/no-did-mount-set-state ‘:’ off ‘，’ react/no-unused-prop-types ‘:’ off ‘，//仍然是bug ‘ react/jsx-one-expression-per-line ‘:’ off ‘，” jsx-a11y/anchor-Is-valid “:[” error “，{ “components”: [“Link”]，” specialLink”: [“to”] }]，”还要添加。应用程序/根目录中的eslintignore文件:

复制代码

/.git/。vscodenode_modules我们先来介绍一下。eslintrc.js文件。

先分解一下:

复制代码

module.exports = { env:{}，extends: {}，plugin: {}，parser: {}，parserOptions: {}，rules: {}，}。Env:用于预定义全局变量。在我们的示例中，可用的环境包括es6、浏览器和es6。Es6将启用除模块之外的所有ECMAScript 6功能。浏览器将添加所有浏览器全局变量，如Windows。Node将添加一个节点全局变量和一个节点范围，比如global。扩展:字符串数组-扩展多边形配置的附加配置选项。现在我们用的是airbnb的林挺规则，扩展到jest，然后jest-enzyme。插件:插件基本上是我们想要使用的林挺规则。现在用的是babel，import，jsx-a11y，react，更漂亮。解析器:默认情况下，ESLint使用Espree，但是因为我们使用babel，所以我们仍然需要使用Babel-ESLint。ParserOptions:如果我们将Espree的默认解析器改为babel-eslint，我们需要指定parser options——这是必需的。我通过选项告诉ESLint，ecmersion是6。因为我们在EcmaScript模块(而不是脚本)中编写代码，所以我们将sourceType指定为module。因为我们使用了React并引入了jsx，所以我们向ecmaFeatures添加了JSX选项，并将其设置为true。规则:我们通过插件扩展和添加的所有规则，我们可以更改或覆盖它们。3.现在我们来介绍一下。

。ESLintignore包含了一个我们不希望eslint进行lint的路径列表。我在这里只指定三个:

/.git——我不希望 Git 相关文件被 lint。/.vscode——由于我使用的是 VS Code，这个编辑器提供了自己的配置文件，我不希望配置文件被 lint。node_modules——我不希望依赖项被 lint，所以把这个目录也添加到列表中。

接下来，我们来看看package.json中新添加的脚本。

复制代码

” lint “:” lint-debug src/” ” lint:write “:” lint-debug src/-fix ” $ yarn lint-运行此命令，它将遍历src/中的所有文件，并在发现错误的每个文件中提供详细的日志。您可以手动打开这些文件并更正错误。

$ yarn lint:write——运行这个命令，它将执行与上述命令相同的操作。不同的地方在于，如果它可以纠正它发现的错误，它将纠正它们，并尝试从代码中尽可能多地移除代码坏气味。让它更自动化一些

到目前为止，我们已经设置了更漂亮和eslint，但我们每次都必须运行脚本。接下来，让我们使它更加自动化。

在编辑器中按下 ctrl + s 时格式化和 lint 代码。每次提交代码时，自动对代码进行 lint 和格式化。

要在保存代码时格式化和lint，需要使用类似VS Code的编辑器:

安装ESLint扩展。这里(https://marketplace.visualstudio.com/items？ItemName = dbaeumer。VS Code-eslint)下载插件或者在VS Code编辑器中按ctrl+shift+x打开扩展模块，搜索eslint，会出现一系列插件。安装Dirk Ba eumer开发的那个。安装完成后，单击reload按钮重新启动编辑器。

安装该插件后，创建一个名为。vscode/

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

复制代码

{”编辑。Formatonse”: false，” ESLint.autofixonse”: true，} editor。formatonse-我在这里设置为false，因为我不想让文件格式的默认编辑器配置与eslint和Prettier冲突。eslint . autofixonse——我在这里将其设置为true，因为我希望每次保存文件时安装的插件都能正常工作。因为ESLint的配置与Prettier的配置相关联，所以它会在您每次单击Se时格式化并Lint您的代码。需要注意的是，当你运行yarn lint:write时，它也会lint，美化你的代码。

想象一下，如果你有20000行代码，然后手动审计改进，然后想象一个命令就能搞定一切。手动方法可能需要30天，而自动方法可能只需要30秒。

脚本已经设置好了，每次点击保存，编辑器都会对特定文件做出神奇的响应。但是，并不是团队中的每个人都会选择使用VS代码。不过没关系，我们可以更自动化。

husky

1.什么是哈士奇？

Https://Github.com/typicode/husky是一个git钩子，你可以在提交代码之前或者将代码推送到分支时执行某些操作。

你所要做的就是安装husky:

复制代码

然后，Yarnadd-devhusky将以下内容添加到package.json文件中:

复制代码

” husky “:{ ” hooks “:{ ” pre-commit “:” your _ command _ here “，” pre-push “:” your _ command _ here ” } }，它每次提交或推送代码时，都会执行一个脚本或命令，比如运行一个测试用例或者格式化代码。

lint-staged

1.什么是lint-staged？

lint-staged(https://github.com/okonet/lint-staged)可以在Git staged文件上运行linter，这样错误的代码就不会被推送到分支。

为什么使用lint-staged？

在提交之前对代码进行lint是有意义的。您可以确保代码库中没有错误，并且可以强制应用代码样式。但是在整个项目上运行lint会很慢，而且有些lint结果可能是不相关的。您可能只是想丢弃要提交的文档。

这个项目提供了一个脚本，它将执行任何shell任务，并将临时文件列表作为参数，根据指定的通配符模式过滤文件。

您需要做的是安装lint-staged:

复制代码

Yarnadd-devlint-staged，然后添加到package.json文件中:

复制代码

” lint-staged”: {“*。(js | jsx)”: [“NPM运行lint: write “，” git add”]}，这个配置意味着先运行lint:write命令，然后将文件添加到临时存储区。它只对运行这个命令。js和。jsx文件，但是您也可以根据需要对其他文件运行这个命令。

husky 与 lint-staged 一起使用

在每次提交代码之前，将运行一个名为lint-staged的脚本。这个脚本将运行npm run lint:write命令，该命令将lint和格式化您的代码，然后将代码添加到临时存储区域并提交它。

最终的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 “，” prettle “:” prettle-write src/* */*。js” }、” husky “:{ ” hooks “:{ ” pre-commit “:” lint-staged ” } }、” lint-staged”: { “*。(js|jsx)”: [“npm run lint:write “，” git add”] }，” dev dependencies “:{ ” 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-enzyme

复制代码

$ gitadd。$ gitcommit-m“这里是一些描述性的消息”它会根据eslintrc.js文件的所有规则lint并格式化代码。这样，您就可以确保没有不良代码进入生产环境。

现在介绍一下 EditorConfig

首先创建一个。editorconfig文件，然后将以下代码粘贴到该文件中:

复制代码

# EditorConfig太棒了:http://EditorConfig.org # top-most editor config file root = true[*。MD]trim _ trailing _ white space = false[*。js]trim _ trailing _ white space = true # Unix风格的换行符，每个文件都有一个换行符结尾[*]Indent _ style = space Indent _ size = 2 end _ of _ line = lf charset = UTF-8 insert _ final _ newline = true max _ line _ length = 100那么EditorConfig是什么？

不是每个人都能用VS代码，所以为了让每个人保持统一(比如在tab 空框或者换行符中)，我们用。editorconfig，它有助于实施一些规则。

支持编辑器配置(https://editorconfig.org/)的编辑器有Web Storm、App Code、Atom、Eclipse、Emacs、bbedit等。

上述配置将执行以下操作:

去掉.md 和.js 文件中的尾部空格；将缩进样式设置为空格而不是制表符；缩进大小为 2；行尾是 lf，这样每个人不管使用的是哪种操作系统，都会有相同的行尾；文件末尾应该有一个新行；单行的最大度应为 100 个字符。

英文原文:https://medium . freecodecamp . org/these-tools-will-help-you-write-clean-code-da4b 5401 f68e。