React系列---ESlint

2024年4月2日 162次阅读 来源: zhutianxiang

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完全划定规矩列表，找到并定制本身的划定规矩。

    原文作者：zhutianxiang
    原文地址: https://segmentfault.com/a/1190000009914940
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