【开发工具】WebStorm 前端开发神器菜鸟必备,全网最稳定靠谱的安装教程 一镜到底、全程图文并茂、通俗易懂!

简介: WebStorm 前端开发神器安装教程

🚀 个人主页 极客小俊
✍🏻 作者简介:web开发者、设计师、技术分享博主
🐋 希望大家多多支持一下, 我们一起进步!😄
🏅 如果文章对你有帮助的话,欢迎评论 💬点赞👍🏻 收藏 📂加关注

介绍 🙂

2.png

WebStorm号称最智能的前端开发IDE, 适用于前端开发和相关技术的集成开发环境,作为前端开发

俗话说得好, 你可以不用它,但不可以没有它!

前期准备🚀

系统要求

确保您的计算机满足 WebStorm 的系统要求

操作系统:

  • 这里我以Microsoft Windows 10 64位为例

硬件要求:

  • 最少有 4 GB 的可用硬盘空间(推荐 10 GB 或更多) 否则, 你运行起来可能会一卡一卡的 不舒服 呵呵!

软件要求:

  • 对于WebStorm 2016之前的早期版本,需要从计算机上安装Java才能运行WebStorm,从WebStorm 2016及更高版本开始,JRE 1.8与所有平台的发行版捆绑在一起。我们不需要在计算机上安装任何Java环境也可以运行WebStorm
  • 至少安装一个浏览器,推荐使用 Mozilla Firefox火狐、Google Chrome谷歌 其他浏览器不推荐!

如何选择最合适自己的版本

具体参考我以前写的这篇文章,标题如下

别再瞎搞了,耳朵都竖起来听我说,新手小白开发应该如何选择最合适你的JetBrains IDE版本类型和版本号! 今天一次性给你说清楚!

关于版本,这里我一直使用的是WebStorm 2020.3.3版本,非常稳定,本教程是采用的是WebStorm 2020.3.3版为例, 也很适合刚开始接触的前端开发者!

WebStorm 2020.3.3的下载 ⏬

首先到JetBrains官网下载WebStorm-2020.3.3版本安装包

进入官方下载地址:https://www.jetbrains.com/webstorm/, 然后点击右上角的Download按钮

如图

3.png

步骤2: 进入之后再次点击Other versions 其他历史版本 连接!
4.png

步骤3: 找到版本号为WebStorm 2020.3.3 的进行下载 即可!

这里我就下载2020.3.3 - Windows (exe)版本

5.gif

下载完成后如下所示:

6.png

接下来我们就可以进行安装了!

这里注意一下: 官方下载可能会比较慢,这根据你的网速和网络环境决定!
我已经帮各位把安装包+插件打包整理到网盘里面了,链接地址这里就不发了,一发就失效!
在文章底部:公众号:【极客小俊】 发送暗语: 【webstorm】 即可提取!
给小伙伴带来不便请谅解 实在是没办法! 因为你懂的!🥰🥰🥰

最简单的安装方法 🔥

警告: 确保电脑没有安装老版本的webstrom软件,如有请卸载干净,不然会影响安装过程,发生错误!

步骤1:下载完成后,双击 WebStorm-2020.3.3.exe,打开安装软件

7.png

步骤2: 点击Next下一步继续安装!

8.png

步骤3: 安装目录选择,建议不要安装在C盘下 懂的人都懂!! 不在过多赘述!

9.png

步骤4: 按照需求按勾选自己需要的配置!

不要乱勾选,你如果是不清楚的情况下,就按照我图中勾选的方式来!

10.png

步骤5: 点击next之后, 继续点击 Install

11.png

安心等待其安装完成!

12.png

步骤6: 安装完成后,点击 Finish 完成安装!
13.png

🛠️安装与工具插件⚙️

接下来的步骤,我算是要把真正的干货提供给你了,竖起耳洞认真听哈...嘿...嘿....嘿,懂的都懂!

备注: 仅供学习禁止商用,违者必究! 如有商业需要请支持购买正版,当然你也可以选择教育版认证也是可以的!

步骤1:安装完成之后,点击桌面上的WebStorm 2020.3.3 x64 图标运行软件

然后选择Do not import settings 点击ok

14.png

步骤2: 然后会先弹出一个注册框,勾选 Evaluate for free, 点击 Evaluate

15.png

步骤3: 当点击试用之后,会弹出webStorm欢迎画面,可以先新建一个项目或者打开一个已有的项目
16.png

然后把将事先准备好的插件扩展拖入到webStorm中来!

17.png

正常情况下会提示出please restart the ide 重启 当前WebStorm,这个时候可以先把WebStorm关闭掉!

18.png

步骤6插件目录中找到以下文件, 双击它

19.png

步骤7: 然后再次打开WebStorm, 选择Activation Code输入插件编码,最后点击Activate按钮

提示如果没有弹出以下界面,可以点击 Help -> Register 进行打开!

20.png

最后

最后通过点击 Help -> Register 查看Register会显示状态,到此webStorm 2020.3.3安装完成了!

21.png

22.png

相关文章
|
6天前
|
缓存 JavaScript 开发工具
【开发工具】解决webstorm:Loading indexes...
【开发工具】解决webstorm:Loading indexes...
119 0
|
7月前
|
开发工具
【开发工具】赋予 webstorm terminal 管理员权限
【开发工具】赋予 webstorm terminal 管理员权限
207 1
|
6天前
|
移动开发 前端开发 JavaScript
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
|
前端开发 JavaScript IDE
前端基本开发工具的IDE/编辑器之WebStorm
WebStorm是目前使用非常广泛的一款前端开发工具,它为开发者提供了丰富的功能和良好的用户体验。下面就让我们来看看WebStorm的特点和优势。
135 0
|
前端开发 开发工具 移动开发
WebStorm开发工具设置React Native智能提示
 最近在做React Native开发的时候,相信大家一般会使用WebStorm,Sublime,Atom等等开发工具。二之前搞前端的对WebStorm会很熟悉,WebStorm最新版是WebStorm2016.2.1,React Native默认不能智能提示代码,githun有一个开源的插件:ReactNative-LiveTemplate。 ReactNative的代码模
4179 0
|
6月前
|
JavaScript
使用Webstorm快速启动Vue项目配置
使用Webstorm快速启动Vue项目配置
70 0
|
7月前
|
JavaScript
WebStorm配置代码模板【以vue模板为例,提供vue代码模板】
WebStorm配置代码模板【以vue模板为例,提供vue代码模板】
90 0
|
12月前
|
前端开发
《智能前端技术与实践》——第1章 开发环境配置——1.5 使用 WebStorm
《智能前端技术与实践》——第1章 开发环境配置——1.5 使用 WebStorm
|
12月前
|
前端开发 JavaScript IDE
JavaScript-WebStorm中配置Github并将代码托管到Github
JavaScript-WebStorm中配置Github并将代码托管到Github
77 0
|
JavaScript 前端开发
WebStorm配置【设置左侧及其代码编辑区最舒服的字体】
WebStorm配置【设置左侧及其代码编辑区最舒服的字体】
501 0
WebStorm配置【设置左侧及其代码编辑区最舒服的字体】