给旧项目加上eslint

550 阅读2分钟
  1. 安装eslint
npm i eslint --D
  1. 创建ESlint配置文件.eslintrc.js:
eslint --init

以上选项一路回车即可,这些就是使用的eslint规则

  1. 执行eslint .eslintrc.js文件生成之后,我们就可以使用基本的命令规范我们的代码了,如:
eslint --fix index.js

当然,如果你使用了ES6的语法,上述命令执行后会报如下错误:

Parsing error: Unexpected token = ***

原因是开发环境与ESLint当前的解析功能不兼容,因此我们需要执行下一个步骤;

  1. 安装 babel-eslint :
npm i babel-eslint --D

安装完成后,在.eslintrc中添加配置:"parser": "babel-eslint" 即可;

  1. .eslintrc.js配置参考文件

  2. 优化package.json

{
  "name": "project",
  "version": "1.0.0",
  "scripts": {
    "lint": "eslint --fix pages utils"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.3",
    "eslint": "^6.4.0"
  },
  "license": "ISC",
}

执行以下命令来管理项目中的文件

npm run lint 

.eslintrc.js配置参考:

module.exports = {
  'env': {
    'browser': true,
    'node': true,
    'es2020': true,
    "commonjs": true
  },
  //配置解析器
  "parser": "babel-eslint",
  'extends': [
    'eslint:recommended',
    "prettier",
    "prettier/standard"
  ],
  'parserOptions': {
    'ecmaVersion': 11,
    'sourceType': 'module'
  },
  //插件
  "plugins": [
    "prettier"
  ],
  /**
   * "off" 或 0 - 关闭规则
   * "warn" 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出),
   * "error" 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)
   */
  'rules': {
    // 强制使用一致的缩进
    'indent': [
      'error', 2
    ],
    //禁止空格和 tab 的混合缩进
    "no-mixed-spaces-and-tabs": [
      "error", "smart-tabs"
    ],
    // 强制在 function的左括号之前使用一致的空格
    "space-before-function-paren": [2, "always"],
    // 不允许在变量定义之前使用它们
    'no-use-before-define': 2,
    // 禁止或强制在单行代码块中使用空格(禁用)
    "block-spacing": [1, "never"],
    // 控制逗号前后的空格
    "comma-spacing": [2, {
      "before": false,
      "after": true
    }],
    // 文件末尾强制换行
    "eol-last": 2,
    // 不允许多个空行
    "no-multiple-empty-lines": [2, {
      "max": 1
    }],
    // 禁用行尾空格
    "no-trailing-spaces": 2,
    // 禁止出现未使用过的变量
    "no-unused-vars": [2, {
      "vars": "all", // all 检测所有变量,包括全局环境中的变量。这是默认值。
      "args": "none" // none - 不检查参数。
    }],
    // 强制一行的最大长度
    "max-len": [0, 200, {"ignoreUrls": true}],
    // 禁止在条件中使用常量表达式
    "no-constant-condition": 2,
    // 要求使用 let 或 const 而不是 var
    "no-var": 1,
    // 禁止修改 const 声明的变量
    "no-const-assign": 2,
    // 箭头函数两边加上空格
    "arrow-spacing": [2, {
      "before": true,
      "after": true
    }],
    // 要求操作符周围有空格
    "space-infix-ops": 2,
    // 强制在圆括号内使用一致的空格
    "space-in-parens": [2, "never"],
    // 强制在块之前使用一致的空格
    "space-before-blocks": [2, "always"],
    // 强制分号之前和之后使用一致的空格
    "semi-spacing": 2,
    // 禁止属性前有空白
    "no-whitespace-before-property": 2,
    // 对象字面量中冒号的前后空格
    "key-spacing": [1, {
      "beforeColon": false,
      "afterColon": true
    }],
    // 如果if语句里面有return,后面不能跟else语句
    "no-else-return": 1,
  }
}