DDR爱好者之家

详解create-react-app 自定义 eslint 配置
站长资源 2025/10/26 佚名
24 1538
DDR爱好者之家 Design By 杰米

使用eslint和editorconfig规范代码

为什么要用这些：

  1. 代码规范有利于团队协作
  2. 纯手工规范耗时耗力而且不能保证准确性
  3. 能配合编辑器自动提醒错误，提高开发效率

eslint

随着ECMAScript版本一直更新的Js lint工具，插件丰富，并且能够套用规范，规则非常丰富，能够满足大部分团队的需求。

eslint 配合 git

为了最大程度控制每个人的规范，我们可以在git commit代码的时候，使用git hook调用eslint进行代码规范验证，不规范的代码无法提交到仓库。

editorconfig

不同编辑器对文本的格式会有一定的区别，如果不统一一些规范，可能你和别人合作的时候每次更新下来别人的代码就会出一大堆错误-webstorm自动支持editorconfig配置文件。

首先安装eslintnpm i eslint 因为create-react-app默认已经安装了

  "babel-eslint": "7.2.3",
  "eslint": "4.10.0",
  "eslint-config-react-app": "^2.1.0",
  "eslint-loader": "1.9.0",
  "eslint-plugin-flowtype": "2.39.1",
  "eslint-plugin-import": "2.8.0",
  "eslint-plugin-jsx-a11y": "5.1.1",
  "eslint-plugin-react": "7.4.0",

我们针对我们想要的自定义配置，我们再安装如下

npm i babel-eslint \ eslint-config-airbnb eslint-config-standard \ eslint-loader \ eslint-plugin-import \ eslint-plugin-jsx-a11y \ eslint-plugin-node \ eslint-plugin-promise \ eslint-plugin-react \ eslint-plugin-standard -D

我们在根目录下新建 .eslintrc 文件针对整个项目做一个标准的规范

{
 "extends": "standard"
}

主要项目是前端工程，所以我们在前端文件夹下新建 .eslintrc 文件，在这里去规范客户端代码，客户端代码使用 jsx，很多规则和 nodejs 是不同的，在这里使用更加严格的规范来要求客户端代码。

配置的value对应的值： 0 : off 1 : warning 2 : error

{
 "parser": "babel-eslint",
 "env": {
  "browser": true,
  "es6": true,
  "node": true
 },
 "parserOptions": {
  "ecmaVersion": 6,
  "sourceType": "module"
 },
 "extends": "airbnb",
 "rules": {
  "semi": [0],
  "react/jsx-filename-extension": [0],
  "jsx-a11y/anchor-is-valid": [0]
 }
}

使用 babel-eslint 去解析代码，定义环境是浏览器和es6，会包含公共变量，webpack所以需要node一些环境变量，parserOptions定义版本，jsmodule模式方法书写。

因为需要在每次编译之前都要去检查一下代码，所以还需要配置 webpack,这是create-react-app默认的

   {
    test: /\.(js|jsx|mjs)$/,
    enforce: 'pre',
    use: [
     {
      options: {
       formatter: eslintFormatter,
       eslintPath: require.resolve('eslint'),
       
      },
      loader: require.resolve('eslint-loader'),
     },
    ],
    include: paths.appSrc,
   },

我们希望屏蔽掉 node_modules 文件夹下的代码

exclude:[path.resolve(__dirname, '../node_modules')]

在项目根目录下新建文件 .editorconfig webstom默认就有配置

  1. root = true 项目根目录
  2. [*] 所有文件都应用这个规则
  3. charset = utf-8 编码模式
  4. indent_style = space 使用 tab 的样式制表符和 space
  5. indent_size = 2
  6. end_of_line = lf 行尾结尾方式
  7. insert_final_newline = true 自动保存行尾最后一行是空行
  8. trim_trailing_whitespace = true 一行结束后面的空格自动去掉

eslint 不检测这行代码 // eslint-disable-line

eslint 不检测这个文件，在开头 /* eslint-disable */在文件结尾/* eslint-enable */

安装 npm i husky -D

然后在 package.json scripts中增加git 钩子,会在执行git commit之前会调用这个命令

"lint": "eslint --ext .js --ext .jsx src/",
"precommit": "npm run lint"

git commit 强制执行 eslint 通过的代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米