團隊協做統一vue代碼風格，vscode作vue項目時的一些配置

1. 安裝Vetur 擴展

主要是用於讓vscode能識別vue文件，對vue代碼進行高麗處理，而且它內置了一些代碼格式化的設置

2. 安裝ESLint

若是你的項目已經開啓了eslint規範, 再有多餘的空格,或者空行，會有紅色波浪線提示。
可是光有提示還不夠，還但願在ctrl + s保存的時候自動幫咱們處理這些小問題。其實那些js規範，大部分人錯得多的地方無非就是個空格與空行的問題

文件 -> 首選項 -> 設置

將如下配置填入 worksapce settings

{
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "editor.mouseWheelZoom": true,
  "editor.wordWrap": "on",
  "editor.tabCompletion": "onlySnippets",
  "files.associations": {
    "*.vue": "vue"
  },
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true
  },
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "eslint.validate": [
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue-html",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true,
}

我不是一個喜歡裝不少插件可是幾乎用不上的人，我以爲就這樣保證團隊內的vue項目代碼風格已經足以。

前面的一些配置，一直到

"vetur.format.defaultFormatter.js": "vscode-typescript",

是修改的vscode的一些默認配置，主要是縮進換行什麼的。若是你想本身瞭解下這些具體是幹嗎的，你能夠裝一個chinese插件可能會方便你看那些配置註釋。從這裏一直到

"eslint.validate":

是修改的編輯器右鍵格式化的一些配置，這隻須要配合的vetur插件完成。你可能不適應

"vetur.format.defaultFormatter.html": "js-beautify-html",

這種一行一句屬性的風格，不過vue官網風格指南推薦的是這樣，你也能夠試着本身改一下。

關於eslint的部分基本上就是讓你保存的時候自動按照你設置的eslint規範去再去調整一下你的代碼格式。主要是一些不應加分號的地方你可能習慣性的加了分號，而配置了這些以後，在你保存的時候就會把那些分號，或者每行代碼的末尾的空格，每一個文件最下面的空行都幹掉。

3.利用vscode配置符合官網風格指南的vue代碼片斷

• 輸入 ctrl + shift + p 打開命令輸入 snippet (打開用戶代碼片斷)
• 再輸入vue(選擇代碼片斷的語言)若是搜索不到，安裝一個插件 vueHelper
• 若是搜索到了以後複製粘貼如下代碼

{
  "Print to console": {
    "prefix": "vue",
    "body": [
        "<template>",
        "  <div>\n",
        "  </div>",
        "</template>\n",
        "<script>",
        "import OtherComponent from '@/components/OtherComponent'\n",
        "export default {",
        "  name: 'MyName',",
        "  components: {",
        "    OtherComponent",
        "  },",
        "  directives: {},",
        "  filters: {},",
        "  extends: {},",
        "  mixins: {},",
        "  props: {},",
        "  data () {",
        "    return {\n",
        "    }",
        "  },",
        "  computed: {},",
        "  watch: {},",
        "  beforeCreate () {",
        "    // 生命週期鉤子：組件實例剛被建立，組件屬性計算以前，如 data 屬性等",
        "  },",
        "  created () {",
        "    // 生命週期鉤子：組件實例建立完成，屬性已綁定，但 DOM 還未生成，$el 屬性還不存在",  
        "    // 初始化渲染頁面",
        "  },",
        "  beforeMount () {",
        "    // 生命週期鉤子：模板編譯/掛載以前",
        "  },",
        "  mounted () {",
        "    // 生命週期鉤子：模板編譯、掛載以後（此時不保證已在 document 中）",
        "  },",
        "  beforeUpate () {",
        "    // 生命週期鉤子：組件更新以前",
        "  },",
        "  updated () {",
        "    // 生命週期鉤子：組件更新以後",
        "  },",
        "  activated () {",
        "    // 生命週期鉤子：keep-alive 組件激活時調用",
        "  },",
        "  deactivated () {",
        "    // 生命週期鉤子：keep-alive 組件停用時調用",
        "  },",  
        "  beforeDestroy () {",
        "    // 生命週期鉤子：實例銷燬前調用",
        "  },",
        "  destroyed () {",
        "    // 生命週期鉤子：實例銷燬後調用",
        "  },",  
        "  errorCaptured (err, vm, info) {",
        "    // 生命週期鉤子：當捕獲一個來自子孫組件的錯誤時被調用。此鉤子會收到三個參數：錯誤對象、發生錯誤的組件實例以及一個包含錯誤來源信息的字符串。",  
        "    console.log(err, vm, info)",
        "  },",
        "  methods: {}",
        "}",
        "</script>\n",
        "<style lang=\"scss\" scoped></style>",
        "$2"
    ],
    "description": "Log output to console"
  }
}

• 新建.vue文件，輸入vue,按tab便可建立vue模板
• 我這邊列的有點多，你能夠根據本身的習慣進行刪減

參考網站：

vue組件編碼規範

vue 開發命名規範

vue官網風格指南