ESLint

来自康健生活
跳到导航 跳到搜索

作者

ESLint 是由 Nicholas C. Zakas 在2013年开始开发的,它的初衷就是为了能让开发者能自定义自己的 linting rules,而且它提供了一套相当完善的插件机制,可以自由的扩展,动态加载配置规则,同时可以方便的根据报错定位到具体的规则配置。

.editorconfig

# http://editorconfig.org
root = true

[*]
#缩进风格空格
indent_style = space
#缩进大小4
indent_size = 4
#换行符lf
end_of_line = lf
#字符集utf-8
charset = utf-8
#是否删除行尾的空格
trim_trailing_whitespace = true
#是否在文件的最后插入一个空行
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

特征

  • 可扩展、规则独立、可配置。
  • lint工具
  • QA工具

用来作为静态代码检查,避免低级错误和统一代码的风格。

安装

npm install - g eslint
npm install eslint-config-standard eslint-plugin-standard eslint-plugin-promise
eslint --init

命令

初始化和生成.eslintrc.*文件

eslint --init

执行检查命令

eslint add.js

指定配置文件

eslint - c config.json add.js

打印出eslint所使用的配置和规则

eslint --print-config  xx.js > 1

配置

  1. 使用.eslintrc.*文件( 支持JSON和YAML两种语法)
  2. 在package.json中添加eslintConfig配置块
  3. 使用JavaScript注释直接把配置嵌入到文件中

规则

"quotes": "error"

第一部分:规则名 第二部分:规则的严重性(rule severity)

  • "off"
  • or 0 - turn the rule off 不验证 "warn"
  • or 1 - turn the rule on as a warning(doesn’ t affect exit code) 警告 "error"
  • or 2 - turn the rule on as an error(exit code is 1 when triggered) 错误

规则的选项(additional options)

"quotes": [2, "double"]

规则

示例

提交指定文件 示例 示例
示例 示例 示例
示例 示例 示例

技巧

修复代码

package.json
  "scripts": {
    "lint": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
  },

运行

npm run lint

修复代码样式

参数

--ignore-path 指定忽略配置文件,配置此参数,则 .eslintignore 失效
eslint –ignore-path .gitignore
示例 示例 示例
示例 示例 示例

error

  • ESLint: Expected indentation of 10 spaces but found 20 spaces.(
    rules: {
            indent: ["error", 4, { SwitchCase: 1 }],
    
  • ESLint:please specify Node.js interpreter correctly
    webstorm 没有配置 nodejs 环境,我使用的是 wsl(windows subsystem for linux),所以没有找到命令
  • eslint: please specify path to eslint package
    npm i eslint
  • ESLint: Unexpected side effect in "renderDataList" computed property.(vue/no-side-effects-in-computed-properties)
    此规则旨在防止在计算属性中产生副作用的代码,报错代码如下:
    renderDataList() {
      const HSF = this.list
      const dataFilters = HSF[0].filters
      this.isCountry = dataFilters[0].key
      this.isDepartment = dataFilters[1].key
      this.isCountryValue = dataFilters[0].options[0].value
      this.isDepartmentValue = dataFilters[1].options[0].value
      return {
        searchFilters: dataFilters
      }
    }
    
    更改为如下
    computed: {
      renderDataList: {
        get() {
          const HSF = this.list
          if (!HSF[0].filters) {
            return []
          }
          return {
            searchFilters: HSF[0].filters
          }
        },
        set() {
          const param = this.renderDataList.searchFilters
          this.isCountry = param[0].key
          this.isDepartment = param[1].key
          this.isCountryValue = param[0].options[0].value
          this.isDepartmentValue = param[1].options[0].value
        }
      }
    },
    
  • Parsing error: setter must have exactly one formal parameter
  • 'util.isArray' was deprecated since v4.0.0. Use 'Array.isArray()' instead.(node/no-deprecated-api)
  • Arrow function has a complexity of 30. Maximum allowed is 20.(complexity)
  • Type of the default value for 'searchHotList' prop must be a function
    props: {
      searchHotList: {
        type: Array,
        default: function () { return [] }
      }
    }
    
    props: {
      searchHotList: {
        type: Array,
        default: () => [] // es6的箭头函数
      }
    }
    
  • ESLint: Missing accessibility modifier on method definition constructor.(@typescript-eslint/explicit-member-accessibility)
    缺少可访问的修饰符

雁阵规则