React系列---ESlint

yanbingyun1990 发布于2019-08-20 17:30 / 2193人阅读

摘要：是一个代码静态检查工具，可以检查的语法错误，提示潜在的，可以有效提高代码质量。维持前端团队高度一致的编码风格。

ESLint是一个JavaScript代码静态检查工具，可以检查JavaScript的语法错误，提示潜在的bug，可以有效提高代码质量。维持前端团队高度一致的编码风格。ESLint不但提供一些默认的规则，也提供用户自定义规则来约束所写的JavaScript代码。

详细的可以参考：ESLint中文

让项目加上ESLint代码规范支持非常容易。

安装安装ESLint、ESLint loader

npm install --save-dev eslint@3.19.0
npm install --save-dev eslint-loader

逐个配置规则有点麻烦，ESLint有很多第三方配置好的格式插件，Airbnb开发配置合集就比较常用：

npm install --save-dev eslint-config-airbnb

Airbnb包括了以下三个插件需要安装：

npm install --save-dev eslint-plugin-import
npm install --save-dev eslint-plugin-react 
npm install --save-dev eslint-plugin-jsx-a11y

项目根目录下创建并ESLint配置文件，.eslintrc.js：

module.exports = {
  // 指定校验的ECMAScript的版本及特性
  "parserOptions": {
    "ecmaVersion": 7, // ECMAScript版本，7为ES7
    "sourceType": "module", //默认script，如果代码是ECMAScript模块，设置为module
    "ecmaFeatures": { // 使用额外的语言特性
        "jsx": true // 启用JSX
    }
  },
  // 当访问未定义的变量时，no-undef 规则将发出警告
  // 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量
  "env": {
    "es6": true,
    "node": true,
    "browser": true,
  },
  // 当访问未定义的变量时，no-undef 规则将发出警告
  // 脚本在执行期间访问的额外的全局变量
  "globals": {
    "document": true,
    "navigator": true,
    "window":true,
    "node":true
  },
  // 使用第三方airbnb开发配置合集
  "extends": "airbnb",
  // eslint-config-airbnb包括了以下3个插件
  "plugins": [
    "react",
    "jsx-a11y",
    "import"
  ],
  // 定义自己的规则
  "rules": {
    "comma-dangle": ["error", "never"], // 要求或禁止末尾逗号：不允许逗号
    "indent": ["error", 4], // JavaScript代码强制使用一致的缩进：4格缩进
  }
};

可以参照ESLint完整规则列表，找到并定制自己的规则。

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

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

前端系列——React开发必不可少的eslint配置

摘要：项目需要安装的插件配置详情下面的配置涵盖了开发者所需要的绝大部分信息，中的值分别表示不开启检查警告错误。配置文件类型配置文件类型不只有和，其实包括下面这些项目需要安装的插件 babel-eslint: ^8.0.3, eslint: ^4.13.1, eslint-plugin-react: ^7.5.1, 配置详情下面的配置涵盖了开发者所需要的绝大部分信息，rules中的值0、1...

keithxiaoy 2019-08-26 11:33 评论0 收藏0
Webpack系列——手把手教你使用Webpack搭建简易的React开发环境

摘要：在这篇文章中我们开始利用我们之前所学搭建一个简易的开发环境，用以巩固我们之前学习的知识。文章首发于我的github及个人博客，github请看https://github.com/huruji/blo...，转载请注明出处。在这篇文章中我们开始利用我们之前所学搭建一个简易的React开发环境，用以巩固我们之前学习的Webpack知识。首先我们需要明确这次开发环境需要达到的效果：1、...

cucumber 2019-08-22 11:06 评论0 收藏0
从react-start到co源码(一)

摘要：安装这个预设主要包含了如下两个插件实现热加载捕获中的方法并展现在界面上修改上述的文件文件通过上面的几个步骤我们就大致完成了开发环境的基本搭建。应该在中进行配置以上就是简单的环境搭建后面会推出后续的文章。 react作为当前十分流行的前端框架，相信很多前端er都有蠢蠢欲动的学习它的想法。工欲善其事，必先利其器。这篇文章就简单的给大家介绍一下如何我快速的搭建一个react前端开发环境。主要...

gekylin 2019-08-20 13:44 评论0 收藏0
前端代码风格自动化系列（五）之共同出击

摘要：我们在前面的四篇中介绍了这些工具，可以完成以最小的代价在提交到远程仓库前，格式化为统一风格的代码，大家都很熟悉这里就不列举了。下面举一个配置。这里对于项目里分别做了提交前格式化操作，对于提交规范做了校验。我们在前面的四篇中介绍了husky、commitlint、lint-staged、prettier这些工具，可以完成以最小的代价在Git提交到远程仓库前，格式化为统一风格的代码，es...

pumpkin9 2019-08-23 14:33 评论0 收藏0