快速的配置Prettier，让代码更整洁
快速的配置Prettier，让代码更整洁
一个人一个代码风格，先抛开语法的使用不谈，加不加空格、加不加分号也是萝卜白菜各有所爱，那怎么统一我们的代码格式呢
prettier就是为我们解决这个问题的
1. 如何制定我们的代码风格
我们可以在这里进行代码格式的自定义配置
配置完成之后我们可以点击 copy config json 按钮 复制我们配置的json
2. 如何应用在我们的项目中
2.1 首先我们需要安装prettier
npm install --save-dev prettier
2.2 配置.prettierrc 文件
// 我们在我们跟目录下创建 .prettierrc 文件，并将我们刚刚复制的json粘贴进去
// 示例：
{"arrowParens": "always","bracketSameLine": false,"bracketSpacing": true,"semi": true,"experimentalTernaries": false,"singleQuote": false,"jsxSingleQuote": false,"quoteProps": "as-needed","trailingComma": "all","singleAttributePerLine": false,"htmlWhitespaceSensitivity": "css","vueIndentScriptAndStyle": false,"proseWrap": "preserve","insertPragma": false,"printWidth": 80,"requirePragma": false,"tabWidth": 2,"useTabs": false,"embeddedLanguageFormatting": "auto"
}
2.3 实现在vscode中保存自动格式化代码的效果
-
根目录下创建.vscode文件夹
-
在.vscode文件夹下创建settings.json文件
-
将下面的代码粘贴进去
{"[typescriptreact]": {"editor.formatOnSave": true,"editor.renderWhitespace": "all","editor.quickSuggestions": {"other": true,"comments": true,"strings": true},"editor.acceptSuggestionOnEnter": "on","editor.defaultFormatter": "esbenp.prettier-vscode"},
}
2.4 实现执行脚本命令格式化整个项目
-
- 在package.json文件中的scripts下面添加一个命令
"prettier": "npx prettier --write 'src/**/*.tsx'",
-
- 执行命令
npm run prettier即可格式化整个项目
- 执行命令