2023年 WebStorm 下载、安装教程、附详细图文教程，亲测有效

骑猪看日落 2024-02-17 12:49 70阅读 0赞

大家好，今天为大家带来的事2023年 WebStorm 下载、安装教程、附详细图文教程，亲测有效。感兴趣的可以收藏点赞哦。

#### 文章目录 ####

*   *  1 简介
     *  2 安装步骤
     *  3 提高效率的 10 个方法
     *   *   *  1、webstorm开启es6环境
             *  2、新建vue文件的模板设置
             *  3、webstorm设置代码自动换行
             *  4、webstorm开启代码提示
             *  5、面板展示与增加面板展示项
             *  6、全局搜索（shift键双击，搜索包括文件，变量，函数等等）
             *  7、设置主题样式、字体大小、字体样式、行高（Ctrl + Alt + S）
             *  8、文件修改的历史版本对比
             *  9、开启代码补全
             *  10、多光标选择
     *  4 常用快捷键

### 1 简介 ###

WebStorm 是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

### 2 安装步骤 ###

WebStorm 的安装其实很简单，大概可以分为 8 步。

1、如果之前装有WebStorm版本, 可以先删卸载, 再重新安装

2、到官网下载WebStorm安装包  
[https://www.jetbrains.com/zh-cn/webstorm/download/other.html][https_www.jetbrains.com_zh-cn_webstorm_download_other.html]  
推荐使用2021.2.2版本, 亲测有效  
![image][]

3、双击打开exe程序，点击“Next”  
![image][image 1]

4、选择安装位置，点击“Next”  
![image][image 2]

5、全选所有选项，点击“Next”  
![image][image 3]

6、确认安装界面，点击“Next”  
![image][image 4]

7、等待安装  
![image][image 5]

8、安装完成，选择何时启动，点击“Finish”  
![image][image 6]

1.  如果想了解怎样授权的话，可以看这篇教程，里面有详细介绍 [**WebStorm 授权教程**][WebStorm] [https://it1314.top/article/778/][WebStorm]

### 3 提高效率的 10 个方法 ###

##### 1、webstorm开启es6环境 #####

![20180622125833169][]

##### 2、新建vue文件的模板设置 #####

**![20180622130110318][]**

##### 3、webstorm设置代码自动换行 #####

**![20180622205450970][]**

##### 4、webstorm开启代码提示 #####

**![20180622205604788][]**

**![20180622205627729][]**

##### 5、面板展示与增加面板展示项 #####

![20180824181430289][]

##### 6、全局搜索（shift键双击，搜索包括文件，变量，函数等等） #####

![20180824181521425][]

##### 7、设置主题样式、字体大小、字体样式、行高（Ctrl + Alt + S） #####

![20180824183828625][]

##### 8、文件修改的历史版本对比 #####

![20180824210032923][]

![20180824210049100][]

##### 9、开启代码补全 #####

（参考网址：[https://jingyan.baidu.com/article/a3f121e4a64767fc9152bb40.html][https_jingyan.baidu.com_article_a3f121e4a64767fc9152bb40.html]）

![20180824211453864][]

##### 10、多光标选择 #####

修改目的：将上述代码的class属性修改item = > item1；修改方法：按住 Alt 键，鼠标便变成了同一位置向下选择。

![20180824213325203][]

对于同一位置的，我们可以使用上述方法，对于不同位置的item => item1，我们可以选择一个，然后 \_ **按住 Alt 键**\_  
，在选择第2个、第3个、第4个…第n个即可，实现统一修改。

### 4 常用快捷键 ###

<table> 
 <thead> 
  <tr> 
   <th>快捷键</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Ctrl+/ 或 Ctrl+Shift+/</td> 
   <td>注释（// 或者/…/ ）</td> 
  </tr> 
  <tr> 
   <td>Shift+F6</td> 
   <td>重命名</td> 
  </tr> 
  <tr> 
   <td>Ctrl+X</td> 
   <td>删除行保存到剪切板</td> 
  </tr> 
  <tr> 
   <td>Ctrl+Y</td> 
   <td>删除一行</td> 
  </tr> 
  <tr> 
   <td>Shift+Enter</td> 
   <td>重新开始下一行（无论光标在哪个位置）</td> 
  </tr> 
  <tr> 
   <td>Ctrl + Shift + Enter</td> 
   <td>重新开始上一行（无论光标在哪个位置）</td> 
  </tr> 
  <tr> 
   <td>Ctrl+D</td> 
   <td>复制行</td> 
  </tr> 
  <tr> 
   <td>Ctrl+G</td> 
   <td>查找行</td> 
  </tr> 
  <tr> 
   <td>Ctrl+Shift+Up/Down</td> 
   <td>代码向上/下移动。</td> 
  </tr> 
  <tr> 
   <td>F2 或 Shift+F2</td> 
   <td>高亮错误或警告快速定位</td> 
  </tr> 
  <tr> 
   <td>Ctrl+Shift+F7</td> 
   <td>高亮显示选中文本，按Esc高亮消失</td> 
  </tr> 
  <tr> 
   <td>Ctrl+B 或 Ctrl+鼠标左键</td> 
   <td>快速打开光标处的类或方法</td> 
  </tr> 
  <tr> 
   <td>Ctrl + Alt + B</td> 
   <td>跳转方法实现处</td> 
  </tr> 
  <tr> 
   <td>Ctrl + Shift + I</td> 
   <td>打开定义快速查找</td> 
  </tr> 
  <tr> 
   <td>Alt + Up/Down</td> 
   <td>跳转到上一个/下一个方法</td> 
  </tr> 
  <tr> 
   <td>Ctrl+E</td> 
   <td>最近打开的文件</td> 
  </tr> 
  <tr> 
   <td>Alt+F1</td> 
   <td>查找代码所在位置</td> 
  </tr> 
  <tr> 
   <td>Ctrl+Alt+L</td> 
   <td>格式化代码</td> 
  </tr> 
  <tr> 
   <td>Ctrl+R</td> 
   <td>替换文本</td> 
  </tr> 
  <tr> 
   <td>Ctrl+Shift+R</td> 
   <td>指定目录内代码批量替换</td> 
  </tr> 
  <tr> 
   <td>Ctrl+Shift+F</td> 
   <td>指定目录内代码批量查找</td> 
  </tr> 
  <tr> 
   <td>Ctrl+F</td> 
   <td>查找文本</td> 
  </tr> 
  <tr> 
   <td>Ctrl+P</td> 
   <td>方法参数提示</td> 
  </tr> 
  <tr> 
   <td>F3</td> 
   <td>查找下一个</td> 
  </tr> 
  <tr> 
   <td>Shift+F3</td> 
   <td>查找上一个</td> 
  </tr> 
  <tr> 
   <td>Alt+Shift+F</td> 
   <td>将当前文件加入收藏夹</td> 
  </tr> 
  <tr> 
   <td>Ctrl+Alt+S</td> 
   <td>打开配置窗口</td> 
  </tr> 
  <tr> 
   <td>Ctrl+Shift+N</td> 
   <td>通过文件名快速查找工程内的文件（必记）</td> 
  </tr> 
  <tr> 
   <td>Ctrl+Shift+Alt+N</td> 
   <td>通过一个字符快速查找位置（必记）</td> 
  </tr> 
  <tr> 
   <td>Shift+Enter</td> 
   <td>重新开始一行（无论光标在哪个位置）</td> 
  </tr> 
  <tr> 
   <td>Ctrl + Alt + T</td> 
   <td>用 if, else, try, catch, for 等来围绕选中的代码块</td> 
  </tr> 
  <tr> 
   <td>Ctrl + Shift + U</td> 
   <td>切换光标所在位置单词的大小写</td> 
  </tr> 
  <tr> 
   <td>Ctrl + Delete</td> 
   <td>删除到单词结束</td> 
  </tr> 
  <tr> 
   <td>Ctrl + Backspace</td> 
   <td>删除到单词开始</td> 
  </tr> 
  <tr> 
   <td>Ctrl + E</td> 
   <td>弹出最近打开的文件</td> 
  </tr> 
  <tr> 
   <td>F11</td> 
   <td>切换书签，就是 sublime text 的F2</td> 
  </tr> 
  <tr> 
   <td>Ctrl + Shift + F12</td> 
   <td>切换最大化编辑器</td> 
  </tr> 
  <tr> 
   <td>Alt + Shift + F</td> 
   <td>添加至收藏夹</td> 
  </tr> 
 </tbody> 
</table>

[https_www.jetbrains.com_zh-cn_webstorm_download_other.html]: https://www.jetbrains.com/zh-cn/webstorm/download/other.html
[image]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/c14de96bd5b342318fb53a0184a77983.png
[image 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/5c3e37f170c94679bc5a62310c8c5636.png
[image 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/abdbf91bbddf486381370312647b62d2.png
[image 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/1c3e119fae7040bda697443f4f2a6c74.png
[image 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/882284baa7c74987a620333a1e52c0ab.png
[image 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/edfc2503b65443f689318d620567d562.png
[image 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/6390553ebef3430a9957de0970747102.png
[WebStorm]: https://it1314.top/article/778/
[20180622125833169]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/950813bd3bcc4dd298f4dd32307f32f6.png?
[20180622130110318]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/607d6cca1c944291955fe315c73aaa9f.png?
[20180622205450970]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/75eb2678589c42dfba491326a268b561.png?
[20180622205604788]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/c1c8ce5a0e904795b2fd4672024dd644.png?
[20180622205627729]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/cd783139cc0341aca083222f1a453e44.png?
[20180824181430289]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/521216eb888044d387ea7a4a3ebdf4ac.png?
[20180824181521425]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/820fa7e0d15446d4911a99399ddd952c.png?
[20180824183828625]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/337f9b87971b4a7ea095cea94d62daa2.png?
[20180824210032923]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/f0c8331b093d4844bc15d0d7247aeb7f.png?
[20180824210049100]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/3bf3ab95339941b798baebd7319b254c.png?
[https_jingyan.baidu.com_article_a3f121e4a64767fc9152bb40.html]: https://jingyan.baidu.com/article/a3f121e4a64767fc9152bb40.html
[20180824211453864]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/5f40f490cc054178909d587ec504308f.png
[20180824213325203]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/aad0ff87b9d6441fa0b092e4528faedc.png?