1、前言

??團隊協作是稍具規模公司必不可少的問題，也是項目開發進度保證的重要基石。只有團隊協作，各自的功力發揮到極致，才能保證團隊生產力最大化。隨著團隊增加，統一的代碼風格就越來越重要，為此使用 VS Code 配置自動格式化，統一代碼規范。

2、代碼風格

• 整體風格
  • javascript大體上遵循ESlint規范
  • html、wxml大體上遵循prettyhtml規范
• javascript細節調整
  • 結尾無分號
  • 超過140個字符換行
  • 使用單引號
  • 無尾隨逗號
  • 箭頭函數單個參數不加分號

3、準備插件

VS Code插件

• Vuter 提供vue代碼片段、語法支持、代碼高亮等
• ESlint檢查javascript語法檢查和代碼規范
• Prettier - Code formatter 各種代碼格式化
• minapp微信小程序標簽、屬性的智能補全

4、個性化配置

1. 開發方式

• 打開VS Code配置文件setting.json
• 快捷鍵ctrl + shirt + p，搜索Settings(JSON)

2. 個性化配置

{
  // 使用vscode-icons主題
  "workbench.iconTheme": "vscode-icons",
  // 每次保存的時候將代碼按格式進行修復
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 默認使用prettier格式化支持的文件
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      // 結尾無分號
      "semi": false,
      // 超過140個字符換行
      "printWidth": 140,
      // 使用單引號
      "singleQuote": true,
      // 無尾隨逗號
      "trailingComma": "none",
      // 箭頭函數單個參數不加分號
      "arrowParens": "avoid"
    },
    "prettyhtml": {
      "printWidth": 140
    }
  },
  // 同上prettier格式化代碼
  "prettier.semi": false,
  "prettier.printWidth": 140,
  "prettier.trailingComma": "none",
  "prettier.singleQuote": true,
  "prettier.arrowParens": "avoid",
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  // 指定wxml的格式化
  "minapp-vscode.wxmlFormatter": "prettyHtml",
  "minapp-vscode.disableAutoConfig": true
}