插件列表

插件名称 作用
vue 高亮语法
vetur 格式化，代码规范
vue peek 组件跳转
vue beautify vue 格式化
vue VSCode Snippets和Vue Snippets 代码提示
vePrettiertur 格式化与上面的Vetur其实是合作格式化

用户配置setting.json：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
"editor.formatOnSave": true
// 配置方案1
"vetur.format.defaultFormatterOptions": {
  "prettier": {
    "semi": false,
    "singleQuote": true,
    "eslintIntegration": true,
    "trailingComma": "all"
  }
}
// 配置方案2
"vetur.format.defaultFormatter.js": "prettier-eslint",
// prettier
"prettier.trailingComma": "es5",
"prettier.semi": false,
"prettier.jsxSingleQuote": true,
"prettier.singleQuote": true,
"prettier.eslintIntegration": true

关于Eslint的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
"eslint.alwaysShowSatus": true,
"eslint.autoFixOnSave": true,
"eslint.validate": [
  "javascriptreact",
  {
    "language": "html",
    "autoFix": true
  },
  {
    "language": "vue",
    "autoFix": true
  },
  {
    "language": "javascript",
    "autoFix": true
  },
  {
    "language": "typescript",
    "autoFix": true
  }
],
"eslint.options": {
  "plugins": ["html"]
}

Emmet 配置

1
2
3
4
"emmet.syntaxProfiles": {
  "vue-html": "html",
  "vue": "html
}

这里有一个vscode配置参考 https://gist.github.com/orblazer/df1983339bfee462b8f15bfae9656ac3

参考资料

1、vetur配置https://vuejs.github.io/vetur/formatting.html
2、vscode vetur+prettierhttps://www.jianshu.com/p/c6f561ee891c
3、vue组件内script格式化自动化”和;
https://github.com/vuejs/vetur/issues/483
4、Single quotes are being replaced with double quoteshttps://github.com/vuejs/vetur/issues/986
5、使用eslint VScode错误提示和保存修复https://woolson.github.io/2018/06/07/eslint-in-vue/