React项目笔记之create-react-app自定义ESLint配置文件

2019年8月31日 282次阅读 来源: kira

原博客地址：https://yezihaohao.github.io

媒介

相识eslint基础用法，若想更进一步相识其，请查阅官网以及相干材料(中文网)

如有题目请指出或加群264591039与我议论。

初始化项目

运用create-react-app 建立项目（此历程不做详解），然后运转npm run eject使其暴露webpack等设置文件

自定义eslint

上述步骤并没有暴露react脚手架封装的eslint操纵，为了使得项目一致范例化，增加jsx-eslint操纵
是异常不错的挑选（关于js其他的eslint操纵，请拜见官网，本文重要针对jsx限定范例设置）。

  • 在项目根目录下增加.eslintrc文件

  • 在根目录找到config文件夹，并找到文件夹下的webpack.config.dev.js文件

  • webpack.config.dev.js文件增加以下代码：

enforce: 'pre',
use: [{
  // @remove-on-eject-begin
  // Point ESLint to our predefined config.
  options: {
    //configFile: path.join(__dirname, '../.eslintrc'),
    useEslintrc: true
  },
  // @remove-on-eject-end
  loader: 'eslint-loader'
}],

《React项目笔记之create-react-app自定义ESLint配置文件》

  • 运转npm start,此时，你编写的jsx文件都是经由.eslintrc的设置限定

.eslintrc文件基础范例设置

ps: 设置的value对应的值： 0 : off 1 : warning 2 : error
不满足以下的范例设置的，编译代码时将有黄色提醒
详细设置规则可拜见Github

{
  "extends": "react-app",
  "rules": {
    "no-multi-spaces": 1,
    "react/jsx-space-before-closing": 1,        // 老是在自动封闭的标签前加一个空格，一般情况下也不需要换行
    "jsx-quotes": 1,
    "react/jsx-closing-bracket-location": 1,    // 遵照JSX语法缩进/花样
    "react/jsx-boolean-value": 1,               // 假如属性值为 true, 能够直接省略
    "react/no-string-refs": 1,      // 老是在Refs里运用回调函数
    "react/self-closing-comp": 1,    // 关于没有子元素的标签来讲老是本身封闭标签
    "react/jsx-no-bind": 1,          // 当在 render() 里运用事宜处置惩罚要领时，提早在组织函数里把 this 绑定上去
    "react/sort-comp": 1,            // 根据详细范例的React.createClass 的性命周期函数誊写代码
    "react/jsx-pascal-case": 1        // React模块名运用帕斯卡定名，实例运用骆驼式定名
  }
}
    原文作者：kira
    原文地址: https://segmentfault.com/a/1190000008853805
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