原文：/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格式为例。

  1. 1. .eslintrc.json 文件的内容类似如下：
  2. 2. {
  3. 3. //extends用于引入某配置作为基础配置，然后再在后续的rules中对其进行扩展 
  4. 4. "extends": "eslint:recommended",

//如果你想使用插件中的环境变量，请先把插件名写入”plugins”数组中，然后再在”env”:{}中以”插件名/插件中的需引入的环境名”的方式进行指定。

  1. 1. "plugins": ["example"],
  2. 2. "env": {
  3. 3. //An environment defines global variables that are predefined. 
  4. 4. //定义env会带进来一些全局变量 
  5. 5. "browser": true,
  6. 6. "node": true,
  7. 7. "es6":true,
  8. 8. "mocha":"true",
  9. 9. "qunit":true,
  10. 10. "jquery":true,
  11. 11. "mongo":true,
  12. 12. //通过插件名命名空间引入插件中的环境 
  13. 13. "example/custom": true
  14. 14. },
  15. 15. "globals": {
  16. 16. // globals are the additional global variables your script accesses during execution. 
  17. 17. // 即插件在执行过程中用到的其它全局变量 
  18. 18. "angular": true,
  19. 19. },
  20. 20. "rules": {
  21. 21. //which rules are enabled and at what error level. 
  22. 22. //这里指定用哪些规则进行eslint检查以及每个规则的错误级别：0或者off表示规则关闭，出错也被忽略；1或者warn表示如果出错会给出警告；2或者error表示如果出错会报出错误 
  23. 23. "semi": ["error", "always"],
  24. 24. "quotes": ["error", "double"]
  25. 25. },
  26. 26. //parser指定解析器，默认的为espree，可选的还有Esprima、Babel-ESLint。 
  27. 27. //babel-eslint is a wrapper around the Babel parser that makes it compatible with ESLint. 
  28. 28. //babel-eslint是一个Babel parser的包装器，这个包装器使得Babel parser可以和ESLint协调工作 
  29. 29. "parser": "babel-eslint",
  30. 30. "parserOptions": {
  31. 31. //ecmaVersion指定ECMAScript的版本，可选值有3\5\6\7，默认是5 
  32. 32. "ecmaVersion": 6,
  33. 33. //sourceType指定被检查的文件是什么扩展名的，可选项"script"和"module"，默认是"script"。"module"是ES6的。 
  34. 34. "sourceType": "module",
  35. 35. //ecmaFeatures指定你想使用哪些额外的语言特性 
  36. 36. "ecmaFeatures": {
  37. 37. "jsx": true
  38. 38. }
  39. 39. },
  40. 40. }
  41. 41. “rules”中的每一项即是一条规则。其中,“:”之前的事规则的名称（如上面的”semi” 和 “quotes”），“:”后面的数组中，第一个项用于指定规则的错误级别，它有 3 个可选的取值：
  42. 42. 
  43. 43. “off” 或者 0 - 关闭规则
  44. 44. 
  45. 45. “warn” or 1 - 不符合规则时作为一个警告（不会影响退出码）
  46. 46. 
  47. 47. “error” or 2 - 不符合规则时视作一个错误 (退出码为1)
  48. 48. 
  49. 49. 在你的.eslintrc文件中包含这行代码，可以使用推荐规则。
  50. 50. 
  51. 51. "extends": "eslint:recommended"
  52. 52. 
  53. 53. 通过这行代码，会开启规则页中标有对勾符号的规则。当然，你也可以到 npmjs.com 搜索 “eslint-config” 查找别人创建好的配置列表，并拿来直接使用。
  54. 54. 
  55. 55. .eslintrc.如果放在项目的根目录中，则会作用于整个项目。如果在项目的子目录中也包含着.eslintrc文件，则对于子目录中文件的检查会忽略掉根目录中的配置，而直接采用子目录中的配置，这就能够在不同的目录范围内应用不同的检查规则，显得比较灵活。ESLint采用逐级向上查找的方式查找.eslintrc.文件，当找到带有”root”: true配置项的.eslintrc.*文件时，将会停止向上查找。
  56. 56. 
  57. 57. “extends”除了可以引入推荐规则，还可以以文件形式引入其它的自定义规则，然后在这些自定义规则的基础上用rules去定义个别规则，从而覆盖掉”extends”中引入的规则。例如：
  58. 58. {
  59. 59. "extends": [
  60. 60. "./node_modules/coding-standard/eslintDefaults.js",
  61. 61. // Override eslintDefaults.js 
  62. 62. "./node_modules/coding-standard/.eslintrc-es6",
  63. 63. // Override .eslintrc-es6 
  64. 64. "./node_modules/coding-standard/.eslintrc-jsx",
  65. 65. ],
  66. 66. "rules": {
  67. 67. // Override any settings from the "parent" configuration 
  68. 68. "eqeqeq": "warn"
  69. 69. }
  70. 70. }
  71. 71. 
  72. 72. 2、在 package.json 中加入 eslintConfig 配置块进行配置
  73. 73. 例如：
  74. 74. {
  75. 75. "name": "demo",
  76. 76. "version": "1.0.0",
  77. 77. "eslintConfig": {
  78. 78. "env": {
  79. 79. "browser": true,
  80. 80. "node": true
  81. 81. }，
  82. 82. "rules": {
  83. 83. "eqeqeq": "warn"
  84. 84. }
  85. 85. }
  86. 86. }
  87. 87. 3、直接在代码文件中以注释的方式定义
  88. 88. 需要注意的是，代码文件内以注释配置的规则会覆盖配置文件里的规则，即优先级要更高。
  89. 89. 
  90. 90. 例如：
  91. 91. 
  92. 92. 临时在一段代码中取消eslint检查，可以如下设置：
  93. 93. `/* eslint-disable */
  94. 94. 
  95. 95. // Disables all rules between comments 
  96. 96. alert(‘foo’);
  97. 97. 
  98. 98. /* eslint-enable */
  99. 99. 
  100. 100. 临时在一段代码中取消个别规则的检查（如no-alert, no-console）：
  101. 101. 
  102. 102. /* eslint-disable no-alert, no-console */
  103. 103. 
  104. 104. // Disables no-alert and no-console warnings between comments 
  105. 105. alert(‘foo’);
  106. 106. console.log(‘bar’);
  107. 107. 
  108. 108. /* eslint-enable no-alert, no-console */
  109. 109. 
  110. 110. 在整个文件中取消eslint检查：
  111. 111. 
  112. 112. /* eslint-disable */
  113. 113. 
  114. 114. // Disables all rules for the rest of the file 
  115. 115. alert(‘foo’);
  116. 116. 
  117. 117. 在整个文件中禁用某一项eslint规则的检查：
  118. 118. 
  119. 119. /* eslint-disable no-alert */
  120. 120. 
  121. 121. // Disables no-alert for the rest of the file 
  122. 122. alert(‘foo’);
  123. 123. 
  124. 124. 针对某一行禁用eslint检查：
  125. 125. 
  126. 126. alert(‘foo’); // eslint-disable-line
  127. 127. 
  128. 128. // eslint-disable-next-line 
  129. 129. alert(‘foo’);
  130. 130. 
  131. 131. 针对某一行的某一具体规则禁用eslint检查：
  132. 132. 
  133. 133. alert(‘foo’); // eslint-disable-line no-alert
  134. 134. 
  135. 135. // eslint-disable-next-line no-alert 
  136. 136. alert(‘foo’);
  137. 137. 
  138. 138. 针对某一行禁用多项具体规则的检查：
  139. 139. 
  140. 140. alert(‘foo’); // eslint-disable-line no-alert, quotes, semi
  141. 141. 
  142. 142. // eslint-disable-next-line no-alert, quotes, semi 
  143. 143. alert(‘foo’);

三. 把ESLint集成到工作流之中
比如，与babel和gulp结合：

  1. 1. package.json：
  2. 2. 
  3. 3. {
  4. 4. "name": "my-module",
  5. 5. "scripts": {
  6. 6. "lint": "eslint my-files.js"
  7. 7. },
  8. 8. "devDependencies": {
  9. 9. "babel-eslint": "...",
  10. 10. "eslint": "..."
  11. 11. }
  12. 12. }

或者

  1. 1. gulpfile.js
  2. 2. 
  3. 3. var gulp = require('gulp');
  4. 4. var eslint = require('gulp-eslint');
  5. 5. 
  6. 6. gulp.task('lint', function() {
  7. 7. return gulp.src('app/**/*.js')
  8. 8. .pipe(eslint())
  9. 9. .pipe(eslint.format());
  10. 10. });
  11. 11. eslintrc.*：
  12. 12. 
  13. 13. {
  14. 14. "plugins": [
  15. 15. "react" //使用eslint-plugin-react插件
  16. 16. ],
  17. 17. "ecmaFeatures": {
  18. 18. "jsx": true //开启ESLint JSX 支持
  19. 19. }
  20. 20. "rules": {
  21. 21. "react/display-name": 1, //注意一下，自定义规则都是以插件名称为命名空间的
  22. 22. "react/jsx-boolean-value": 1
  23. 23. }
  24. 24. }

四. 通过配置.eslintignore文件忽略掉不想被检查的文件
可以通过在项目目录下建立.eslintignore文件，并在其中配置忽略掉对哪些文件的检查。需要注意的是，不管你有没有在.eslintignore中进行配置，eslint都会默认忽略掉对/nodemodules/ 以及 /bowercomponents/文件的检查。下面是一个简单的.eslintignore文件的内容。

  1. 1. # Ignore built files except build/index.js
  2. 2. build/
  3. 3. !build/index.js

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

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