Webstorm安装和配置

xiaoxiao2021-02-28  32

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

转载请注明原文地址: https://www.6miu.com/read-26876.html

最新回复(0)