/*eslint-disable*/

在 Vue-cli 竖立的项目中,运用了 ESLint 范例代码的项目中怎样针对单个js文件禁用ESLint语法校验,但全部项目依旧保存 ESLint 的校验划定规矩?

在代码顶部增加一行解释 /eslint-disable/ (两个/中心有两个*,像问题那样) ,ESLint 在校验的时刻就会跳过背面的代码。

比方:main.js 里的/ eslint-disable no-new /(两个/中心有两个*,像问题那样)
在js内里,new 一个对象,须要赋值给某个值(变量),用Vue实例化的时刻,不须要赋值给值(变量),所以要零丁给配一条划定规矩,给new Vue这行代码上面加这个解释,把这行代码划定规矩的校验跳过,经由过程eslint-disable。eslint的经常运用技能之一
一. 装置
npm install eslint

二. 设置
ESLint的设置有三种体式格局:

1、.eslintrc.*文件的设置
起首你须要初始化设置文件。

eslint init

这将会在你的当前目次下天生一个.eslintrc.*文件。.eslintrc的后缀可所以.js、.yalm、.yml和.json中的恣意一个。以.json花样为例。

.eslintrc.json 文件的内容相似以下: 
{ 
//extends用于引入某设置作为基础设置,然后再在后续的rules中对其举行扩大 
"extends": "eslint:recommended", 

//假如你想运用插件中的环境变量,请先把插件名写入”plugins”数组中,然后再在”env”:{}中以”插件名/插件中的需引入的环境名”的体式格局举行指定。

"plugins": ["example"], 
"env": { 
//An environment defines global variables that are predefined. 
//定义env会带进来一些全局变量 
"browser": true, 
"node": true, 
"es6":true, 
"mocha":"true", 
"qunit":true, 
"jquery":true, 
"mongo":true, 
//经由过程插件名定名空间引入插件中的环境 
"example/custom": true 
}, 
"globals": { 
// globals are the additional global variables your script accesses during execution. 
// 即插件在实行过程当中用到的别的全局变量 
"angular": true, 
}, 
"rules": { 
//which rules are enabled and at what error level. 
//这里指定用哪些划定规矩举行eslint搜检以及每一个划定规矩的毛病级别:0或许off示意划定规矩封闭,失足也被疏忽;1或许warn示意假如失足会给出正告;2或许error示意假如失足会报出毛病 
"semi": ["error", "always"], 
"quotes": ["error", "double"] 
}, 
//parser指定解析器,默许的为espree,可选的另有Esprima、Babel-ESLint。 
//babel-eslint is a wrapper around the Babel parser that makes it compatible with ESLint. 
//babel-eslint是一个Babel parser的包装器,这个包装器使得Babel parser可以和ESLint谐和事情 
"parser": "babel-eslint", 
"parserOptions": { 
//ecmaVersion指定ECMAScript的版本,可选值有3\5\6\7,默许是5 
"ecmaVersion": 6, 
//sourceType指定被搜检的文件是什么扩大名的,可选项"script"和"module",默许是"script"。"module"是ES6的。 
"sourceType": "module", 
//ecmaFeatures指定你想运用哪些分外的言语特征 
"ecmaFeatures": { 
"jsx": true 
} 
}, 
} 
“rules”中的每一项等于一条划定规矩。个中,“:”之前的事划定规矩的称号(如上面的”semi” 和 “quotes”),“:”背面的数组中,第一个项用于指定划定规矩的毛病级别,它有 3 个可选的取值:

“off” 或许 0 - 封闭划定规矩

“warn” or 1 - 不符合划定规矩时作为一个正告(不会影响退出码)

“error” or 2 - 不符合划定规矩时视作一个毛病 (退出码为1)

在你的.eslintrc文件中包括这行代码,可以运用引荐划定规矩。

"extends": "eslint:recommended"

经由过程这行代码,会开启划定规矩页中标有对勾标记的划定规矩。固然,你也可以到 npmjs.com 搜刮 “eslint-config” 查找他人竖立好的设置列表,并拿来直接运用。

.eslintrc.假如放在项目的根目次中,则会作用于全部项目。假如在项目的子目次中也包括着.eslintrc文件,则关于子目次中文件的搜检会疏忽掉根目次中的设置,而直接采纳子目次中的设置,这就可以在差别的目次范围内运用差别的搜检划定规矩,显得比较天真。ESLint采纳逐级向上查找的体式格局查找.eslintrc.文件,当找到带有”root”: true设置项的.eslintrc.*文件时,将会住手向上查找。

