vue-cli3脚手架下Eslint的配置报错问题

最新推荐文章于 2024-07-29 11:43:06 发布

冷太阳a

最新推荐文章于 2024-07-29 11:43:06 发布

阅读量580

点赞数

分类专栏： Vue 项目总结

本文链接：https://blog.csdn.net/A_9888/article/details/107217036

版权

项目总结同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

Vue

45 篇文章 2 订阅

订阅专栏

在Eslint严格模式下会对代码进行一定的规范，一下是不规范的报错。在这里插入图片描述

解决方案

直接关闭eslintrc 配置一个vue.config.js

module.exports = {
    lintOnSave: false
  }

在目录.eslintrc.js下配置常用的规范

	module.exports = {
  root: true,
  env: {
    node: true
  },
  // extends: ["plugin:vue/essential", "@vue/prettier"],//这里面的@vue/prettier去掉
  extends: ["plugin:vue/essential"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "space-before-function-paren":0
  },
  parserOptions: {
    // parser: "babel-eslint"
  }

给项目添加`.prettierrc`

prettierrc用于格式化代码 shift+alt+f 在格式化代码会将配置的规则格式化转换

{
    "semi": false,
    "singleQuote": true
}

如果是用vscode格式化，Vue文件会自动加分号问题解决如下

打开文件–>首选项–>设置 (快捷键ctrl+，)

在这里插入图片描述

在json中添加以下配置，就不会有分号啦

"vetur.format.defaultFormatterOptions": {
        "prettier": {
            "semi": false,
            "singleQuote": true
        }
    }

如果需要在方法括号之间加空格，还需加入以下配置

"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.js": "vscode-typescript"

{
    "[json]": {
        
        "editor.quickSuggestions": {
            "strings": true
        },
        "editor.suggest.insertMode": "replace"
    },
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "semi": false,
            "singleQuote": true
        }
    },
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
     "vetur.format.defaultFormatter.js": "vscode-typescript"
}