背景
代码风格好说不好做,很难统一,有以下主要原因:
- 不同开发人员用不同的 IDE,开发工具不统一
- 相同 IDE 的又因为设置不同而不同
- 开发者不了解 IDE 的相关设置,不会设置,越配越乱
- 个人习惯不一样,就是喜欢或不喜欢,他喜欢的他不喜欢
目的
- 统一代码风格,降低阅读成本
- 快速格式化,降低调整代码风格中的耗时
- 快速格式化时,不会导致其他人的代码发生格式变化,意义在于:
- git 记录中该代码的修改人与实际修改人一致,容易追溯
- 不会因格式化的代码导致合并分支时需要解决冲突
选择工具的要点
- Opinionated:强规则型,不可选择提供太多自由配置的工具,大家都自由配置,风格又乱了
- 支持很多语言:最好是一款工具,能支持几乎我们开发中用到的所有语言
- html、css、js、jsx、ts、tsx、sass、less、vue、angular、json、Markdown 等
- 支持主流编辑器
- webstorm、vscode、visual studio、sublime 等
- 方便整合到 IDE 中-
- 支持整合到 git 中,代码 git 提交时自动格式化及修复,保证代码风格
- 是
推荐工具
prettier
- 安装prettier
npm install prettier -D
- 配置.prettierrc文件
useTabs:使用tab缩进还是空格缩进,选择false;
tabWidth:tab是空格的情况下,是几个空格,选择2个;
printWidth:当行字符的长度,推荐80,也有人喜欢100或120;
singleQuote:使用单引号还是双引号,选择false,使用双引号;
trailingComma:在多行输入的尾逗号是否添加,设置为 none;
semi:语句末尾是否要加分号,默认值true,选择false表示不加;
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"singleQuote": false,
"trailingComma": "none",
"semi": false
}
- 创建.prettierignore忽略文件
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
- VSCode需要添加prettier插件
- 在package.json文件里面配置"scripts"脚本
"prettier": "prettier --write ."
- 终端运行命令
npm run prettier
- 和ESLint一起使用
使用eslint-plugin-prettier来添加Prettier作为ESLint的规则配置。
.eslintrc.json配置:
{
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}