vscode開發vue項目的一些必備插件

Eslint
檢查代碼是否符合規范

GitLens  
Git提示

language-stylus  
stylus語法支持

Path Intellisense  
相對、絕對路徑提示

Prettier formatter  
代碼格式化

Vetur  
Vue語法支持。包括語法高亮、語法代碼提示、語法lint檢測等

Vue VSCode Snippets
Vue 語法片段擴展

npm Intellisense  
import、require npm模塊是自動補全

Auto Close Tag
自動閉合HTML/XML標簽

Auto Rename Tag
自動完成另一側標簽的同步修改

JavaScript(ES6) code snippets
ES6語法智能提示以及快速輸入，除js外還支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各種包含js代碼文件的時間

HTML CSS Support
讓 html 標簽上寫class 智能提示當前項目所支持的樣式

Bracket Pair Colorizer
給括號加上不同的顏色，便於區分不同的區塊，使用者可以定義不同括號類型和不同顏色

VSCode 初次寫vue項目並一鍵生成.vue模版

文件–>首選項–>用戶代碼片段–>搜索vue.json文件打開

• 打開之后刪除里面的代碼復制下面的代碼

  {
      "Print to console": {
          "prefix": "vue",
          "body": [
              "<!-- $1 -->",
              "<template>",
              "<div class='$2'>$5</div>",
              "</template>",
              "",
              "<script>",
              "//這里可以導入其他文件（比如：組件，工具js，第三方插件js，json文件，圖片文件等等）",
              "//例如：import 《組件名稱》 from '《組件路徑》';",
              "",
              "export default {",
              "//import引入的組件需要注入到對象中才能使用",
              "components: {},",
              "data() {",
              "//這里存放數據",
              "return {",
              "",
              "};",
              "},",
              "//監聽屬性 類似於data概念",
              "computed: {},",
              "//監控data中的數據變化",
              "watch: {},",
              "//方法集合",
              "methods: {",
              "",
              "},",
              "//生命周期 - 創建完成（可以訪問當前this實例）",
              "created() {",
              "",
              "},",
              "//生命周期 - 掛載完成（可以訪問DOM元素）",
              "mounted() {",
              "",
              "},",
              "beforeCreate() {}, //生命周期 - 創建之前",
              "beforeMount() {}, //生命周期 - 掛載之前",
              "beforeUpdate() {}, //生命周期 - 更新之前",
              "updated() {}, //生命周期 - 更新之后",
              "beforeDestroy() {}, //生命周期 - 銷毀之前",
              "destroyed() {}, //生命周期 - 銷毀完成",
              "activated() {}, //如果頁面有keep-alive緩存功能，這個函數會觸發",
              "}",
              "</script>",
              "<style lang='less' scoped>",
              "//@import url($3); 引入公共css類",
              "$4",
              "</style>"
          ],
          "description": "Log output to console"
      }
  }

  • ps:如果沒安裝less 運行時會報錯

  vue安裝less

npm install less less-loader --save-dev
# cli3以上不需配置任何東西
# 更改配置文件build/webpack.base.conf.js
# cli3以下需要配置
rules: [
            //  此處省略無數行，已有的的其他的規則
            {
              test: /\.less$/,
              loader: "style-loader!css-loader!less-loader"
            }
         ]

此時新建.vue文件 輸入vue 按鍵盤的tab就行

轉載：https://blog.csdn.net/jiongsin/article/details/105116855