想写出好代码,却不知道从哪里开始?想删除死代码?想在代码库中找出未被使用的变量?想在代码中找出有问题的模式?
你是多元化团队的负责人吗?你的团队中有新来的开发人员吗?你担心他们会写出不符合标准的代码吗?在代码评审时是否花了一整天的时间去检查代码标准,而不是实际的逻辑实现?
我一直在做这样的事情,经常忙得像热锅上的蚂蚁。但从现在开始,我们要保证永远不再担心这类问题。
本文更多地是针对 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
<