Webstorm是前端常用的一個IDE工具，本文主要介紹如何安裝webstorm和對webstorm進行配置，主要包括webstorm主題和字型的配置，進行vue開發時的相關配置。

1.下載Webstorm安裝檔案

去官網(http://www.jetbrains.com/webstorm/)下載webstrom安裝檔案。本文中安裝時所使用的是目前的最新版本WebStorm-2017.1.3.exe。

2.執行安裝檔案進行安裝

點選next後選擇安裝目錄：

點選next根據當前系統選擇32bit或者64bit，選擇是否與.css檔案、.html檔案、.js檔案進行關聯，即雙擊這類檔案是否使用webstorm開啟，依個人習慣進行選擇。

點選next->install開始進行安裝：

點選finish安裝完成。

3.修改主題和字型

開啟Webstorm後可以點選Create New Project新建一個專案。

選擇專案存放目錄，點選create即可。

預設的主題和字型比較醜，一般需要對主題和字型進行修改。

點選選單項中的file->Settings->Appearance，修改其中的Theme選項，選擇Darcula會將主題變為深色主題。

選擇file->Settings->Editor->Colors & Fonts，修改Primary font的值，即修改字型的樣式，修改size的值，即修改字型的大小。

完成上面的修改後webstorm的樣式如下，可以根據自己的喜好配置。

4.vue相關配置

在使用webstorm開發vue頁面時還需要進行一些配置才能使我們更好的進行vue專案的開發。

• 安裝vue外掛
  2017.1.3版本已經預設安裝了vue外掛，點選settings->plugin，在搜尋框中輸入vue，如果下面已安裝外掛中有vue.js說明你安裝的webstorm版本已經安裝了vue外掛。

  

  如果沒有出現則需要你手動進行安裝，即在搜尋框中輸入vue後，點選Browse repositories，然後點選Vue.js的Install按鈕進行安裝。

  

• 修改javascript的版本為ES6

  
  在使用vue進行開發時經常會使用ES6進行js程式碼編寫，因此還需要使webstorm識別ES6程式碼。
  點選file->Settings->Languages & Frameworks->JavaScript，修改JavaScript language version的值為ECMAScript6。

  

• 新增Vue template
  在專案中新建檔案是會發現並沒有新建vue檔案這一項，為了方便我們進行vue頁面開發，可以自己新增vue template。

  點選file->New->Edit File Templates。

  

  點選+新增template，在Name中輸入template的名稱為Vue File，在Extension中輸入生成檔案的副檔名為vue,在方框中輸入template的內容。

  

  點選apply之後，再點選file->New就會發現會出現一個Vue File的選項，點選之後會生成一個vue檔案，其中有之前輸入的template的程式碼。

  

  

交流QQ群：255489119