记录_Vue中如何使用ESLint开发?

boyyor
275 阅读6分钟

序言: 一次配置就好, 你不知道的 ESLint

1. 为什么需要ESlint开发呢?

   在工作中, 实现功能的代码往往有很多种(编码风格), 通过 `ESlint` 工具可以增加代码的阅读性, 它使代码具有一些规范性, 多人协作时代码风格统一

2. 聊聊 ESLint

官网 : ESLint

规则 : ESLint-Rules

ESLint 是一个代码检查工具, 用来检查你的代码是否符合指定的规范 (例如: js语局出现不必要的分号).

  • 规范
    • 行业推荐的规范: 在创建项目时, 我们使用的是 JavaScript Standard Style 代码风格的规则
    • 自定义的规范: 你和你的团队可以自行约定一套规范
  • 使用 ESLint 的好处在于: 多人协作时代码风格统一

eslint 是法官, standard 是法律

3. 使用 vue cli 脚手架创建一个项目, 可以自行选择 ESLint 的严格程度, 如下图:

esilnt严格程度.png

4. JavaScript Standard Style 谈谈规范

在项目创建之初选中了这个规范, 就是说后续说有的代码都必须要遵守这个要求, 否则 ESLint 就会报错.

eg : 下面是这份规则的小部分:

  • 字符串使用单引号 – 需要转义的地方除外
  • 关键字后加空格 if (condition) { ... }
  • 函数名后加空格 function name (arg) { ... }
  • 坚持使用全等 === 摒弃 == 一但在需要检查 null || undefined 时可以使用 obj == null
  • ......

分享两个网站:

Javascript Standard Style -> github 规范
ESLint 参考手册

<s>掘进还支持直接写标签哈哈哈</s>

5. 代码规范错误

ESLint是法官，它用我们约定的法律来检验我们的代码是否合法

如果你的代码不符合 standard 的要求, eslint 会跳出来刀子嘴, 豆腐心地提示你.

image.png

此时控制台会进行报错:

image.png

有错咱就改, 解决办法: 规则中查找 semi 找到错误原因, 进行修改即可

6. 改正错误的几种方式

  • 手动修正: 人肉修改
  • 命令修正: npm run lint
  • 修改规则: 让代码符合修改之后的规则，当然也就不报错了
  • 插件修正: 使用 vscode 中的 eslint 插件

*手动修正

根据错误提示来一项一项手动修正

如果咱不认识命令行中的语法报错是什么意思，可以根据错误规则名字（func-call-spacing, space-in-parens,.....）去 ESLint 规则列表网站中查找其具体含义。

好处: 可以养成良好的编码习惯, 更加专业(讲个小秘密, 我一般都是用插件哈哈哈)

*命令修正

vue-cli创建项目时 提供了自动修复功能（有些复杂的错误还是要手动来改正），具体做法是运行：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }

npm run lint    ||    yarn lint

小结:

eslint 错误修正有四种方式: 后面两种, 下面分别介绍

7. ESLint - 自定义规则

在项目根目录下面, 有一个 .eslintrc.js 文件, 它是对eslint进行配置的, 其中有一个属性是专门用来设置自定义代码规则的: rules

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标准
  ],
  parserOptions: { // 对新语法使用eslint
    parser: 'babel-eslint' // 使用babel-eslint 来解析新语法ES6
  },
  // 这里可以进行自定义规则配置
  // 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' // 不允许有连续多行空行(关闭规则)
  }
}

rules是一个对象，以键值对的格式来约定规则：

  • 键名是规则名（可在报错信息和eslint官网查看）
  • 值是这条规则的具体说明， 最常见的有off, warn, error

示例 - 关闭多行空格

在配置文件中补充一条配置：

  rules: { // 自定义规则 - 其实上面集成后有很多内置的规则, 这里可以进行规则的一些修改
    // 省略其他  + :添加
+   'no-multiple-empty-lines': 'off' // 不允许有连续多行空行(关闭规则)
  }

修改了配置文件，一定要重启项目，验收效果

8. ESLint - 在vscode中使用插件

  • 安装eslint插件

我们还可以安装eslint插件, 让vscode实时告诉我, 我哪里错了

