用vue+eslint+vscode实现代码规范化

Posted 恒生LIGHT云社区

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用vue+eslint+vscode实现代码规范化相关的知识,希望对你有一定的参考价值。

目的:这段时间我们组多人开发同一个前端项目,遇到同事提交的代码有大面的格式变更,找到原因是我们vscode安装的代码格式化规范插件和本地配置不同导致的,并且同事设置了保存自动格式化代码,这样的情况容易在合并代码时找不到实际的代码改动点,出现隐患。另一方面也是响应公司代码格式规范化的号召,所以花时间了解了下eslint,跟大家分享。

1. eslint介绍

lint是检查代码格式工具的一个统称,具体的工具有JsLint、android-Lint等,本文介绍的eslint就是lint中的一种。

eslint官网介绍:可组装的javascript和JSX检查工具。

这里我们不讨论JSX,只讨论js。js是弱类型语言,不需要执行程序的编译,所以不容易在开发阶段及时的发现代码错误,需要在不断的调试中修改代码错误。eslint就是一种能够可以帮助前端工程师在编码过程中发现问题,而不是在执行过程中发现问题的工具。

2. eslint特点

  • 内置规则和自定义规则共用一套规则 API;
  • 内置的格式化方法和自定义的格式化方法共用一套格式化 API;
  • 额外的规则和格式化方法能够在运行时指定;
  • 规则和对应的格式化方法并不强制捆绑使用;
  • 每条规则都是各自独立的,可以根据项目情况选择开启或关闭;
  • 用户可以将结果设置成警告或者错误;
  • eslint 并不推荐任何编码风格,规则是自由的;
  • 所有内置规则都是泛化的。

3. eslint+vscode规范化代码操作步骤

3.1. vue项目安装eslint插件

终端输入:

npm install eslint --save-dev   

3.2. 配置eslint

eslint 支持几种格式的配置文件,如果同一个目录下有多个配置文件,eslint 只会使用一个。优先级顺序如下:

  1. JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
  2. YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
  3. JSON -使用 .eslintrc.json 去定义配置的结构,eslint 的 JSON 文件允许 JavaScript 风格的注释。
  4. Deprecated -使用 .eslintrc,可以使 JSON 也可以是 YAML。
  5. package.json - 在 package.json 里创建一个 eslintConfig属性,在那里定义你的配置。

下面介绍一下第5种配置方式:

  "eslintConfig": {
    "root": true,
    // 预定义的全局变量
    "env": {
      "node": true
    },
    // 扩展通过字符串或者数组来扩展规则
    // extentds: \'standard\',
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended" // 启用推荐的规则
    ],
    "parserOptions": {
    // 解析器,这里使用的是babel-eslint
      "parser": "babel-eslint"
    },
    // 自定义规则 可以根据项目需求自定义填写
    "rules": {}
  },

3.3. vscode安装eslint扩展插件

只是在项目中安装eslint是不够的,需要在vscode中安装eslint扩展插件,并进行对应的配置才能看到代码中各种颜色的报错,报错如下图:

如果不想被频繁的格式报错困扰开发过程,可以在vscode中安装代码自动修复的扩展插件,并在setting.json中进行配置,插件可以使用如:prettier-Code formatter、vetur 。

安装vetur插件后代码报错如下图:

3.4. vscode setting.json配置

需要设置的本地,私人的代码规范化处理可以写在vscode 的setting.json文件中。想要实现保存即格式化代码就可以设置在setting.json中。setting.json文件打开方式:vscode-文件-首选项-设置-搜索eslint-随意找一个“在settings.json”中编辑打开settings.json,如下图:

  1. 旧版本配置,如果按照下面配置报错,则使用新版本配置。
{
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "html",
            "autoFix": true
        }
    ]
}
  1. 新版本配置
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
  "eslint.probe": ["javascript", "vue", "html"]
},

4. eslint规则

4.1. 三种级别值:

  • "off"或者0,不启用这个规则
  • "warn"或者1,出现问题会有警告
  • "error"或者2,出现问题会报错

4.2.规则写法:

规则名:值

规则名:[值,参数1,参数2……]


4.3. 常用规则举例:

规则名 规则介绍
no-console 禁用 console
no-debugger 禁用 debugger
init-declarations 要求或禁止var声名中的初始化
eqeqeq 要求使用=== 和!==
indent 强制使用一致的缩进
max-len 强制一行的最大长度
max-len 强制一行的最大长度
semi 要求或禁止使用分号代替ASI
no-var 要求使用let或者const而不是var

详细的eslint自定义规则可以查看:https://cn.eslint.org/docs/rules/

4.4. 格式关闭规则

什么时候需要关闭格式,举个例子:当代码中出现正则/\\ .js$/,格式交易可能会出现"unnecessary escape character:/\\ .",这种情况不能通过修改代码来使报错消失,就可以使用格式关闭规则来跳过此类代码。

下面介绍几种规则:

  1. 关闭范围内格式校验
/* eslint-disable */

alert(\'foo\');

/* eslint-enable */
  1. 关闭某一行的所有格式交易
alert(\'foo\'); // eslint-disable-line

or

// eslint-disable-next-line

alert(\'foo\');

以上就是在vscode中的vue项目,使用eslint,实现代码规范化介绍,希望能对eslint有困惑的同学有所帮助!

以上是关于用vue+eslint+vscode实现代码规范化的主要内容,如果未能解决你的问题,请参考以下文章

vscode+eslint自动格式化vue代码的方法

vscode+eslint自动格式化vue代码的方法

vue项目中开发规范记录

如何配置VSCode中的Prettier和ESLint标准

Vue项目设置Eslint规则

Vue项目设置Eslint规则