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模板
- 我這邊列的有點多，你可以根據自己的習慣進行刪減
參考網站：