f1e45746cca84357815cff886cb6db3e.png

  • eslint自动格式化修正代码

按如下五个步骤：

image-20210602235429627.png

下面是工作区补充内容：

{
  "eslint.enable": true,
  "eslint.run": "onType",
  "eslint.options": {
      "extensions": [
          ".js",
          ".vue",
          ".jsx",
          ".tsx"
      ]
  },
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  }
}

eslint.run - 运行eslint检验的时刻 (onSave保存) (onType输入时)

editor.codeActionsOnSave - 控制在保存时运行代码操作时修复哪些问题

    - source.fixAll.eslint - 自所有插件的所有可自动修复的ESLint错误都将在保存时修复

9. ESLint - 在vscode中使用插件2

可以直接更改上述第8步中, 复制下面代码到 用户 -> 再切换到代码视图 -> setting.json(在本机上所有的项目, 都可以自动化保存格式化, 不需要每个项目, 都配置工作区中的 setting.json)

{
  "workbench.colorTheme": "Default Dark+",
  "editor.fontSize": 14,
  "workbench.editor.enablePreview": true, //预览模式关闭
  "editor.formatOnSave": true, // #每次保存的时候自动格式化
  // 自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.enable": true, //是否开启vscode的eslint
  // 配置 ESLint 检查的文件类型
  "eslint.validate": ["javascript", "vue", "html"],
  "eslint.options": {
    //指定vscode的eslint所处理的文件的后缀
    "extensions": [".js", ".vue", ".ts", ".tsx"]
  },
  "files.associations": {
    "*.wpy": "vue",
    "*.wxml": "wxml",
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript",
    "*.html": "html"
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "minapp-vscode.disableAutoConfig": true,
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  //  #去掉代码结尾的分号
  "prettier.semi": false,
  //  #使用单引号替代双引号
  "prettier.singleQuote": true,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "git.enableSmartCommit": true,
  "editor.quickSuggestions": {
    "strings": true
  },
  //一定要在vutur.defaultFormatterOptions参数中设置，单独修改prettier扩展的设置是无法解决这个问题的，因为perttier默认忽略了vue文件（事实上从忽略列表移除vue也不能解决这个问题）
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "semi": false, // 格式化不加分号
      "singleQuote": true // 格式化以单引号为主
    },
    "js-beautify-html": {
      // force-aligned | force-expand-multiline
      "wrap_attributes": "force-aligned"
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": true
    }
  },
  // 插件KoroFileHeader
  // 文件头部注释-快捷键crtl+alt+i（window）,ctrl+cmd+t (mac)
  "fileheader.customMade": {
    "Descripttion": "",
    //"version": "",
    "Author": "voanit",
    "Date": "Do not edit",
    "LastEditors": "voanit",
    "LastEditTime": "Do not Edit"
  },
  //函数注释-快捷键ctrl+alt+t (window), ctrl+alt+t(mac)
  "fileheader.cursorMode": {
    "name": "",
    // "test": "test font",
    // "msg": "",
    "param": "",
    "return": ""
  },
  //安装live Server插件
  "liveServer.settings.donotVerifyTags": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.NoBrowser": true,
  "liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器
  "liveServer.settings.host": "127.0.0.1",
  "liveServer.settings.port": 5000, //设置本地服务的端口号
  "liveServer.settings.root": "/distserver",
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "javascript.updateImportsOnFileMove.enabled": "never",
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  "workbench.editor.showTabs": true,
  "terminal.integrated.rendererType": "dom",
  "sync.gist": "396472a5bb443e3680d5a0e2ffccefe8",
  "diffEditor.ignoreTrimWhitespace": true,
  "launch": {},
  "[jsonc]": {
    "editor.defaultFormatter": "remimarsal.prettier-now"
  },
  "[typescript]": {
    "editor.defaultFormatter": "remimarsal.prettier-now"
  },
  "json.schemas": [
    {
      "fileMatch": ["/myfile"],
      "url": "schemaURL"
    }
  ],
  "window.zoomLevel": 1,
  "files.autoSave": "afterDelay",
  "tabnine.experimentalAutoImports": true
}
avatar
文章
阅读
粉丝