如下:
npm install eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-react --save-dev
或者使用yarn:
yarn add eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-react --dev
这些包的作用分别是:
.eslintrc.json
文件,并添加以下配置:{
"extends": [
"eslint:recommended",
"plugin:prettier/recommended",
"plugin:react/recommended"
],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
这里的配置使用了eslint:recommended作为基础规则,并添加了plugin:prettier/recommended和plugin:react/recommended作为额外规则。同时,设置了prettier/prettier规则为错误级别,表示如果代码格式不符合Prettier规则,会产生一个错误。
.prettierrc
文件,并添加Prettier的配置,例如:{
"printWidth": 80,
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "es5"
}
这里的配置是Prettier的一些常用配置,可以根据个人需求进行调整。
npx prettier --write .
或者使用yarn:
yarn prettier --write .
这会自动对项目中的所有代码文件进行格式化。
以上就是在React项目中使用Prettier安装ESlint的正确方法。使用Prettier和ESlint可以帮助你保持代码风格的一致性,提高代码的可读性和可维护性。腾讯云相关产品和产品介绍链接地址请参考官方文档。
云+社区技术沙龙[第8期]
云+社区技术沙龙[第27期]
云原生正发声
腾讯云GAME-TECH沙龙
腾讯云GAME-TECH游戏开发者技术沙龙
TC-Day
TC-Day
T-Day
云+社区技术沙龙第33期
领取专属 10元无门槛券
手把手带您无忧上云