“extends”除了可以引入引荐划定规矩,还可以以文件情势引入别的的自定义划定规矩,然后在这些自定义划定规矩的基础上用rules去定义一般划定规矩,从而掩盖掉”extends”中引入的划定规矩。比方: 
{ 
"extends": [ 
"./node_modules/coding-standard/eslintDefaults.js", 
// Override eslintDefaults.js 
"./node_modules/coding-standard/.eslintrc-es6", 
// Override .eslintrc-es6 
"./node_modules/coding-standard/.eslintrc-jsx", 
], 
"rules": { 
// Override any settings from the "parent" configuration 
"eqeqeq": "warn" 
} 
}

2、在 package.json 中到场 eslintConfig 设置块举行设置 
比方: 
{ 
"name": "demo", 
"version": "1.0.0", 
"eslintConfig": { 
"env": { 
"browser": true, 
"node": true 
}, 
"rules": { 
"eqeqeq": "warn" 
} 
} 
} 
3、直接在代码文件中以解释的体式格局定义 
须要注重的是,代码文件内以解释设置的划定规矩会掩盖设置文件里的划定规矩,即优先级要更高。

比方:

暂时在一段代码中作废eslint搜检,可以以下设置: 
`/* eslint-disable */

// Disables all rules between comments 
alert(‘foo’);

/* eslint-enable */

暂时在一段代码中作废一般划定规矩的搜检(如no-alert, no-console):

/* eslint-disable no-alert, no-console */

// Disables no-alert and no-console warnings between comments 
alert(‘foo’); 
console.log(‘bar’);

/* eslint-enable no-alert, no-console */

在全部文件中作废eslint搜检:

/* eslint-disable */

// Disables all rules for the rest of the file 
alert(‘foo’);

在全部文件中禁用某一项eslint划定规矩的搜检:

/* eslint-disable no-alert */

// Disables no-alert for the rest of the file 
alert(‘foo’);

针对某一行禁用eslint搜检:

alert(‘foo’); // eslint-disable-line

// eslint-disable-next-line 
alert(‘foo’);

针对某一行的某一详细划定规矩禁用eslint搜检:

alert(‘foo’); // eslint-disable-line no-alert

// eslint-disable-next-line no-alert 
alert(‘foo’);

针对某一行禁用多项详细划定规矩的搜检:

alert(‘foo’); // eslint-disable-line no-alert, quotes, semi

// eslint-disable-next-line no-alert, quotes, semi 
alert(‘foo’);

三. 把ESLint集成到事情流当中
比方,与babel和gulp连系:

package.json:

{
    "name": "my-module",
    "scripts": {
        "lint": "eslint my-files.js"
    },
    "devDependencies": {
        "babel-eslint": "...",
        "eslint": "..."
    }
}

或许

gulpfile.js

var gulp = require('gulp');
var eslint = require('gulp-eslint');

gulp.task('lint', function() {
  return gulp.src('app/**/*.js')
    .pipe(eslint())
    .pipe(eslint.format());
});
eslintrc.*:

{
    "plugins": [
        "react" //运用eslint-plugin-react插件
    ],
    "ecmaFeatures": {
        "jsx": true //开启ESLint JSX 支撑
    }
    "rules": {
        "react/display-name": 1, //注重一下,自定义划定规矩都是以插件称号为定名空间的
        "react/jsx-boolean-value": 1
    }
}

四. 经由过程设置.eslintignore文件疏忽掉不想被搜检的文件
可以经由过程在项目目次下竖立.eslintignore文件,并在个中设置疏忽掉对哪些文件的搜检。须要注重的是,不论你有无在.eslintignore中举行设置,eslint都邑默许疏忽掉对/node_modules/ 以及 /bower_components/文件的搜检。下面是一个简朴的.eslintignore文件的内容。

# Ignore built files except build/index.js
build/
!build/index.js

五. 实行检测
eslint test.js test2.js

文中后部份例子来源于:https://blog.csdn.net/qq_3100…

    原文作者:李钢铁
    原文地址: https://segmentfault.com/a/1190000017145888
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