开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

什么是eslint

ESLint 是一个根据方案识别并报告 ECMAScript/JavaScript 代码问题的工具，其目的是使代码风格更加一致并避免错误。在很多地方它都与 JSLint 和 JSHint 类似

官方文档

zh-hans.eslint.org/docs/latest…

这里面介绍了eslint的各种配置说明，如果碰到不懂的或者不熟悉的，以官方为准。

eslint下载

npm i -D babel-eslint eslint eslint-config-airbnb-base eslint-plugin-import 这这里面共安装了4个插件。

• babel-eslint：可以对所有有效的babel代码进行lint处理
• eslint：eslint插件
• eslint-config-airbnb-base：这是爱彼迎团队推出来的代码风格，比较严苛，团队入门新手较多时推荐；（其他类似的代码风格还有 eslint-config-standard: js标准风格，特别宽松，推荐使用高级用法，比较灵活，适合精英小团队； eslint:recommended: eslint官方推荐，较严格，使用最广的风格；）
• eslint-plugin-import:这个插件意在提供对ES6+ import/export语法的支持，有助于防止你写错文件路径或者引用的变量名。

项目如果需要增加eslint代码检查规范，大致安装以上插件即可开始编写。

eslint规范配置

项目里新建.eslintrc 文件

module.exports = {
  root: true, // 当前项目使用这个配置文件, 不会往父级目录找.eslintrc.js文件
  env: { // 指定eslint启动环境(vuecli底层是node支持), browser: true也可以在浏览器设置
    node: true
  },
  extends: [ // 扩展配置
    'plugin:vue/essential', // vue里必须的规则
    '@vue/standard'， // 使eslint继承@vue/cli脚手架里的 - standard标准
     'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:prettier/recommended',
  ],
  parserOptions: { // 对新语法使用eslint
    parser: 'babel-eslint', // 使用babel-eslint 来解析新语法ES6
    parser: '@typescript-eslint/parser', //对 TypeScript 的解析
  },
  // 这里可以进行自定义规则配置
  // key：规则代号
  // value：具体的限定方式
  //   "off" or 0 - 关闭规则
  //   "warn" or 1 - 将规则视为一个警告（不会影响退出码）,只警告，不会退出程序
  //   "error" or 2 - 将规则视为一个错误 (退出码为1)，报错并退出程序
  rules: { // 自定义规则 - 其实上面集成后有很多内置的规则, 这里可以进行规则的一些修改
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 上线环境用打印就报警告, 开发环境关闭此规则
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // debugger可以终止代码执行
    'no-multiple-empty-lines': 'off', // 不允许有连续多行空行(关闭规则)
    'vue/script-setup-uses-vars': 'error',
    '@typescript-eslint/ban-ts-ignore': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    'vue/custom-event-name-casing': 'off',
    'no-use-before-define': 'off',
  }
}

eslint与vscode的结合

一半对于eslint，建议vscode进行开发，可以很好的搭配。 vscode可以安装eslint插件，进行配置。 选择vs code左下角的“设置”， 打开 VSCode 配置文件,选择eslint，在setting.json文件中添加如下配置，可以让我们非常规范的书写代码。

{
    "eslint.run": "onType",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "vetur.validation.template": false, // 把 vetur 扩展的 template 格式化去掉
    "editor.formatOnSave": false, // 去掉 vscode 自带的自动保存 ，vscode 默认也是 false的，如果要用 eslint 格式化，默认的格式化就不能开启
    "eslint.enable": true, // eslint 格式化的配置
    "eslint.autoFixOnSave": true, // eslint保存时候自动解决语法错误
    "eslint.options": { // eslint选项-格式化js和vue文件
        "extensions": [
            ".js",
            ".vue"
        ]
    },
    "eslint.validate": [
        "javascript",
        {
            "language": "vue",
            "autoFix": true,
        },
        "html",
        "vue"
    ],
}

总结

eslint可以很好的规范我们的代码格式，与之类似的还有stylelint用来格式化我们的css代码，一般建议搭配使用，这样代码整体的规范性进一步提高了。