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

Dogee 发布于2019-08-20 15:25 / 3007人阅读

摘要：初始化项目使用创建项目此过程不做详解，然后运行使其暴露等配置文件自定义上述步骤并没有暴露脚手架封装的操作，为了使得项目统一规范化，添加操作是非常不错的选择关于其他的操作，请参见官网，本文主要针对限制规范配置。

原博客地址：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"
}],

运行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模块名使用帕斯卡命名，实例使用骆驼式命名
  }
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82227.html

在 React-CRA 应用中配合 VSCode 使用 ESLint 实践前端代码规范

摘要：编码规范是独角兽公司内部的编码规范，该项目是上很受欢迎的一个开源项目，在前端开发中使用广泛，本文的配置规则就是以编码规范和编码规范作为基础的。更新时间：2019-01-22React.js create-react-app 项目 + VSCode 编辑器 + ESLint 代码检查工具 + Airbnb 编码规范前言为什么要使用 ESLint 在项目开发过程中，编写符合团队编码规...

Hujiawei 2019-08-23 14:55 评论0 收藏0
create-react-app 2.1.8版本自定义配置

摘要：在用新建项目后，运行命令，可看到各项配置。按需引入组件文件的配置项中，添加增加装饰器配置文件的配置项中，添加设为，表示使用阶段装饰器语法和行为。原因在中有提到是因为目前只有支持，而目前为止，还只是一个版本。参考自追溯的实现在用create-react-app新建项目后，运行eject命令，可看到各项配置。按需引入ant design组件 1.yarn add babel-plugi...

刘玉平 2019-08-02 16:12 评论0 收藏0
create-react-app 2.1.8版本自定义配置

摘要：在用新建项目后，运行命令，可看到各项配置。按需引入组件文件的配置项中，添加增加装饰器配置文件的配置项中，添加设为，表示使用阶段装饰器语法和行为。原因在中有提到是因为目前只有支持，而目前为止，还只是一个版本。参考自追溯的实现在用create-react-app新建项目后，运行eject命令，可看到各项配置。按需引入ant design组件 1.yarn add babel-plugi...

SexySix 2019-08-23 16:52 评论0 收藏0
create-react-app 2.1.8版本自定义配置

摘要：在用新建项目后，运行命令，可看到各项配置。按需引入组件文件的配置项中，添加增加装饰器配置文件的配置项中，添加设为，表示使用阶段装饰器语法和行为。原因在中有提到是因为目前只有支持，而目前为止，还只是一个版本。参考自追溯的实现在用create-react-app新建项目后，运行eject命令，可看到各项配置。按需引入ant design组件 1.yarn add babel-plugi...

leone 2019-08-29 18:36 评论0 收藏0