vue项目eslint配置方法详解

2022年6月8日13:49:47

一,官网地址

https://cn.eslint.org/docs/user-guide/getting-started

二,配置eslint

1,安装

npm install eslint--save-dev

2,生成.eslintrc文件

在项目根目录运行:

./node_modules/.bin/eslint--init

当然,这句命令行可以使用这个代替,达到的效果是一样的,按照提示选择自己需要的配置,就可以在根目录生成一个.eslintrc的文件。

npx eslint--init

vue项目eslint配置方法详解

3,生成的.eslintrc文件

这时候,会启用默认的eslint配置,如果想要自定义配置,可以修改.eslintrc文件的内容。

module.exports={"env":{"browser":true,"es6":true,"node":true},"extends":["eslint:recommended","plugin:vue/essential"],"globals":{"Atomics":"readonly","SharedArrayBuffer":"readonly"},"parserOptions":{"parser":"babel-eslint",// 解析器,默认使用Espree"ecmaVersion":2018,//支持es2018语法"sourceType":"module",// 指定来源的类型,"script" (默认) 或 "module"(如果你的代码是 ECMAScript 模块)},"plugins":["vue",'prettier'],"rules":{//这里写你想要自定义的规则}};

4,package.json文件

当安装eslint之后,这个文件中会有这么一段配置:
vue项目eslint配置方法详解
root:true,默认情况下,ESLint 会在所有父级目录里寻找配置文件,一直到根目录。如果发现配置文件中有 “root”: true,它就会停止在父级目录中寻找。

三,.eslintrc文件的结构

1,想启用eslint的环境

"env":{"browser":true,"es6":true,"node":true},//想启用eslint的环境

2,启用推荐的规则

所有的规则默认都是禁用的。在配置文件中,使用 “extends”: “eslint:recommended” 来启用推荐的规则,报告一些常见的问题,在下文中这些推荐的规则都带有一个标记。具体查看https://cn.eslint.org/docs/rules/

"extends":["eslint:recommended","plugin:vue/essential"],

3,parserOptions额外的配置

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

4,plugins

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

"plugins":["vue",'prettier'],

5,rules

ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置,你必须将规则 ID 设置为下列值之一:

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

例如强制分号结尾,强制双引号:

"rules":{"quotes":[1,"double"],
        semi:[2,'always',{
              omitLastInOneLineBlock:true}],}

于是单引号就会警告,按ctrl+s保存,就会变成双引号:
vue项目eslint配置方法详解

四,我项目中的eslint规则配置

module.exports={"env":{"browser":true,"es6":true,"node":true},//想启用eslint的环境"extends":[// "eslint:recommended",//不启用默认配置,而是自定义规则"plugin:vue/essential"],"globals":{"Atomics":"readonly","SharedArrayBuffer":"readonly"},"parserOptions":{"parser":"babel-eslint",// 解析器,默认使用Espree"ecmaVersion":2018,//支持es2018语法"sourceType":"module",// 指定来源的类型,"script" (默认) 或 "module"(如果你的代码是 ECMAScript 模块)// 使用的额外的语言特性"ecmaFeatures":{"jsx":true,// 启用 JSX"globalReturn":true,// 允许在全局作用域下使用 return 语句"impliedStrict":true,// 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)"experimentalObjectRestSpread":true// 启用实验性的 object rest/spread properties 支持。(重要:这是一个实验性的功能,在未来可能会有明显改变。 建议你写的规则 不要 依赖该功能,除非当它发生改变时你愿意承担维护成本。)}},"plugins":["vue","prettier"],"rules":{"quotes":[1,"double"],//警告,必须双引号"no-compare-neg-zero":2,//禁止与 -0 进行比较"no-cond-assign":[2,"except-parens"],//禁止条件语句中出现赋值操作符"no-console":0,//允许出现console"no-constant-condition":2,//禁止在条件中使用常量表达式"no-control-regex":2,//禁止在正则表达式中使用控制字符"no-debugger":0,//可以使用debugger"no-dupe-args":2,//禁止 function 定义中出现重名参数"no-dupe-keys":2,//禁止对象字面量中出现重复的 key"no-duplicate-case":2,//禁止出现重复的 case 标签"no-empty":2,//禁止出现空语句块"no-empty-character-class":2,//禁止在正则表达式中使用空字符集"no-ex-assign":2,//禁止对 catch 子句的参数重新赋值"no-extra-boolean-cast":2,//禁止不必要的布尔转换"no-extra-parens":["error","functions"],//禁止不必要的括号"no-extra-semi":2,//禁止不必要的分号"no-func-assign":2,//禁止对 function 声明重新赋值"no-inner-declarations":0,//禁止在嵌套的块中出现变量声明或 function 声明"no-invalid-regexp":2,//禁止 RegExp 构造函数中存在无效的正则表达式字符串"no-irregular-whitespace":2,//禁止不规则的空白"no-obj-calls":2,//禁止把全局对象作为函数调用"no-prototype-builtins":2,//禁止直接调用 Object.prototypes 的内置属性"no-regex-spaces":2,//禁止正则表达式字面量中出现多个空格"no-sparse-arrays":2,//禁用稀疏数组"no-template-curly-in-string":0,//禁止在常规字符串中出现模板字面量占位符语法"no-unexpected-multiline":2,//禁止出现令人困惑的多行表达式"no-unreachable":2,//禁止在 return、throw、continue 和 break 语句之后出现不可达代码"no-unsafe-finally":2,//禁止在 finally 语句块中出现控制流语句"no-unsafe-negation":2,//禁止对关系运算符的左操作数使用否定操作符"use-isnan":2,//要求使用 isNaN() 检查 NaN"valid-jsdoc":"off",//"valid-typeof":2,//强制 typeof 表达式与有效的字符串进行比较"curly":2,//强制所有控制语句使用一致的括号风格"consistent-return":[2,{
        treatUndefinedAsUnspecified:true}],"default-case":2,
    eqeqeq:"off","guard-for-in":0,"no-case-declarations":0,"no-empty-pattern":2,"no-fallthrough":2,"no-global-assign":[2,{
        exceptions:[]}],"no-octal":2,"no-redeclare":2,"no-self-assign":2,"no-unused-labels":2,"no-useless-escape":2,
      
    strict:2,"no-delete-var":2,"no-undefined":0,"no-undef":2,"no-use-before-define":2,"array-bracket-spacing":[2,"never"],"block-spacing":[2,"always"],"brace-style":[2,"1tbs"],"comma-dangle":["error","never"],"comma-spacing":[2,{
        before:false,
        after:true}],"comma-style":[2,"last"],"computed-property-spacing":["error","never"],"eol-last":[2,"always"],"func-call-spacing":["error","never"],
    indent:["error",2,{
        SwitchCase:1}],"jsx-quotes":["error","prefer-double"],"key-spacing":["error",{
        beforeColon:false,
        afterColon:true}],"new-cap":["error",{
        newIsCap:true,
        capIsNewExceptionPattern:"(Type[a-zA-Z0-9]+|Deco[a-zA-Z0-9]+)+"}],"new-parens":"error","no-mixed-spaces-and-tabs":2,"no-multi-assign":"error","no-multiple-empty-lines":"error",
      
      
    semi:[2,"always",{
        omitLastInOneLineBlock:true}],"constructor-super":2,"no-class-assign":0,"no-const-assign":2,"no-this-before-super":2,"no-var":2,"no-dupe-class-members":2,"no-new-symbol":2,"require-yield":2,"prefer-const":0}};

