vscode, eslint, prettier, vetur Conflict and Resolution

These three tools have to be installed, but after the installation, the rules of conflict and headache. Speak at the solution of it.

Starting from 0

1. Disallow Plug-ins, as shown below
   

2. Clear user settings
   (Code-> Preferences -> Settings -> [upper-right corner to open the json, the left switch "User | Workspace"])

Remove all I just left this one.
"Window.zoomLevel": -1,

vue syntax highlighting

1. Creating .vue file, write some code and found dark
   

2. Activation plug-in installation vetur code have highlighted the Right menu will change more, mainly more than a formatted document
   

This time is actually formatted documents can be used.

1. Now that you have installed vetur, it would have to make the best use reference link link
   

2. We mainly see circled in red. Into the first link, shocked to see

Linting

Install ESLint plugin for the best linting experience. Vetur's template linting is only for quick start and does not support rule configuration.

vetur code review does not support any configuration, it is recommended to install ESLint. it is installed.

Red 1: Install ESLint

1. Npm install package
   npm install -D eslint

2. ESLint plug-in installation

At this time, ESLint in fact already be used, for example,

1. According to the instructions in the code- "Preferences -" Set - "User JSON add the following configuration

"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    },
  ]

But the following tips. Do not need him

Red 1: Installation eslint-plugin-vue to linting

In fact, you can continue to use eslint-plugin-vue version vetur default used if they have a version, it will only npm install a version, refer to the figure

Look, have the effect of

Red 2: format

vetur default code style tool below.

  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier"

把它贴到工作区吧, 方便将来修改. 现在我就要改一个, 把 “"vetur.format.defaultFormatter.html": "prettyhtml",”

修改成
"vetur.format.defaultFormatter.html": "js-beautify-html", 如下图

"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// js-beautify-html settings here
}
}

怎么配置呢, 打开链接 link

配置完, 把配置贴过来

效果也有了.