vue项目中vscode安装eslint插件和错误自动修复（vue-cli2.0创建的项目）

vue项目中vscode安装eslint插件和错误自动修复（vue-cli2.0创建的项目）

一、这是使用vue cli2.0搭建的项目的配置方法
npm install -g vue-cli
vue init webpack my-pro
（一路按着”enter“就行）

1、查看自己的vue项目中是否有eslint组件
（1）是否有eslintrc.js该文件；
（2）查看webpack的配置文件：package.json中是否有以下配置

2.在visual studio code 中安装 eslint 插件和 vetur 插件
3.以上实现的是手动代码修复，如果到后期就不方便，以下是设置自动修复代码的操作：

打开：文件》首选项》设置》搜索 ”eslint“ 》点击用户设置，即如下图标：

将这里的”false“改为”true“，就可以正常编写代码了，ctr+s就自动将代码修复好了（如果不行，就重启一下visual studio code）

如果里面没有代码，只有{}，则添加：
根目录下面创建一个文件.prettierrc.json （双引号变单引号，去掉分号）

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

{
  "editor.wordWrap": "on",
  "workbench.colorTheme": "Quiet Light",
  "eslint.autoFixOnSave": true,
  "explorer.confirmDragAndDrop": false,
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  "vetur.format.defaultFormatter.js": "none",
  "files.associations": {
    "*.vue": "vue"
  },
  "eslint.options": {
    "extensions": [
      ".js",
      ".vue"
    ]
  },
  "eslint.validate": [
    "javascript",
    {
      "language": "vue",
      "autoFix": true
    },
    "html",
    "vue"
  ],
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true
  },
  "emmet.syntaxProfiles": {
    "javascript": "jsx",
    "vue": "html",
    "vue-html": "html"
  },
  "git.confirmSync": false,
  "window.zoomLevel": 0,
  "editor.renderWhitespace": "boundary",
  "editor.cursorBlinking": "smooth",
  "editor.minimap.enabled": true,
  "editor.minimap.renderCharacters": false,
  "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
  "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
  "editor.codeLens": true,
  "editor.snippetSuggestions": "top",
  "[vue]": {
    "editor.defaultFormatter": "qiang014.vetur-e"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
}

二、vue-cli3.0创建的项目，改配置

{
    "workbench.startupEditor": "newUntitledFile",
    "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.snippetSuggestions": "top",
    "editor.formatOnPaste": true,
    "extensions.ignoreRecommendations": false,
    "editor.fontSize": 15,
    "editor.tabSize": 2,
    "vetur.validation.template": false,
    "workbench.activityBar.visible": true,
    "workbench.colorTheme": "Eclipse",
    "javascript.implicitProjectConfig.experimentalDecorators": true,
    "[vue]": {},
    "svn.enableProposedApi": "product",
    "files.associations": {
        "*.vue": "vue"
    },
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "terminal.integrated.rendererType": "dom"
}