Automatic format of ES6 specification under vscode configuration Vue

Time:2020-4-5

Preface

Recently, when writing Vue, I met the format problem of JS ES6. Because I usually use vscode to write PHP, I will install some format plug-ins, including HTML CSS JS plug-ins

Resulting problems: due tovueSyntax specification problem, resulting in saving and automatically formatting the code format not used, code error and other exceptions

When I wrote this, I also looked up a lot of materials, many of which could not be used, and also changed many editors, such as:Atom,sublime,webstorm

No dropped editor

Atom

This editor really has a high appearance value, but the plug-in is really not easy to handle, all kinds of walls, all kinds of inadaptability, so I decided to discard it

sublime

Ditto, sublime didn’t find the wall before, but now it seems there is a wall, so I’m too lazy to toss and discard it

webstorm

The power of webstorm doesn’t explain, but it’s just too big, too slow, and the interface doesn’t like it is the final reason. Discard it

Vscode auto format Vue in MAC configuration

Related plug-ins:ESLint,JavaScript(ES6),vetur

Install the plug-in first. opensettings.json, add in the code block

  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true,
  "explorer.confirmDragAndDrop": false,
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  "vetur.format.defaultFormatter.js": "none"

Save and restart, solve