关于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. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。