力荐！这些工具可以帮你写出干净的代码

想写出好代码，却不知道从哪里开始？想删除死代码？想在代码库中找出未被使用的变量？想在代码中找出有问题的模式？

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

我一直在做这样的事情，经常忙得像热锅上的蚂蚁。但从现在开始，我们要保证永远不再担心这类问题。

本文更多地是针对 React 应用程序，但同样适用于其他 Web 项目。

让我们从 Prettier 开始吧

---

1、什么是 Prettier？

Prettier 是一种代码格式化程序，它以特定的方式为你格式化代码。

请看这个 GIF：

2、我们为什么需要 Prettier？

• 清理现有代码库：通过单个命令行清理代码库。想象一下清理超过 20,000 行代码的代码库会是怎样的一种情景。

• 易于适用：Prettier 在格式化代码时使用争议最少的编码风格。因为是开源的，很多人已经在修复一些边缘情况和优化体验方面进行了多次迭代。

• 编写代码：人们没有意识到的是，他们花了很多时间用于格式化代码，这浪费了他们太多的精神能量。让 Prettier 来处理格式化的事情，开发人员就可以专注在核心业务逻辑上。Prettier 可以将效率提高 10％。

• 帮助新手：如果你是一位与优秀工程师并肩工作的新手，并且你希望自己看起来很酷，可以写出干净的代码，那就使用 Prettier 吧。

3、如何设置 Prettier？

创建一个叫作 app 的文件夹，进入该文件夹，在命令行中敲入：

npm init -y

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

我将在本文中使用 yarn，但你也可以使用 npm。

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

yarn add --dev prettier

这将安装 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”的作用，现在先让我们在 app 文件夹中创建一个 src/ 文件夹。在 src/ 文件夹中，再创建一个名为 index.js 的文件——名字可以随意起。

在 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 文件，并在其中添加一些 Prettier 规则：

module.exports = {
 printWidth: 100,
 singleQuote: true,
 trailingComma: 'all',
 bracketSpacing: true,
 jsxBracketSameLine: false,
 tabWidth: 2,
 semi: true,
};

printWidth 将确保你的单行代码不会超过 100 个字符。

singleQuote 会将所有双引号转换为单引号。

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

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

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

jsxBracketSameLine 将在多行 JSX 元素的最后一行放置 >：

// true example
<
button
 className="prettier-class"
 id="prettier-id"
 onClick={this.handleClick}>
Click Here
&lt