五,配置完成后检查文件

npm run lint

vue项目eslint配置方法详解
如果发生报错了。查看对应的报错提醒,完成修改即可。

六,配合prettier

https://blog.csdn.net/liule18235434869/article/details/103468836/

七,我的使用

为了避免eslint和pritter冲突,最好vscode中的配置文件和这两者应该一致。

eslint:

module.exports={"env":{"browser":true,"es6":true,"node":true},//想启用eslint的环境"extends":[// "eslint:recommended",//不启用默认配置,而是自定义规则"plugin:vue/essential","@vue/prettier"//配合prettier,需要放在extends最后一个],"globals":{"Atomics":"readonly","SharedArrayBuffer":"readonly"},"parserOptions":{"parser":"babel-eslint",// 解析器,默认使用Espree"ecmaVersion":2018,//支持es2018语法"sourceType":"module",// 指定来源的类型,"script" (默认) 或 "module"(如果你的代码是 ECMAScript 模块)// 使用的额外的语言特性"ecmaFeatures":{"jsx":true,// 启用 JSX"globalReturn":true,// 允许在全局作用域下使用 return 语句"impliedStrict":true,// 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)"experimentalObjectRestSpread":true// 启用实验性的 object rest/spread properties 支持。(重要:这是一个实验性的功能,在未来可能会有明显改变。 建议你写的规则 不要 依赖该功能,除非当它发生改变时你愿意承担维护成本。)}},"plugins":["vue","prettier"],"rules":{"quotes":[1,"double"],//警告,必须双引号"no-compare-neg-zero":2,//禁止与 -0 进行比较"no-cond-assign":[2,"except-parens"],//禁止条件语句中出现赋值操作符"no-console":0,//允许出现console"no-constant-condition":2,//禁止在条件中使用常量表达式"no-control-regex":2,//禁止在正则表达式中使用控制字符"no-debugger":0,//可以使用debugger"no-dupe-args":2,//禁止 function 定义中出现重名参数"no-dupe-keys":2,//禁止对象字面量中出现重复的 key"no-duplicate-case":2,//禁止出现重复的 case 标签"no-empty":2,//禁止出现空语句块"no-empty-character-class":2,//禁止在正则表达式中使用空字符集"no-ex-assign":2,//禁止对 catch 子句的参数重新赋值"no-extra-boolean-cast":2,//禁止不必要的布尔转换"no-extra-parens":["error","functions"],//禁止不必要的括号"no-extra-semi":2,//禁止不必要的分号"no-func-assign":2,//禁止对 function 声明重新赋值"no-inner-declarations":0,//禁止在嵌套的块中出现变量声明或 function 声明"no-invalid-regexp":2,//禁止 RegExp 构造函数中存在无效的正则表达式字符串"no-irregular-whitespace":2,//禁止不规则的空白"no-obj-calls":2,//禁止把全局对象作为函数调用"no-prototype-builtins":2,//禁止直接调用 Object.prototypes 的内置属性"no-regex-spaces":2,//禁止正则表达式字面量中出现多个空格"no-sparse-arrays":2,//禁用稀疏数组"no-template-curly-in-string":0,//禁止在常规字符串中出现模板字面量占位符语法"no-unexpected-multiline":2,//禁止出现令人困惑的多行表达式"no-unreachable":2,//禁止在 return、throw、continue 和 break 语句之后出现不可达代码"no-unsafe-finally":2,//禁止在 finally 语句块中出现控制流语句"no-unsafe-negation":2,//禁止对关系运算符的左操作数使用否定操作符"use-isnan":2,//要求使用 isNaN() 检查 NaN"valid-jsdoc":"off",//"valid-typeof":2,//强制 typeof 表达式与有效的字符串进行比较"curly":2,//强制所有控制语句使用一致的括号风格"consistent-return":[2,{
        treatUndefinedAsUnspecified:true}],"default-case":2,
    eqeqeq:"off","guard-for-in":0,"no-case-declarations":0,"no-empty-pattern":2,"no-fallthrough":2,"no-global-assign":[2,{
        exceptions:[]}],"no-octal":2,"no-redeclare":2,"no-self-assign":2,"no-unused-labels":2,"no-useless-escape":2,
      
    strict:2,"no-delete-var":2,"no-undefined":0,"no-undef":2,"no-use-before-define":2,"array-bracket-spacing":[2,"never"],"block-spacing":[2,"always"],"brace-style":[2,"1tbs"],"comma-dangle":["error","never"],"comma-spacing":[2,{
        before:false,
        after:true}],"comma-style":[2,"last"],"computed-property-spacing":["error","never"],"eol-last":[2,"always"],"func-call-spacing":["error","never"],
    indent:["error",2,{
        SwitchCase:1}],"jsx-quotes":["error","prefer-double"],"key-spacing":["error",{
        beforeColon:false,
        afterColon:true}],"new-cap":["error",{
        newIsCap:true,
        capIsNewExceptionPattern:"(Type[a-zA-Z0-9]+|Deco[a-zA-Z0-9]+)+"}],"new-parens":"error","no-mixed-spaces-and-tabs":2,"no-multi-assign":"error","no-multiple-empty-lines":"error",
      
      
    semi:[2,"always",{
        omitLastInOneLineBlock:true}],"constructor-super":2,"no-class-assign":0,"no-const-assign":2,"no-this-before-super":2,"no-var":2,"no-dupe-class-members":2,"no-new-symbol":2,"require-yield":2,"prefer-const":0,"prettier/prettier"</
  • 作者:笑道三千
  • 原文链接:https://blog.csdn.net/weixin_42349568/article/details/117651262
    更新时间:2022年6月8日13:49:47 ,共 8760 字。