vscode 插件和配置

通用

---

1. vscode-icons
2. Prettier - Code formatter：配合 vscode 保存自动格式化
3. Atom One Dark Theme
4. Auto Close Tag
5. Auto Rename Tag
6. Bracket Pair Colorizer
7. Chinese (Simplified) Language Pack for Visual Studio Code
8. Code Runner
9. CSS Peek
10. Document This ==> 快捷键 Ctrl+Alt+D and again Ctrl+Alt+D，生成.ts声明
11. HTML CSS Support
12. IntelliSense for CSS class names in HTML
13. JavaScript (ES6) code snippets
14. Live Server
15. One Dark Pro
16. Path Autocomplete
17. Path Intellisense
18. Prettier
19. Project Manager
20. VS Color Picker
21. setting sync
22. Git History - 通过vscode管理git
23. Debugger for Chrome
24. Debugger for Firefox
25. Prettier - Code formatter
26. editConfig for VS Code

配置说明

• "editor.formatOnSave": false：设置为true，保存Prettier自动格式化代码
• setting sync插件，自动同步vscode插件到GitHub，配置详见插件本身。
• 通过vscode管理git，详见之前文章，Mac下git的三种方式
• editConfig for VS Code不同IDE配置相同的格式化

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

vue

---

1. Vetur

• 在 User Setting 的 json 内配置格式化vue

// vetur 插件
  "extensions.ignoreRecommendations": true,
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
  },
  "vetur.validation.template": false,
  "eslint.options": {
    "plugins": ["html"]
  },
  "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "wrap_attributes": "force-aligned"
  }

• 配置vue模板 - 输入vue然后tab
  入口： cmd + shift + p 输入snippets，选择vue，进入 vue.json 文件拷贝如下代码

// vue 模板
  "Print to console": {
    "prefix": "vue",
    "body": [
      "<template>",
      "  <div class=\"main\">\n",
      "  </div>",
      "</template>\n",
      "<script>",
      "export default {",
      "  components: {\n",
      "  },",
      "  data() {",
      "    return {\n",
      "    }",
      "  },",
      "  methods: {\n",
      "  },",
      "  computed: { },",
      "  watch: { },",
      "  mounted() {\n",
      "  },",
      "}\n",
      "</script>\n",
      "<style scoped lang=\"less\">\n",
      ".main {\n",
      "}",
      "</style>",
      "$2"
    ],
    "description": "Log output to console"
  }

2. 模板效果图

<template>
  <div class="main">

  </div>
</template>

<script>
export default {
  components: {

  },
  data() {
    return {

    }
  },
  methods: {

  },
  computed: { },
  watch: { },
  mounted() {

  },
}

</script>

<style scoped lang="less">

.main {

}
</style>

微信小程序

---

1. Easy WXLESS ==> 将 less 转为 wxss，在vue项目内停用该插件
2. minapp
3. 小程序助手

后记：wechat-snippet 和 minapp 补全会冲突，wechat-snippet 有 json 补全，但其他地方差强人意，更建议使用minapp，json手动拷贝即可。

备注

不能同步插件：

1. Easy WXLESS ==> 将 less 转为 wxss，在vue项目内停用该插件
2. minapp
3. Live Server

todo

1. ESLint 用法
2. Beauty

格式化代码选择 prettier ，没有使用 beautiful 插件

转载于:https://www.jianshu.com/p/c15f9d8573a2