webstorm 中使用ESLint细节

最新推荐文章于 2025-04-15 17:37:52 发布

fyiloutingfengyu

最新推荐文章于 2025-04-15 17:37:52 发布

阅读量527

点赞数 3

分类专栏：工具使用技巧文章标签： ESLint webstorm

本文链接：https://blog.youkuaiyun.com/qq_37405634/article/details/102997906

版权

工具使用技巧专栏收录该内容

4 篇文章

订阅专栏

1、格式化代码后，import右边位置， ESLint提示缩进错误
在这里插入图片描述
解决方法：
（1）、更改webstorm设置，不让内容缩进，不推荐，因为会更改页面的默认风格，且不美观；
（2）、修改ESLint设置，关闭Vue 文件中的script标签缩进（推荐使用）

rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    "vue/script-indent": ["error", 2, {  // script标签缩进设置
      "baseIndent": 1,
      "switchCase": 0,
      "ignores": []
    }]
  },
overrides: [
    {
      "files": ["*.vue"],
      "rules": {
        "indent": "off",
      }
    }
  ]

2、inport 后面的｛｝的位置报错，提示需要有一个空格
在这里插入图片描述
解决方法：
（1）修改ESLint配置

"object-curly-spacing": [0, "never"]//关闭大括号内的空格检查，
0 表示关闭；
"never" （默认）不允许大括号内的空格

（2）修改webstorm的空格设置（推荐使用）
在这里插入图片描述
3、使用vue-cli构建的项目中，ESLint中默认是代码末尾不能加分号；
解决方法：在.eslintrc.js中的rules中加下面这条规则

'semi': [0], //关闭末尾不能加分号的规则