esLint基础使用

GG·bond

已于 2022-01-21 14:34:15 修改

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端工具、插件文章标签： esLint基础使用

于 2021-12-08 01:37:17 首次发布

本文链接：https://blog.csdn.net/GTbond/article/details/121781928

前端工具、插件专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在VSCode中配置ESLint，包括修改tabsize、使用Standard规范、自定义规则、处理错误提示、配置.eslintrc.js文件、调整规则优先级以及集成与配置prettier和vetur插件，确保代码风格统一。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

esLint基础使用

1）修改vscode 设置

修改tab空格设置；tabsize配置项为2

在这里插入图片描述

format 自动保存代码

在这里插入图片描述
2）在vue创建项目中，选择eslint+Standard config -标准规范-

在保存时就开启检查

在这里插入图片描述

3）语法报错，根据错误提示，去eslint官网搜索规则
在这里插入图片描述
4）在eslintrc.js文件中 extends就是官方提供的默认规则

5）在eslintrc.js文件中rules中添加或者修改规则，自定义的规则大于extends的规则
在这里插入图片描述

“规则”:“开启/关闭”
“no-extra-semi”:“off” //禁止不必要的分号: 关闭
1）off或者0 关闭规则
2）warn或者1 开启规则，使用警告级别，程序继续执行
3）error或者2 开启规则，使用错误级别，程序报错关闭
没有属性的规则，只需要控制开启，还是关闭；例如：“eqeqeq”: “off”，

有属性的规则可以使用属性；
例如：“semi”: [“开启/关闭”, “属性”]
semi规则有两个属性，always（默认，要求在语句末尾使用分号）,never（禁止在语句末使用分号）
“semi”:[“error”, “always”] //语句末没有分号就报错

如使用 window 对象，默认情况下会报 no-undef 的错误，需要在 .eslintrc 中进行相应配置

{
    "rules": {
        // ...
    },
    "globals": {
        "window": true
    }
}

6）使用vscode插件

eslint

    //eslint 插件配置
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "eslint.alwaysShowStatus": true,

在这里插入图片描述

prettier插件

//prettier插件配置

    //prettier插件配置
    "prettier.trailingComma": "none",
    "prettier.semi": false,
    //每行文字上线，超过换行
    "prettier.printWidth": 300,
    //使用单引号替换双引号
    "prettier.singleQuote": true,
    "prettier.arrowParens": "avoid",

在这里插入图片描述

vetur插件

在这里插入图片描述

"vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.ignoreProjectWarning": true,
    "vetur.format.defaultFormatterOptions": {
       "prettier":{
           "trailingComma":"none",
           "semi":false,
           "singleQuote":true,
           "arrowParens":"avoid",
           "printWidth":300
       },
       "js-beautify-html": {
           "wrap_attributes":false
       }
    },

7）在用户目录下创建.prettier文件，添加以下内容

  "trailingComma":"none",
  "singleQuote": true,
  "semi": false,
  "arrowParens": "avoid"

在vscode配置文件中添加： “prettier.configPath”:“地址\.prettierrc”

在这里插入图片描述

在vscode中右键选择文档格式化方式，选择prettier-code formatter

在这里插入图片描述

其他文章https://www.jianshu.com/p/ad1e46faaea2