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就行