eslint_eslint 属性换行 - CSDN
精华内容
参与话题
  • 什么是ESLint

    千次阅读 2020-02-24 10:35:37
    在我们学习ESLint之前,我们先来了解一下什么是ESLint ? 什么是ESLint? 官网上告诉我们,ESLint 是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具,哦,所以我们可以知道,ESLint 就是一...

    在我们学习ESLint之前,我们先来了解一下什么是ESLint ?

    什么是ESLint?

    官网上告诉我们,ESLint 是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具,哦,所以我们可以知道,ESLint 就是一个工具,而且是一个用来检查代码的工具。

    代码检查是一种静态的分析,常用于寻找有问题的模式或者代码,并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查,一般来说编译程序会内置检查工具。

    JavaScript 是一个动态的弱类型语言,在开发中比较容易出错。因为没有编译程序,为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。

    ESLint 这样的工具可以让程序员在编码的过程中发现问题,而不是在执行的过程中发现问题。

    ESLint和 JSLint、JSHint的区别

    在许多方面,ESLint和 JSLint、JSHint 相似,不过以下几点除外:

    • ESLint 使用 Espree 解析 JavaScript。
    • ESLint 使用 AST 去分析代码中的模式。
    • ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。

    ESlint的特点

    • 内置规则和自定义规则共用一套规则 API。

    • 内置的格式化方法和自定义的格式化方法共用一套格式化 API。

    • 额外的规则和格式化方法能够在运行时指定。

    • 规则和对应的格式化方法并不强制捆绑使用。

    • 每条规则都是各自独立的,可以根据项目情况选择开启或关闭。

    • 用户可以将结果设置成警告或者错误。

    • ESLint 并不推荐任何编码风格,规则是自由的。

    • 所有内置规则都是泛化的。

    链接:https://www.9xkd.com/

    展开全文
  • vue 关闭vue项目中烦死人的ESlint

    万次阅读 多人点赞 2020-04-19 14:43:09
    【已解决】vue 关闭vue项目中烦死人的ESlint 很多时候,因为一些书写问题,ESlint会报错。

     

    ——问题——

    每次都红我缩进,

    每次都要改,太麻烦了

     

    ——解决——

    最好的办法就是创建项目的时候不要ESlint

     

     

    其他办法

    1.关闭软件webstorm 的ESlint

    file->settings->搜索ESlint->取消Enable的勾选

     

    2.注释掉项目内的ESlint

    项目目录下build.js->webpack.base.conf.js文件里面有段代码  注释掉!!!

     

     

    好了!特别清爽的感觉!

    温馨提示:ctrl+alt+L可以规范webstorm中的格式哦~让那个比教导主任还严的ESlint滚粗

    展开全文
  • Eslint使用

    千次阅读 2018-08-25 23:42:51
    // 安装 eslint // 局部安装 npm i --save-dev eslint // 或者全局安装 npm i -g eslint 使用 eslint --init 之后会出现几个选项,看选项就知道大概是什么意思了,这里重点看第一、第二个选项 大众配置 第...
    开始
    // 安装 eslint
    // 局部安装
    npm i --save-dev eslint
    // 或者全局安装
    npm i -g eslint
    使用
    eslint --init

    之后会出现几个选项,看选项就知道大概是什么意思了,这里重点看第一、第二个选项
    02.png

    • 大众配置

    第一个选项是选择一些流行的规范,这里以Standard为例,回车后根据自己的需要输入y或者n
    03.png

    配置文件选用了js文件格式,完成后如下:
    04.png

    配置规则-English 配置规格-中文

    • 自定义配置

    根据自己的需要,输入y/N,如下
    05.png
    得到的配置文件如下:
    06.png
    之后你可以往里面继续添加自己的规格,详情请看eslint官网

    心得

    直接使用一些大众的规则就好了,不需要自己再配置,以后团队协作也很方便,而且编辑器里面大部分都会有插件支持这些大众规则的。

    demo
    展开全文
  • eslint安装 1、全局安装 2、项目安装 eslint 定义规则 eslint 代码检测和修复 .eslintignore 忽略文件 创建自己的规则风格文件 使用编辑器插件标识错误以及自动修复代码

    ESLint 配置


    一、eslint 安装


    1、全局安装
    npm i -g eslint
    
    • 全局安装的好处是,在任何项目我们都可以使用eslint的全局命令进行代码规则操作,但是这对我们的意义并不大,后续会详细介绍;
    • 全局安装之后,要求相关的eslint插件页必须全局安装,这对多人开发项目来说会比项目安装更加繁琐。所以,我们这里采用在项目上安装eslint:
    2、项目安装
    npm i -D eslint
    
    3、编辑器安装,后续文章会有介绍

    二、eslint 定义规则


    1、创建 .eslintrc.js 文件
    • 可以使用 ./node_modules/.bin/eslint --init 创建文件
    • .eslintrc.* 文件支持 .js .yaml .yal .json等格式的配置文件,这里使用 .js文件
    • 在 package.json 里创建一个 eslintConfig 属性,在那里,同样可以定义你的配置
    • 如果 .eslintrc.js 和 package.json里的 eslintConfig 同时存在,则只读取 .eslintrc.js文件

    2、eslint 选项说明

    "root": true
    

    默认情况下,ESLint 会在所有父级目录里寻找配置文件,一直到根目录。如果发现配置文件中有 “root”: true,它就会停止在父级目录中寻找。

    "parserOptions": {
    	"parser": "babel-eslint", // 解析器,默认使用Espree
        "ecmaVersion": 6, // 支持es6语法,但并不意味着同时支持新的 ES6 全局变量或类型(比如 Set 等新类型)
        "sourceType": "module",	// 指定来源的类型,"script" (默认) 或 "module"(如果你的代码是 ECMAScript 模块)
        // 使用的额外的语言特性
        "ecmaFeatures": {
            "jsx": true, // 启用 JSX
            "globalReturn": true, // 允许在全局作用域下使用 return 语句
            "impliedStrict": true, // 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
            "experimentalObjectRestSpread": true,	// 启用实验性的 object rest/spread properties 支持。(重要:这是一个实验性的功能,在未来可能会有明显改变。 建议你写的规则 不要 依赖该功能,除非当它发生改变时你愿意承担维护成本。)
        }
    }
    

    解析器选项可以在 parserOptions 属性设置。设置解析器选项能帮助 ESLint 确定什么是解析错误,所有语言选项默认都是 false。如上:

    "env": {
        es6: true, // 启用 ES6 语法支持以及新的 ES6 全局变量或类型
        node: true, // Node.js 全局变量和 Node.js 作用域
        browser: true, // 浏览器全局变量
        jquery: true // jQuery 全局变量
    }
    

    使用 env 关键字指定你想启用的环境。如上:
    更多环境设置请参考:https://cn.eslint.org/docs/user-guide/configuring#specifying-environments

    "globals": {
        template: false, // false 不允许被重写
        _util: false
    }
    

    当访问当前源文件内未定义的变量时,no-undef 规则将发出警告。如果你想在一个源文件里使用全局变量,推荐你在 ESLint 中定义这些全局变量,这样 ESLint 就不会发出警告了。如上:

    "plugins": [
        "html" // 此插件用来识别.html 和 .vue文件中的js代码
    ]
    

    ESLint 支持使用第三方插件。在使用插件之前,你必须使用 npm 安装它。如:npm i -D eslint-plugin-html。在配置文件里配置插件时,可以使用 plugins 关键字来存放插件名字的列表。插件名称可以省略 eslint-plugin- 前缀。如上:

    "extends": "eslint:recommended"
    

    一个配置文件可以从基础配置中继承已启用的规则。如上,如果值为字符串数组则每个配置继承它前面的配置。值为 “eslint:recommended” 的 extends 属性启用了eslint默认的规则,请参考:https://cn.eslint.org/docs/rules/

    "rules": {
    	'indent': [2, 4], // 强制使用一致的缩进
        'eqeqeq': [2, 'always'], // 要求使用 === 和 !==
        'semi': [2, 'never'], // 要求或禁止使用分号代替 ASI 
        'quotes': [2, 'single']  // 强制使用一致的反勾号、双引号或单引号
    }
    

    ESLint 附带有大量的规则。你可以在rules选项中设置,设置的规则将覆盖上面继承的默认规则。要改变一个规则设置,你必须将规则 ID 设置为下列值之一:

    • “off” 或 0 - 关闭规则
    • “warn” 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)
    • “error” 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)

    三、eslint 代码检测和修复


    这里讲的是使用 eslint 命令行来操作,后续会讲到如何用编辑器提升代码效率


    1、代码检测

    项目根目录运行 eslint,检测指定文件,支持 glob 模式

    ./node_modules/.bin/eslint index.js
    

    检测index.js文件,如下,有一个错误:多余的分号(基于semi规则)。并告诉我们此规则可以通过 --fix 命令修复。

    在这里插入图片描述
    指定文件后缀名

    ./node_modules/.bin/eslint --ext .js,.html src
    

    目前,告诉 ESLint 哪个文件扩展名要检测的唯一方法是使用 --ext 命令行选项指定一个逗号分隔的扩展名列表。注意,该标记只在与目录一起使用时有效,如果使用文件名或 glob 模式,它将会被忽略。

    2、代码修复

    项目根目录运行

    ./node_modules/.bin/eslint index.js --fix
    

    会自动修复代码,当然不是所有的规则都能实现自动修复的,具体说明请参照:https://cn.eslint.org/docs/rules/


    四、eslint更多配置方式


    完整的 配置层次结构,从最高优先级最低的优先级,如下:

    1、行内配置
    /*eslint-disable*//*eslint-enable*/
    /*global*/
    /*eslint*/
    /*eslint-env*/
    
    2、命令行选项
    --global
    --rule
    --env
    -c、--config
    
    3、项目级配置
    • 与要检测的文件在同一目录下的 .eslintrc.\*package.json 文件
    • 继续在父级目录寻找 .eslintrcpackage.json文件,直到根目录(包括根目录)或直到发现一个有"root": true的配置。
    4、如果不是(1)到(3)中的任何一种情况,退回到 ~/.eslintrc 中自定义的默认配置。

    五、.eslintignore 忽略文件


    1、定义及作用

    在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略特定的文件和目录。

    2、忽略规则
    • .eslintignore 文件是一个纯文本文件,其中的每一行都是一个 glob 模式表明哪些路径应该忽略检测。如:

      /dist/
      /*.js
      
    • eslint总是忽略 /node_modules/\*/bower_components/\* 中的文件

    3、用eslint命令检查忽略文件
    ./node_modules/.bin/eslint index.js
    

    在这里插入图片描述

    六、创建自己的规则风格文件


    1、命名
    eslint-config-* // 如:eslint-config-vui
    
    2、上传

    参照发布一个自己的npm包

    3、下载
    npm i -D eslint-config-vui
    
    4、使用

    在继承规则 extends 属性中定义自己上传的规则名,可以忽略 eslint-config- 字符,如下:

    extends: ['vui']
    
    5、eslint-config-vui 规则源码地址(记得给星哦)

    https://github.com/shiguang0116/eslint-config-vui


    七、使用编辑器插件标识错误以及自动修复代码


    为什么使用编辑器插件:上述讲到的使用 eslint 命令来检测和修复代码的操作显然非常繁琐,我们需要能够自动修复代码的工具,相关编辑器都提供了 eslint 插件。

    参考ESLint配置(二):vscode配置eslint,实现错误代码标识以及自动修复


    八、使用构建工具检测代码


    为什么:以上方式,包括后续讲到的使用编辑器修复代码,都只是自我书写代码的规范意识而已,在多人开发时如何强制性的要求提交的代码是符合我们自定的规范呢?这就需要在构建工具做相应的配置。

    参考ESLint配置(三):构建工具(webpack、gulp)配置eslint



    系列文章


    ESLint配置(一):eslint默认及自定义规则介绍,上传自己的eslint-config-*风格文件
    ESLint配置(二):vscode配置eslint,实现错误代码标识以及自动修复
    ESLint配置(三):构建工具(webpack、gulp)配置eslint

    展开全文
  • eslint的使用

    千次阅读 2018-07-11 13:48:04
    ESlint 被设计为完全可配置的,这意味着你可以关闭每一个规则而只运行基本语法验证,或混合和匹配 ESLint 默认绑定的规则和你的自定义规则,以让 ESLint 更适合你的项目。有两种主要的方式来配置 ESLint: 1- ...
  • ESlint 配置从0到1 (一)

    2019-06-21 11:05:38
    配置 ESlint 的两种方式 配置注释:通过在 js 文件中嵌入注释的形式进行 ESlint 的配置; 配置文件:在当前工作目录下使用一个 JS,JSON 或是 YAML文件来指定配置信息。这个文件可以命名为 .eslintrc.* ,或者是在 ...
  • ESlint--下载、初始化

    2020-07-24 21:18:42
    1、安装ESlint npm install eslint -g npm install eslint --save-dev 2、初始化ESlint npx eslint --init 3、基本配置(部分参数) –no-eslintrc 补充.eslintrc.*和package.json文件中的配置。 eslint --no-...
  • 项目增加eslint

    千次阅读 2019-08-08 17:25:56
    使用eslint的好处,就不过多的去阐述了,下面介绍一下,先有的工程,如何使用eslint。 1.安装eslint 使用NPM/Yarn进行安装。 # npm $ npm install eslint -g # yarn $ yarn global add eslint 安装之后,使用...
  • ESLint 教程

    2019-09-03 12:04:40
    ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。 首先,安装 ESLint。 npm i -g eslint 然后,安装 Airbnb 语法规则,以及 import、a11y、react 插件。 $ npm i -g ...
  • eslint的用法

    千次阅读 2018-05-11 01:17:52
    eslint介绍及用法 eslint是一个插件化的代码检测工具,可以用于检查常见的代码错误,也可以进行代码风格上的检查,控制代码的质量,提高代码的可读性。在团队协作中,统一的代码风格更具可读性、可维护性。 js ...
  • webstorm-----eslint的配置和使用(2018版)

    万次阅读 多人点赞 2018-04-26 21:56:19
    在使用vue的项目中,我们有时候就会用到eslint去要求团队的代码规范一样。下面就让我们一起来配置一下,个人习惯是用英文版的webstorm(也建议大家使用英文版),我所有的并不是全局安装eslint的方法,可以针对单个...
  • 令人抓狂的ESLint配置和公司代码风格规范 1.背景 今年公司招了几个新人,在他们写代码之前,我讲解了一些公司基本的编码规范(比如:函数的程度、命名等等),招的新人都有一定的开发经验,加之我们公司又没有强制的...
  • ESLint的配置使用

    2020-09-23 17:21:02
    ESLint 介绍 什么是eslint: ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。 eslint的目标是提供一个插件化的 JavaScript代码规范检测工具。 目标:全部开发人员编写javascript代码的时候保持...
  • eslint 的三大通用规则

    万次阅读 2017-07-27 11:47:47
    eslint官方提供了3种预安装包: eslint-config-google Google标准 执行安装: npm install eslint eslint-config-google -g eslint-config-airbnb Airbnb标准,它依赖eslint, eslint-plugin-import, ...
  • vue项目关闭eslint校验

    万次阅读 多人点赞 2018-03-19 12:15:26
    简介eslint eslint是一个JavaScript的校验插件,通常用来校验语法或代码的书写风格。 官方文档:https://eslint.org 这篇文章总结了eslint的规则:Eslint规则说明 关闭eslint校验 有了eslint的校验,可以来规范...
  • Eslint 在vscode上配置不生效问题解决

    万次阅读 2019-03-06 12:18:05
    eslint在vscode上配置1. 左侧Extensions中下载eslint插件2. npm全局下载eslint, 并进行初始化3. 打开 file -> preferences -> settings4. 根据自己喜好配置.eslintrc.js规则文件贴图我本地代码 1. ...
  • idea中关闭eslint

    千次阅读 2019-02-13 20:04:37
    file->setting 搜索eslint 将Enable选项勾选掉
  • idea中配置eslint 和javascript版本

    万次阅读 2019-05-28 10:36:18
    自己也老是忘掉去配置,这里就先记录下eslint 和javascript版本的配置,这两个配置一般能解决大部分红线 eslint eslint官网 https://eslint.org/ ,ESLint 是一个代码规范和错误检查工具,能使你的代码更加的规范。 ...
  • 忽略eslint检查的方法

    千次阅读 2019-03-12 14:43:56
    只需在代码块的头部尾部分别添加 /* eslint-disable */ 即可。 /* eslint-disable */ var ****** **** ***** /* eslint-disable */
  • vue cli关闭eslint严格语法检查

    万次阅读 2018-06-30 22:56:26
     这篇文章总结了eslint的规则:Eslint规则说明1、关闭eslint校验有了eslint的校验,可以来规范开发人员的代码,是挺好的。但是有些像缩进、空格、空白行之类的规范,在开发过程中一直报错,未免太过于苛刻了。所以...
1 2 3 4 5 ... 20
收藏数 32,201
精华内容 12,880
关键字:

eslint