使用vue-cli脚手架 esline 语法有误问题

在vscode环境下开发vue,难免会遇到esline语法问题,一连串的报错信息。

解决方法:
1、先准备3个插件
1)Vetur
2)Prettier - Code formatter
3)ESLint

然后修改用户的配置文件,我的配置如下:

{
    "workbench.startupEditor": "newUntitledFile",
    "editor.fontSize": 16,
    "explorer.confirmDelete": false,
    "files.associations": {
        "*.wxss": "css",
        "*.cjson": "jsonc",
        "*.wxs": "javascript",
        "*.wxml": "wxml",
        "*.less": "less",
        "*.vue": "vue",
        "*.wpy": "vue"
    },
    "emmet.includeLanguages": {
        "wxml": "html",
        "vue-html": "html",
        "vue": "html"
    },
    "minapp-vscode.disableAutoConfig": true,
    "explorer.confirmDragAndDrop": false,
    "[less]": {},
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },
    // "eslint.autoFixOnSave": false,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue-html",
        {
            "language": "vue",
            "autoFix": true
        },
        "html",
        "vue"
    ],
    // 需要 npm install -g eslint-plugin-vue
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue"
        ]
    },
    "eslint.autoFixOnSave": true,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "window.zoomLevel": 0,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "workbench.editor.enablePreview": false, //打开文件不覆盖
    "search.followSymlinks": false, //关闭rg.exe进程
    "editor.minimap.enabled": false, //关闭快速预览
    "files.autoSave": "afterDelay", //打开自动保存
    "editor.lineNumbers": "on", //开启行数提示
    "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
    "prettier.semi": false, //去掉代码结尾的分号
    "editor.quickSuggestions": {
        //开启自动显示建议
        "other": true,
        "comments": true,
        "strings": true
    },
    "editor.tabSize": 2, //制表符符号eslint
    "editor.formatOnSave": true, //每次保存自动格式化
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
    "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned" //属性强制折行对齐
        }
    },
}

由于每个人开发习惯不一样,所以在配置文件中可能还会看到wxml之类的配置(主要用于小程序)。所以可以根据自己的习惯来配置,重点的配置已经加上了注释。

配置完成后,重启一下vscode。在格式化代码 / 保存代码,发现就已经没有报错了

还有一个需要注意的是,关闭其他的格式化代码的工具,避免各个插件之间的冲突

**THE  END**

猜你喜欢

转载自blog.csdn.net/Jioho_chen/article/details/83479966
今日推荐