在vscode中的vue单文件组件的代码提示以及自动符合Eslint规范

一、安装相关插件

更新于2020年4月19日18:07:34

一共要安装四个插件：分别是ESLint、Vetur、VueHelper、Prettier - Code formatter

VueHelper是代码自动提示的插件，我觉得用这个还是比较舒服的。

二、在settings中添加这三个插件的相关配置

插一嘴：记得写注释，不然你后期想改的时候再看脑瓜子会炸。

    // Vetur插件的相关配置
    // "vetur.format.defaultFormatter.js": "none",
    "vetur.format.defaultFormatterOptions": {},
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },
    "vetur.validation.template": false,
    "window.zoomLevel": 0,
    "liveServer.settings.donotShowInfoMsg": true,
    "git.enableSmartCommit": true,
    "editor.minimap.enabled": false,
    "editor.renderWhitespace": "all",
    "editor.renderControlCharacters": true,
    "breadcrumbs.enabled": true,
    "workbench.activityBar.visible": true,
    "explorer.confirmDelete": false,
    //   Eslint的配置
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    "eslint.options": {
        "plugins": [
            "html"
        ]
    },
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.fixAll.eslint": false
    },
    // prettier相关配置
    // tab 大小为2个空格
    "editor.tabSize": 2,
    // 100 列后换行
    "editor.wordWrapColumn": 100,
    // Ctrl + S 时格式化
    "editor.formatOnSave": true,
    // prettier 设置强制单引号
    "prettier.singleQuote": true,
    // prettier 设置语句末尾加分号
    "prettier.semi": false,
    // 选择 vue 文件中 template 的格式化工具
    "vetur.format.defaultFormatter.html": "prettyhtml",
    // 让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // 让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    // vetur 的自定义设置
    // Ctrl + Shift + F 快捷键设置（依照vetur格式化代码）
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    }