eslint配置

首次发表在个人博客

eslint配置

全局安装

npm install -g eslint

局部安装

npm i -D eslint

接下来新建一个配置文件.eslintrc.js,或执行以下命令自动生成

eslint --init

制定环境

要指定配置文件中的环境，请使用env键并指定要启用的环境true。例如，以下启用浏览器和Node.js环境：

{
    "env": {
        "browser": true,
        "node": true
    }
}

或者在一个package.json文件中

{
    "name": "mypackage",
    "version": "0.0.1",
    "eslintConfig": {
        "env": {
            "browser": true,
            "node": true
        }
    }
}

配置规则

ESLint带有大量的规则。您可以使用配置注释或配置文件修改您的项目使用的规则。要更改规则设置，您必须将规则ID设置为以下值之一：

• "off"或者0- 关闭该规则
• "warn"或者1- 将规则打开为警告（不影响退出代码）
• "error"或者2- 将规则打开为错误（触发时退出代码为1）

通过内联注释禁用规则

• 要在整个文件中禁用规则警告，请在文件/ eslint-disable /顶部添加块注释：

/* eslint-disable */

alert('foo');

• 要禁用特定行上的所有规则，请使用以下格式之一的行注释：

alert('foo'); // eslint-disable-line

// eslint-disable-next-line
alert('foo');

制定全局

可以使用文件内部的注释或配置文件来定义全局变量。

1.使用文件内部注释

(1).要在JavaScript文件中使用注释来指定全局变量，请使用以下格式

/* global var1, var2 */

(2).如果你想要指定这些全局变量不应该被写入（只读），那么你可以设置每个false标志：

/* global var1:false, var2:false */

2.要在配置文件中配置全局变量，请使用globals键并指示要使用的全局变量。将每个全局变量名称设置为等于true允许覆盖变量或false禁止覆盖。例如：

{
    "globals": {
        "var1": true,
        "var2": false
    }
}

使用心得

目前使用vscode,安装eslint插件,然后在配置中加入关于eslint的配置

{
    "eslint.autoFixOnSave": true,
    "eslint.enable": true,
    "eslint.options": {
       "extensions": [".js", ".vue", ".jsx"]
    },
    "eslint.validate": [
        {
          "language": "vue",
          "autoFix": true
        },
        {
          "language": "javascript",
          "autoFix": true
        },
        {
          "language": "javascriptreact",
          "autoFix": true
        }
    ],
}

"eslint.autoFixOnSave": true,配置完这个之后,当你在保存的时候可以自动按照你在.eslintrc.js目录中设置的规则自动修复一些空格缩进,单双引号及语句末尾是否需要加;或,的一些错误,但是有一些错误,比如变量声明未定义等得需要你手动去修改.

刚开始用到eslint的时候也是相当痛苦,毕竟在代码中看到一大堆红线(注: 红线为eslint的错误,鼠标划上去就会看到对应的违反了哪个规则,可以去eslint的官网查看),但是当你养成良好的习惯之后,这些习惯包括变量命名,函数命名等,其实会大大的提高工作效率,规范起来之后尤其会提高团队之前的工作效率.

我现在就有严重的代码洁癖,看到整洁的代码,心情就会十分愉悦.当然在看到团队有小伙伴一点都不注意这些,尤其需要忙他debug的时候,真的很难受,变量命名a,b, a1等.所以哪怕为了不坑团队成员的,也要养成良好的习惯.

参考

• eslint.org/docs/