Webstorm安装和配置

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