关于react.js:createreactapp使用eslintprettier

1.开发环境 create-react-app5

2.电脑系统 windows11专业版

3.在react开发的过程中,为了标准代码(ESLint 关注代码品质,Prettier 关注代码格调)咱们抉择应用eslint+prettier的模式,上面我来分享一下在create-react-app中应用办法。

4.废话不多说,间接上操作:

yarn create reacp-app chenreact

4-1.因为create react-app曾经装置了eslint,所有咱们须要装置Prettier

依据 Prettier官网倡议,Prettier版本升级之后可能会有格调变动,故该当锁定 Prettier 的版本号:
yarn add prettier --save-dev --save-exact

4-2.Prettier和ESLint相集成

咱们要应用Prettier也要应用ESLint,然而呢?这两个都有本人的规定,所有咱们要各取所需【解决规定抵触】,装置eslint-config-prettier eslint-plugin-prettier 依赖。

eslint-config-prettier 禁用与 Prettier 抵触的规定，eslint-plugin-prettier 应用 Prettier 的规定:
yarn add eslint-config-prettier eslint-plugin-prettier --save-dev

4-3.删除package.json中的eslintConfig属性,在跟目录下新建.eslintrc.js(与 package.json 文件同级)并增加如下代码

module.exports = {
  extends: ["react-app", "plugin:prettier/recommended"],
  rules: {
    // allow debugger during development
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-console": 0,
    "prettier/prettier": [
      "error",
      {
        singleQuote: true,
        trailingComma: "none",
        bracketSpacing: true,
        jsxBracketSameLine: true,
      },
    ],
  },
};

援用

ESLint 的配置文件,能够是:
 .eslintrc.js、.eslintrc.cjs、.eslintrc.yaml、
.eslintrc.yml、.eslintrc.json、
.eslintrc（已弃用）或者 package.json（第一种办法）,
优先级顺次递加,层叠配置应用离要检测的文件最近的 .eslintrc 文件
作为最高优先级,而后才是父目录里的配置文件，以此类推。

4-4.在package.json中script下增加如下代码:

"format": "prettier --write src\"**/*.+(js|jsx|json|css|md)\""

留神:  此处的src示意只应用Prettier格局src下文件代码

在终端执行:
 yarn format 
就能够装置Prettier规定去格式化代码格调了
然而呢?咱们执行完 yarn start就感觉累了,还要再去手动执行yarn format???也太那啥了,怎么办呢?咱们要是在执行yarn start的同时也执行yarn format不就行了,那么同时执行呢?办法如下:

5.装置concurrently,能够同时执行多个命令

yarn add concurrently

5-1.批改package.json中script:

"dev": "node scripts/start.js",
"format": "prettier --write src\"**/*.+(js|jsx|json|css|md)\"",
    "start": "concurrently  \"yarn format\" \"yarn dev\""

6.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。