eslint配置

phpmatt 发布于2019-08-21 18:28 / 2637人阅读

摘要：例如，以下启用浏览器和环境或者在一个文件中配置规则带有大量的规则。您可以使用配置注释或配置文件修改您的项目使用的规则。将每个全局变量名称设置为等于允许覆盖变量或禁止覆盖。

首次发表在个人博客

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/

服务器托管专线服务 ESLint spring配置数据源配置堡垒机如何配置运维配置 linux配置云服务器配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90492.html

EsLint入门学习整理

摘要：使用文件配置的方式在项目的根目录下，新建一个名为的文件，在此文件中添加一些检查规则。或打开规则，并且作为一个警告并不会导致检查不通过。总结以上是我在学习整理的一些资料，不算太全面，对于像我这样的新手入门足够了介绍 ESLint 是一个插件化的 javascript 代码检测工具，它可以用于检查常见的 JavaScript 代码错误，也可以进行代码风格检查，这样我们就可以根据自己的...

littlelightss 2019-08-22 17:29 评论0 收藏0
更新版-梳理前端开发使用eslint和prettier来检查和格式化代码问题

摘要：整个代码检查和格式化流程应该规范为如下步骤使用并且尝试自动修复所有问题有提示，可以进行修复，按照配置文件来进行修复。参考文档如何花分钟解决产生的各种错误的记忆现场本文转载自我的更新版梳理前端开发使用和来检查和格式化代码问题更新版，之前的版本可以看这里：梳理前端开发使用eslint和prettier来检查和格式化代码问题一、问题痛点在团队的项目开发过程中，代码维护所占的时间比重...

GitChat 2019-08-26 12:02 评论0 收藏0
梳理前端开发使用eslint-prettier检查和格式化代码

摘要：梳理前端开发使用检查和格式化代码问题痛点在团队的项目开发过程中，代码维护所占的时间比重往往大于新功能的开发。使用格式化所有代码。参考文档如何花分钟解决产生的各种错误的记忆现场原文转载梳理前端开发使用检查和格式化代码线上猛如虎，线下怂如鼠梳理前端开发使用eslint-prettier检查和格式化代码问题痛点在团队的项目开发过程中，代码维护所占的时间比重往往大于新功能的开发。因此编...

yangrd 2019-08-22 17:01 评论0 收藏0
在Typescript项目中，如何优雅的使用ESLint和Prettier

摘要：对于项目的编码规范而言，主要有两种选择和。此外由于性能问题，官方决定全面采用，甚至把仓库作为测试平台，而的解析器也成为独立项目，专注解决双方兼容性问题。最近在我的项目的编码规范中全量的用代替了针对其中遇到的问题做一个记录。对于Typescript项目的编码规范而言，主要有两种选择ESLint和TSLint。ESLint不仅能规范js代码，通过配置解析器，也能规范TS代码。此外由...

chemzqm 2019-08-02 15:27 评论0 收藏0
在Typescript项目中，如何优雅的使用ESLint和Prettier

摘要：对于项目的编码规范而言，主要有两种选择和。此外由于性能问题，官方决定全面采用，甚至把仓库作为测试平台，而的解析器也成为独立项目，专注解决双方兼容性问题。最近在我的项目的编码规范中全量的用代替了针对其中遇到的问题做一个记录。对于Typescript项目的编码规范而言，主要有两种选择ESLint和TSLint。ESLint不仅能规范js代码，通过配置解析器，也能规范TS代码。此外由...

WilsonLiu95 2019-08-23 18:29 评论0 收藏0
在Typescript项目中，如何优雅的使用ESLint和Prettier

摘要：对于项目的编码规范而言，主要有两种选择和。此外由于性能问题，官方决定全面采用，甚至把仓库作为测试平台，而的解析器也成为独立项目，专注解决双方兼容性问题。最近在我的项目的编码规范中全量的用代替了针对其中遇到的问题做一个记录。对于Typescript项目的编码规范而言，主要有两种选择ESLint和TSLint。ESLint不仅能规范js代码，通过配置解析器，也能规范TS代码。此外由...

琛ｈ。 2019-08-30 11:18 评论0 收藏0