vue eslint文件怎么配置 eslint如何配置

admin2024-06-11  35

一、安装eslint
npm install eslint --save-dev
or
yarn add eslint --save-dev
二、eslint配置
  1. Configuration Comments - 使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中。
  1. 在javascript使用注释配置eslint信息。
/* eslint-env node, mocha */  				// 使用注释来指定环境
 
 /* global var1:writable, var2:readonly */ 	// 使用注释指定全局变量,并且约定全局变量是否允许重写,																																			 writable允许重写全局变量、readonly不允许重写全局变量、off禁用全局变量
 
 /* eslint eqeqeq: "off", curly: "error" */ 	// 使用注释配置规则。off关闭规则;warn开启警告级别规则;error开启错误级别规则;
 /* eslint eqeqeq: 0, curly: 2 */			// 使用注释配置规则。0关闭规则;1开启警告级别规则;2开启错误级别规则;
 
 /* eslint "plugin1/rule1": "error" */       // 使用注释配置来自plugin的规则。
 
 /* eslint-enable no-alert, no-console */    // 启用指定规则
  1. 在javascript使用注释禁止eslint规则使用。
/* eslint-disable */ 		                          //  对整个文件禁用eslint

/* eslint-disable no-alert, no-console */ 	          // 指定规则的禁用

// eslint-disable-line					              // 当前行禁用

/* eslint-disable-next-line no-alert, quotes, semi */ // 下一行禁用规则

/* eslint-disable-line example/rule-name */		      // 禁用eslint-plugin-example的rule-name 规则
  1. Configuration Files-可以配置在.eslintrc.*文件里,或者直接在 package.json 文件里的 eslintConfig 字段指定配置。
  1. 如果同一个目录下有多个配置文件,ESLint 只会使用一个。优先级顺序如下:
  1. .eslintrc.js
  2. .eslintrc.yaml
  3. .eslintrc.yml
  4. .eslintrc.json
  5. .eslintrc
  6. package.json
  1. 可以配置的信息如下:

environments - 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。

全局变量一部分来自globals第三方库,还有一部分来自eslint/conf/environments.js里面的定义。

  • env - 要在配置文件里指定环境。如果你想在一个特定的插件中使用一种环境,确保提前在 plugins 数组里指定了插件名,然后在 env 配置中不带前缀的插件名后跟一个 / ,紧随着环境名。
{
  "browser": true,
  "node": true,
  "example/custom": true
}
  • globals - 脚本在执行期间访问的额外的全局变量。globals 配置属性设置为一个对象,该对象包含以你希望使用的每个全局变量。对于每个全局变量键,将对应的值设置为 "writable" 以允许重写变量,或 "readonly" 不允许重写变量,"off"禁用全局变量。
{
  "globals": {
    "var1": "writable",
    "var2": "readonly",
    "var3": "off"
    }
}
  • plugins - 在配置文件里配置插件时,可以使用 plugins 关键字来存放插件名字的列表。插件名称可以省略 eslint-plugin- 前缀。
{
    "plugins": [
        "plugin1",
        "eslint-plugin-plugin2"
    ]
}
  • rules - 启用的规则及其各自的错误级别。
  • "off"0 - 关闭规则
  • "warn"1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)
  • "error"2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)
{
   "plugins": [
        "plugin1"
    ],
	 "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"],
     		"plugin1/rule1": "warn" // 启用plugin的规则,当指定来自插件的规则时,确保删除 eslint-plugin- 前缀
    }
}
  • parserOptions - 解析配置
  • ecmaVersion - 默认设置为 3,5,你可以使用 6、7、8、9 或 10 来指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本号指定为 2015(同 6),2016(同 7),或 2017(同 8)或 2018(同 9)或 2019 (same as 10)
  • sourceType - 设置为 "script" (默认) 或 "module"如果你的代码是 ECMAScript 模块)。
  • ecmaFeatures - 这是个对象,表示你想使用的额外的语言特性:
  • globalReturn - 允许在全局作用域下使用 return 语句
  • impliedStrict - 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
  • jsx - 启用 JSX
  • experimentalObjectRestSpread - 启用实验性的 object rest/spread properties 支持。(**重要:**这是一个实验性的功能,在未来可能会有明显改变。 建议你写的规则 不要 依赖该功能,除非当它发生改变时你愿意承担维护成本。)
{
  parserOptions: {
     "ecmaVersion": 6,
     "sourceType": "module",
     "ecmaFeatures": {
       "jsx": true
     }
  }
}
  • parser - 默认解析器为Espree, 可以传其他解析器: esprima、babel-eslint、@typescript-eslint/parser
  • processor - 处理器。插件可以提供处理器,处理器可以从另一种文件中提取 JavaScript 代码,然后让 ESLint 检测 JavaScript 代码。或者处理器可以在预处理中转换 JavaScript 代码。若要在配置文件中指定处理器,请使用 processor 键,并使用由插件名处理器名组成的串接字符串加上斜杠。要为特定类型的文件指定处理器,请使用 overrides 键和 processor 键的组合。
{
	{
    "plugins": ["plugin1"],
    "processor": "plugin1/myProcessor"
}
}
  • settings - 共享设置。它将提供给每一个将被执行的规则。如果你想添加的自定义规则而且使它们可以访问到相同的信息,这将会很有用,并且很容易配置。
{
    "settings": {
        "sharedData": "Hello"
    }
}

在自定义规则create(context)钩子函数,context上下文中可以获取settings。具体请查看eslint 官网。

  • extends - 一个配置文件可以被基础配置中的已启用的规则继承。
    extends 属性值可以由以下组成:
  • plugin: - plugins可以省略包名的前缀 eslint-plugin-
  • 包名
  • /
  • 配置名称
{
  "plugins": [
        "plugin1"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:plugin1/myConfigs"
    ],
}
  1. 要对特殊类型的文件指定处理器或者规则,请使用 overridesfiles
{
  "plugins": [
        "plugin1"
   ],
   "overrides": [
     {
       "files": ["*.md"],
       "processor": "plugin1/markdown"
     },
     {
       "files": ["*.md"],
       "rules": {
         "strict": "off"
       }
     }
    ]
}
  1. 默认情况下,ESLint 会在所有父级目录里寻找配置文件,一直到根目录。为了将 ESLint 限制到一个特定的项目,在你项目根目录下的 package.json 文件或者 .eslintrc.* 文件里的 eslintConfig 字段下设置 "root": true。ESLint 一旦发现配置文件中有 "root": true,它就会停止在父级目录中寻找。
{
    "root": true
}


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!