每个人编码的习惯不一样,或美观或不美观,或者在编码的过程中会有些疏漏未曾发现。为提高代码美观度、提高代码审阅效率,使得多人协作时代码风格统一,规定一套编码规则并在编写的过程中遵守该规则变得很有必要。在一些比较正式的大公司,公司也会有一套自己的代码编写规则,所以最好在代码生产的时候就一直对编写的代码进行代码检测。养成一个良编码习惯,从我做起!

        ESLint 是一个代码检查工具,用来检查你的代码是否符合指定的规范。一般在在 Vue 项目创建好之后,项目中就已经集成了 ESLint ,平时在开发的过程中可以充分使用该工具。

ESlint 配置

        ESLint 的配置文件是位于项目根目录的 .eslintrc.js 文件。(更多配置详情见:Eslint该如何配置?Eslint使用以及相关配置说明):

module.exports = {
  root: true,
   /* env
    指定脚本的运行环境,每一个环境定义了一组预定义的全局变量,可以定义多个环境。
    - browser - 浏览器环境中的全局变量。
    - node - Node.js 全局变量和 Node.js 作用域。
    - commonjs - CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码)。
    - shared-node-browser - Node.js 和 Browser 通用全局变量。
    - es6 - 启用除了 modules 以外的所有 ECMAScript 6 特性(该选项会自动设置 ecmaVersion 解析器选项为 6) */
  env: {
    node: true,
  },
  /* extends
  提供了继承其它配置文件的选项,属性可以是一个第三方包、配置文件的路径,也可以是字符串数组继承多个
  */
  extends: ["plugin:vue/strongly-recommended", "@vue/standard"],
  parserOptions: {
    parser: "babel-eslint",
  },
  /* rules 是具体的代码检查选项,要改变一个规则设置,必须将规则 ID 设置为下列值之一:
   - "off" 或 0 - 关闭规则
   - "warn" 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序中止)
   - "error" 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会中止)
  */
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    'semi': [2, 'never'],
  },
};

       在编写代码保存会提示错误,说明 ESLint 生效了:

代码修正 

        在 ESLint 进行代码检测并在编辑器中提示出错误之后,我们需要对代码进行修正,代码修正有以下四种方式:

  • 手动修正

        根据错误提示来一项一项手动修正。如果你认识命令行中的语法报错是什么意思,可以根据错误规则名字(func-call-spacing, space-in-parens,…)去 ESLint 规则列表网站中查找其具体含义。

  • 命令修正

        使用 vue-cli 创建项目时提供了自动修复功能(有些复杂的错误还是要手动来改正),具体做法是运行:

npm run lint
  • 修改规则

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

rules: {
  'semi': [2, 'never'],
}

         这条规则表示每一个语句结束之后不需要使用分号,如果语句之后有分号,会提示出错误,可以修改这条规则为:

rules: {
  'semi': [2, 'always'],
}

        这样在编码的时候,在语句后加分号就不会报错了 。

  • 插件修正

        在 VScode 编辑器中搭配 ESLint 插件一起使用,这种方式和命令修正的方式有些类似,使用之后有些复杂的错误还是要手动来改正,但是这种方式相比于命令修正的方式有两个好处:1、可以更加明显的以红色波浪线的形式提示具体出错那一行代码;2、ctrl+s 保存编写的代码时会立即自动修正错误。

        首先在 VScode 中安装 ESLint 插件:

         想要实现在 ctrl+s 保存编写的代码时会立即自动修正错误,还需要在 VScode 中进行如下配置:

         复制通道:

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}

       

Logo

前往低代码交流专区

更多推荐