1、前言

??團(tuán)隊(duì)協(xié)作是稍具規(guī)模公司必不可少的問題，也是項(xiàng)目開發(fā)進(jìn)度保證的重要基石。只有團(tuán)隊(duì)協(xié)作，各自的功力發(fā)揮到極致，才能保證團(tuán)隊(duì)生產(chǎn)力最大化。隨著團(tuán)隊(duì)增加，統(tǒng)一的代碼風(fēng)格就越來越重要，為此使用 VS Code 配置自動格式化，統(tǒng)一代碼規(guī)范。

2、代碼風(fēng)格

• 整體風(fēng)格
  • javascript大體上遵循ESlint規(guī)范
  • html、wxml大體上遵循prettyhtml規(guī)范
• javascript細(xì)節(jié)調(diào)整
  • 結(jié)尾無分號
  • 超過140個(gè)字符換行
  • 使用單引號
  • 無尾隨逗號
  • 箭頭函數(shù)單個(gè)參數(shù)不加分號

3、準(zhǔn)備插件

VS Code插件

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

4、個(gè)性化配置

1. 開發(fā)方式

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

2. 個(gè)性化配置

{
  // 使用vscode-icons主題
  "workbench.iconTheme": "vscode-icons",
  // 每次保存的時(shí)候?qū)⒋a按格式進(jìn)行修復(fù)
  "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"
  },
  // 默認(rèn)使用prettier格式化支持的文件
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      // 結(jié)尾無分號
      "semi": false,
      // 超過140個(gè)字符換行
      "printWidth": 140,
      // 使用單引號
      "singleQuote": true,
      // 無尾隨逗號
      "trailingComma": "none",
      // 箭頭函數(shù)單個(gè)參數(shù)不加分號
      "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
}